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.

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:

Você deve ver um bloco como esse:

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:

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.