Guia Rápido - Testly: Ferramenta de Teste A/B Grátis

Pré-requisitos

Antes de começar, você precisa ter:

Conta Criada

Uma conta criada na plataforma Testly

Experimento Configurado

Um experimento criado no dashboard

API Key

Sua chave de API (encontrada no dashboard)

Experiment ID

O ID do experimento criado

Você também precisará definir um Element ID único no seu HTML onde a variante será renderizada.

Implementação em HTML Puro

Passo 1: Adicione o elemento container

Coloque uma <div> vazia onde você quer que a variante apareça:

<div id="meu-botao-cta"></div>

Passo 2: Adicione o script do SDK

Adicione o script antes do fechamento da tag </body>:

<script src="https://testly.com.br/flow.js?experimentId=SEU_EXPERIMENT_ID&elementId=meu-botao-cta&apiKey=SUA_API_KEY"></script>

Exemplo completo

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Minha Landing Page</title>
</head>
<body>
  <h1>Bem-vindo!</h1>
  <p>Confira nossa oferta especial:</p>
  
  <!-- Container onde a variante será renderizada -->
  <div id="meu-botao-cta"></div>

  <!-- SDK Script -->
  <script src="https://testly.com.br/flow.js?experimentId=0c644154-598b-4557-9e3c-a7706a9d1ab1&elementId=meu-botao-cta&apiKey=b4e46e6992744175dc521ac4b72f259afa648280d75938111e3d3910b6efa2df"></script>
</body>
</html>

Cole o script logo antes de </body> para garantir que todo o DOM esteja carregado antes da execução.

Implementação em React

Hook Personalizado (Recomendado)
Componente Direto

Criar hook reutilizável

hooks/useABTest.js

import { useEffect } from 'react';

export function useABTest(experimentId, elementId, apiKey, debug = false) {
  useEffect(() => {
    const script = document.createElement('script');
    script.src = `https://testly.com.br/flow.js?experimentId=${experimentId}&elementId=${elementId}&apiKey=${apiKey}${debug ? '&debug=true' : ''}`;
    script.async = true;
    document.body.appendChild(script);

    return () => {
      document.body.removeChild(script);
    };
  }, [experimentId, elementId, apiKey, debug]);
}

Usar no componente

components/CTAButton.jsx

import { useABTest } from '../hooks/useABTest';

export function CTAButton() {
  useABTest(
    '0c644154-598b-4557-9e3c-a7706a9d1ab1', // experimentId
    'submit-button',                          // elementId
    'b4e46e6992744175dc521ac4b72f259afa648280d75938111e3d3910b6efa2df', // apiKey
    true // debug (opcional)
  );

  return <div id="submit-button"></div>;
}

Implementação via Google Tag Manager

Criar container no HTML

Adicione o elemento onde a variante será renderizada:

<div id="meu-botao-cta"></div>

Criar Tag no GTM

Acesse seu Google Tag Manager
Clique em Tags → Nova
Configure a tag:

Nome da Tag: A/B Test - Botão CTATipo de Tag: HTML PersonalizadoHTML:

<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://testly.com.br/flow.js?experimentId=0c644154-598b-4557-9e3c-a7706a9d1ab1&elementId=meu-botao-cta&apiKey=b4e46e6992744175dc521ac4b72f259afa648280d75938111e3d3910b6efa2df';
  script.async = true;
  document.body.appendChild(script);
})();
</script>

Acionamento:

Escolha DOM Ready ou Page View
Se quiser em páginas específicas, crie um acionador personalizado

Publicar

Clique em Salvar
Clique em Enviar para publicar as alterações
Teste no modo de visualização antes de publicar

Usando variáveis GTM (avançado)

Você pode usar variáveis do GTM para deixar mais dinâmico:

<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://testly.com.br/flow.js?experimentId={{Experiment ID}}&elementId={{Element ID}}&apiKey={{API Key}}';
  script.async = true;
  document.body.appendChild(script);
})();
</script>

Crie variáveis constantes no GTM:

{{Experiment ID}} = 0c644154-598b-4557-9e3c-a7706a9d1ab1
{{Element ID}} = meu-botao-cta
{{API Key}} = b4e46e6992744175dc521ac4b72f259afa648280d75938111e3d3910b6efa2df

Parâmetros do SDK

Parâmetro	Obrigatório	Descrição	Exemplo
`experimentId`	✅ Sim	ID do experimento criado no dashboard	`0c644154-598b-4557-9e3c-a7706a9d1ab1`
`elementId`	✅ Sim	ID do elemento HTML onde a variante será renderizada	`submit-button`
`apiKey`	✅ Sim	Sua chave de API (encontrada no dashboard)	`b4e46e699274...`
`debug`	❌ Não	Ativa logs no console para debugging	`true` ou `false` (padrão: `false`)

Como Funciona

Primeira visita

O SDK escolhe uma variante aleatoriamente
Salva a escolha no localStorage do navegador
Registra uma impressão
Renderiza a variante no elemento especificado

Visitas seguintes

O SDK carrega a mesma variante do localStorage
Não registra nova impressão (evita duplicatas)
Mantém consistência na experiência do usuário

Conversão

Quando o usuário clica no elemento renderizado
O SDK registra uma conversão
As métricas são atualizadas no dashboard

Exemplo de Uso Completo

Landing page com múltiplos testes A/B:

<!DOCTYPE html>
<html lang="pt-BR">
<head>
  <meta charset="UTF-8">
  <title>Landing Page - Oferta Especial</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      max-width: 800px;
      margin: 0 auto;
      padding: 2rem;
    }
    .experiment-container {
      margin: 2rem 0;
      padding: 1rem;
      border: 2px dashed #ccc;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <h1>Oferta Imperdível! 🎉</h1>
  
  <p>Aproveite nossa promoção de lançamento com até 50% de desconto!</p>

  <!-- Teste A/B: Headline -->
  <div class="experiment-container">
    <div id="headline-test"></div>
  </div>

  <!-- Teste A/B: CTA Principal -->
  <div class="experiment-container">
    <div id="cta-principal"></div>
  </div>

  <!-- Teste A/B: Garantia -->
  <div class="experiment-container">
    <div id="garantia-test"></div>
  </div>

  <!-- SDK Scripts -->
  <script src="https://testly.com.br/flow.js?experimentId=EXPERIMENT_1&elementId=headline-test&apiKey=SUA_API_KEY"></script>
  <script src="https://testly.com.br/flow.js?experimentId=EXPERIMENT_2&elementId=cta-principal&apiKey=SUA_API_KEY"></script>
  <script src="https://testly.com.br/flow.js?experimentId=EXPERIMENT_3&elementId=garantia-test&apiKey=SUA_API_KEY"></script>
</body>
</html>

Você pode executar múltiplos experimentos na mesma página! Apenas certifique-se de usar IDs únicos para cada container.

Debug e Troubleshooting

Ativar modo debug

Adicione &debug=true ao final da URL do script:

<script src="https://testly/flow.js?experimentId=...&debug=true"></script>

Logs no console

Você verá informações detalhadas:

[Experiment SDK] userId 60516e02-bb73-469c-9043-fafa305f7a30
[Experiment SDK] Dados recebidos da API: {...}
[Experiment SDK] Variante selecionada: {id: "...", name: "Variant A"}
[Experiment SDK] Script renderizado no container
[Experiment SDK] Evento registrado impression e00326a7...

Problemas comuns

Nada aparece no elemento

Verifique se o elementId está correto e se o elemento existe no HTML antes do script ser executado.

Erro de CORS

Certifique-se de usar a versão mais recente do SDK (CORS já está configurado no servidor).

Variante não muda

O SDK usa localStorage para manter consistência. Limpe o cache ou use navegação anônima para testar diferentes variantes.

Conversões não registram

Verifique se o elemento clicável está dentro da variante renderizada pelo SDK.

Limpar cache local

Para testar diferentes variantes, abra o console e execute:

// Limpar TODOS os dados do experimento
localStorage.clear();

// Ou limpar um experimento específico
localStorage.removeItem('experiment-SEU_EXPERIMENT_ID-variation');
localStorage.removeItem('experiment-SEU_EXPERIMENT_ID-user-id');
localStorage.removeItem('experiment-SEU_EXPERIMENT_ID-impression-VARIANT_ID');

Segurança

API Keys Únicas

Cada API Key é única por usuário

Isolamento de Dados

Usuários só acessam seus próprios experimentos

Validação Server-Side

Variantes são validadas no servidor

CORS Configurado

Permite qualquer origem (seguro via API Key)

Boas Práticas

Teste apenas UMA variável por vez

❌ Não teste: cor do botão + texto + posição ao mesmo tempo✅ Teste: apenas a cor do botãoIsso garante que você saiba exatamente qual mudança impactou os resultados.

Aguarde significância estatística

Mínimo de 100-200 conversões por variante
Aguarde pelo menos 1-2 semanas de teste
Use calculadoras de significância estatística

Decisões precipitadas podem levar a conclusões erradas.

Documente seus testes

Anote hipóteses antes do teste
Registre os resultados
Compartilhe learnings com o time

A documentação ajuda a construir conhecimento ao longo do tempo.

Não mude variantes durante o teste

Pode invalidar os resultados
Se precisar mudar, crie um novo experimento

Alterações durante o teste podem comprometer a validade estatística.

Próximos Passos

Implementar o SDK

Adicione o script no seu site

Criar Variantes

Desenvolva variantes criativas no dashboard

Monitorar Resultados

Acompanhe métricas em tempo real

Iterar e Otimizar

Melhore baseado nos dados coletados

Suporte

Precisa de ajuda? Entre em contato:

Email

[email protected]

Chat ao Vivo

Disponível no dashboard

Documentação

docs.testly.com.br

Versão: 1.0.0 | Última atualização: Outubro 2025

Primeiros Passos

Personalização

Escrevendo Conteúdo

Ferramentas AI

​Pré-requisitos

Conta Criada

Experimento Configurado

API Key

Experiment ID

​Implementação em HTML Puro

​Passo 1: Adicione o elemento container

​Passo 2: Adicione o script do SDK

​Exemplo completo

​Implementação em React

​Criar hook reutilizável

​Usar no componente

​Implementação via Google Tag Manager

​Parâmetros do SDK

​Como Funciona

​Exemplo de Uso Completo

​Debug e Troubleshooting

​Ativar modo debug

​Logs no console

​Problemas comuns

​Limpar cache local

​Segurança

API Keys Únicas

Isolamento de Dados

Validação Server-Side

CORS Configurado

​Boas Práticas

​Próximos Passos

Implementar o SDK

Criar Variantes

Monitorar Resultados

Iterar e Otimizar

​Suporte

Email

Chat ao Vivo

Documentação

Pré-requisitos

Implementação em HTML Puro

Passo 1: Adicione o elemento container

Passo 2: Adicione o script do SDK

Exemplo completo

Implementação em React

Criar hook reutilizável

Usar no componente

Implementação via Google Tag Manager

Parâmetros do SDK

Como Funciona

Exemplo de Uso Completo

Debug e Troubleshooting

Ativar modo debug

Logs no console

Problemas comuns

Limpar cache local

Segurança

Boas Práticas

Próximos Passos

Suporte