Teste A/B

Para quem é esse conteúdo?

Esse conteúdo é para quem ainda não tem o site na deco.cx e deseja utilizar a Feature de Teste A/B de forma headless, sem migrar de tecnologia.

Se você já tem o site na deco.cx, a criação de Teste A/B está explicada nessa outra documentação.

Como começar?

1 - Criando um projeto deco.cx

2 - Entendendo o Teste A/B

3 - Configuração de eventos

4 - Acompanhando resultados

5 - Go Live

Criando um projeto deco.cx

Acesse o link de criação de sites.

Escolha o template SDK.

deco.cx sdk Template

Após a criação, o projeto ainda não está em nenhum time, você pode associar a algum time no botão Save site to your team.

Entendendo o Teste A/B

Com o site criado e associado a um time, procure na barra de busca por abTest.

Selecione a opção mostrada na imagem:

AbTest Search

Você deve ver um bloco como esse:

AbTest Block

Defina então um nome para o seu teste e depois configure as variantes.

Variantes

As variantes são versões de código que vão executar aleatoriamente para uma parcela do seu público.

Aqui você tem a possibilidade de adicionar Javascript e/ou CSS para customizar a experiência do seu usuário.

Exemplos:

JavaScript to run

document.querySelector("#my-button").textContent = "Buy!"

CSS to run

#my-button { color: red !important; }

Configuração de Eventos

A configuração de eventos é essencial para Testes A/B, agora você vai ver como criar um evento específico para o seu teste.

Na mesma tela de configuração das Variantes, encontre o campo Tracked Elements e clique para adicionar um.

Você deve ver algo como:

Tracked Elements

Agora, basta encontrar o seletor CSS do elemento que deseja criar um evento e escolher o nome do evento.

Acompanhando resultados

Você pode acompanhar o resultado do seu teste, com as métricas que criou diretamente pelo painel da deco.cx.

Importante: Para acompanhar os resultados do Teste pode ser necessário um upgrade no plano do seu time, confira em Pricing.

1 - Clique na aba Experiments.

2 - Clique em Create New Experiment

3 - Crie um experimento com o mesmo nome que colocou no seu Teste.

4 - Acompanhe os resultados.

Para entender mais sobre a tela de resultados, olhe essa documentação.

Go-Live

Antes de colocar o código em produção, preenche um campo chamado plausibleDomain com o mesmo domínio registrado na aba Analytics do seu painel deco.cx

Agora, para que tudo isso seja aplicado no seu site:

  • Clique em Publish
  • Insira esse script no <head> do seu site:
<script src="https://seusite.deco.site/live/invoke/abTest" defer="true"></script>

Próximos passos

Features que ainda não estão disponíveis, mas já estamos trabalhando para lançar:

  • Configuração de tráfego

No Teste a/b para sites deco.cx já é possível definir a quantidade de tráfego, estamos trabalhando para implementar na SDK também.

  • Testes em paralelo

No Teste a/b para sites deco.cx já é possível rodar mais de um teste ao mesmo tempo, estamos trabalhando para implementar na SDK também.

  • Testes A/B/C/...

Estamos trabalhando para implementar a possibilidade de testes com mais de duas versões.

Was this page helpful?
Can't find what you're looking for? Spot an error in the documentation? Get in touch with us on our Community Forum
Continue reading