Como criar um Teste A/B Web

O que é um teste A/B web

É a comparação entre a página que você tem hoje (Controle) e uma ou mais variações dela, com o tráfego real do site dividido entre as versões. No fim, os dados mostram qual experiência converte mais.

As cinco etapas da criação

A GoAB guia você por cinco etapas, exibidas no topo da tela durante toda a criação:

1. Detalhes — nome, hipótese, páginas do experimento e acionador.
2. Variantes — as versões que serão comparadas, criadas no editor visual ou no editor de código.
3. Audiência — para quem o experimento aparece e qual a amostragem.
4. Métricas — como o sucesso do teste será medido.
5. Resumo — revisão final antes de salvar e publicar.

Criando o teste

No menu lateral, acesse Teste AB e clique em + Criar Teste, no canto superior direito. Nessa mesma tela você acompanha todos os seus experimentos e os resultados de cada um.

Etapa 1 — Detalhes

Informações básicas

Para que serve: definir o nome e as configurações básicas do experimento.

• Nome do teste (obrigatório): use um nome que qualquer pessoa do time entenda, como "CTA do topo — Agendar consulta". Enquanto não for preenchido, o teste fica salvo como Rascunho.
• Hipótese do experimento (opcional): siga o formato Se [mudança que será feita], então [impacto esperado na métrica primária], porque [razão baseada em dados, comportamento do usuário ou princípio de design]. Uma boa hipótese descreve o que será testado, qual resultado é esperado e por quê.

Selecionar página(s)

Para que serve: informar em quais páginas o experimento deve acontecer.

• Tipo URL: escolha como a URL será comparada — por exemplo, URL corresponde à para uma página exata.
• Insira a(s) URLs da página: cole o endereço completo, como https://www.seusite.com.br/.
• + Adicionar página: inclua mais páginas para rodar o mesmo experimento em várias URLs.

Acionador (opcional)

Para que serve: definir quando e como ativar o experimento. Caso não seja definido, o experimento é ativado sempre que o usuário acessar a página.

• Clique em + Adicionar acionador e selecione o tipo — Evento DataLayer, que captura eventos específicos definidos no DataLayer do site.
• Use um acionador quando o teste só fizer sentido depois de uma ação específica do usuário, e não já na abertura da página.

Etapa 2 — Variantes

Para que serve: informar quantas variantes deseja e criar as variações da página. O Controle (C) é a página como ela é hoje; a Variante 1 (V1) é a versão com a mudança.

• No topo aparece a URL do teste — a página que será editada. Use o lápis para alterá-la.
• O lápis ao lado de cada versão renomeia a variante; + Adicionar variação cria mais versões (um teste A/B/C, por exemplo).
• Enquanto nada for alterado, a variante aparece como Sem modificações.

Duas formas de criar a variação

Cada variante tem dois botões de edição:

• Editor visual (ícone de paleta) — recomendado. Abre seu site dentro do editor: você navega pela página, clica em qualquer elemento e altera pelo painel Propriedades — conteúdo de texto, dimensões, espaçamento, cores, tipografia, borda e raio, atributos HTML e eventos. A árvore Elements, à esquerda, ajuda a selecionar exatamente o elemento certo. Na barra superior você alterna a visualização entre desktop, tablet e mobile (com resolução ajustável, ex.: 1440 × 900), aplica negrito, itálico, sublinhado e alinhamentos, desfaz e refaz alterações e usa Salvar Automaticamente. Os botões Exibir JS e Exibir CSS mostram o código gerado pelas suas edições. Depois de mexer em um elemento, clique em Aplicar alterações.
• Editor de código (ícone </>) — para casos avançados. Abre um painel com as abas JavaScript e CSS, onde você escreve a alteração manualmente. Ideal para mudanças que o editor visual não cobre. Ao terminar, clique em Salvar (ou Cancelar para descartar).

Dica: teste uma mudança por vez. Se a variante muda cor, texto e posição ao mesmo tempo, você não saberá o que causou o resultado.

Etapa 3 — Audiência

Informe a audiência (opcional)

Para que serve: escolher para quem você quer que o experimento apareça. É possível adicionar mais itens na mesma linha como condicionais E, ou criar um novo grupo com a condicional OU.

Em Tipo da audiência estão disponíveis:

• Tipo de Dispositivo — desktop, tablet ou mobile.
• Navegador
• Geolocalização
• Parâmetro genérico
• Parâmetro UTM — ideal para testar só o tráfego de uma campanha.
• Visitou página na sessão
• Session storage
• Local storage
• Evento na mesma sessão
• Evento DataLayer na mesma sessão

Sem nenhuma condição, o experimento roda para todo o tráfego das páginas selecionadas.

Defina a amostragem

Para que serve: alocar a porcentagem dos seus visitantes que fará parte do teste.

• Arraste o controle ou digite a porcentagem (ex.: 100%).
• A Pré-visualização da amostragem mostra a divisão: C = Controle (50%), V1 = Variante 1 (50%) e E = Excluído (0%).
• Quem fica no grupo Excluído continua vendo a página original e não entra nos resultados.

Dica: com 100% do tráfego, o resultado chega mais rápido. Se a mudança for arriscada, comece com uma porcentagem menor e aumente depois.

Etapa 4 — Métricas

Métrica principal

Para que serve: informar qual será a métrica de sucesso do experimento — o número que decide o vencedor.

• Nome da Métrica (obrigatório): um nome claro, como "Cliques em Agendar consulta" ou "Compras finalizadas".
• Tipo da Métrica (obrigatório): escolha entre Evento DataLayer (captura eventos específicos definidos no DataLayer), Evento Pageview (visualização de página), Evento HTML (eventos de HTML, como o clique em um elemento) e Evento Customizado.

Métricas secundárias (opcional)

Acompanhe métricas adicionais para obter insights mais profundos sobre o desempenho do experimento. Elas não decidem o vencedor — servem para observar efeitos colaterais, bons ou ruins. Clique em + Adicionar métrica secundária e preencha da mesma forma que a principal. Entre 1 e 3 métricas costuma ser o ideal.

Etapa 5 — Resumo e publicação

Para que serve: conferir os detalhes do seu teste antes de publicar. Cada seção pode ser expandida para revisão: Detalhes (nome, tipo de experimento e hipótese), Páginas e Acionador, Variantes, Audiência e Métricas.

• Se alguma etapa estiver incompleta, volte por ela clicando no passo no topo da tela.
• Clique em Salvar. O teste fica pronto e pode ser publicado quando você quiser.

Depois de publicado, o experimento aparece como Ativo na tela Teste AB, onde você acompanha visitantes, conversões e o vencedor em tempo real.

Dúvidas frequentes

Preciso saber programar?
Não. O editor visual cobre a maioria das mudanças — texto, cores, tipografia, espaçamento, dimensões e atributos. O editor de código fica disponível para casos avançados.

Preciso definir um acionador?
Não. Ele é opcional: sem acionador, o experimento é ativado sempre que o usuário acessar a página informada.

Quanto tempo o teste deve rodar?
Até acumular visitantes suficientes para um resultado confiável — em geral, de 1 a 4 semanas. Use a calculadora de tamanho de amostra para estimar antes de começar.

Posso alterar um teste que já está ativo?
Evite. Mudanças no meio da coleta distorcem o resultado. Se precisar, pause o teste e crie uma nova versão dele.

Glossário

• Controle (C) — a página atual, usada como base de comparação.
• Variante (V1, V2…) — versão da página com a mudança que está sendo testada.
• Acionador — evento que define quando o experimento é ativado.
• Amostragem — a porcentagem de visitantes que participa do experimento.
• Excluído (E) — quem fica fora do teste e vê a página original.
• Métrica principal — o número que define qual versão venceu.
• Métrica secundária — indicador de apoio, para observar efeitos colaterais.