Skip to main content

​
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.
⌘I