React + Google Optimize: Testes A/B entre componentes na sua aplicação
Hoje vamos falar sobre como fazer experimentos em uma aplicação React utilizando o Google Optimize. Mas antes, vamos fazer uma breve introdução sobre esta incrível ferramenta do Google!
O Optimize é uma ferramenta gratuita de otimização de sites lançado em 2012, que nos ajuda aumentar a taxa de conversão e satisfação do consumidor testando diferentes combinações de conteúdo do seu site.
Para utilizá-lo é preciso apenas possuir uma conta Google.
Criando o experimento
Agora que já sabemos o que é o Optimize, vamos criar nosso primeiro experimento direto no dashboard do serviço. Após acessar o dashboard, caso você ainda não possua uma conta para sua Organização, é preciso criar uma clicando no botão "Criar uma conta". Caso você já possua uma conta criada, basta clicar em "Criar Experiência".
Ao clicar no botão abrirá uma sessão contendo algumas informações sobre o Experimento, sendo elas:
Nome: Identificador da experiência.
Url da Página: Url na qual irá rodar o experimento e também a url na qual poderá ser feita alterações via a ferramenta de interface.
Exemplo: https://www.boticario.com.br/perfumaria
Tipo da Experiência: As experiências possuem 5 categorias:
- Teste A/B: Testa duas ou mais variantes, geralmente utilizamos quando queremos testar variações de um mesmo componente em uma mesma página.
- Teste Multivariáveis: Testa duas ou mais combinações de componentes na mesma página, ao invés de mostrar qual componente é mais efetivo.
- Teste de Redirecionamento: Ideal para quando queremos testar duas versões diferentes de uma mesma página em uma mesma URL.
- Teste de Personalização: Quando queremos mostrar uma página apenas para um público específico.
- Modelo de Banner: Possibilidade de adicionar um banner informativo no topo do seu site, com a vantagem da rápida alteração do conteúdo via a ferramenta de interface.
No nosso experimento vamos selecionar o Teste A/B.
Após a criação do Experimento, é preciso lincar ele com o Google Analytics na seção de Medição e objetivos. Após o vínculo você receberá um ID, na qual vai ser usado dentro da nossa aplicação para sabermos qual a variante devemos exibir. Devemos também adicionar 'Rejeições' como objetivo principal, pois queremos mensurar qual componente converte mais.
Após configurado a Medição e Objetivos, vamos para as nossas variantes.
Na sessão das variantes, podemos ver que já temos a Original, então vamos clicar em "Adicionar nova variante" que será o nosso segundo componente. Após criado, podemos ver que temos a opção de alterar o Peso de cada um, na qual seria a porcentagem de exibição entre os componentes. Neste caso, como queremos saber quais deles converte mais, vamos deixar ambos em 50%.
Após feita as configurações no dashboard, vamos iniciar o experimento e irmos para a nossa aplicação.
Acessando as variantes na nossa aplicação
Após termos o Optimize instalado no Google Tag Manager, (caso tenha dúvidas sobre como instalar o Optimize, a Google disponibiliza um tutorial bem completo sobre a instalação via Tag Manager) o Optimize nos disponibiliza uma propriedade chamada google_optimize dentro da window, na qual pode ser acessada através do window.google_optimize.get('id-do-experimento'). Para acessarmos qual variante devemos exibir, vamos colocar este comando dentro de um useEffect na inicialização da página e armazenar o retorno dentro de uma variável.
Quando executarmos o google_optimize?.get(experimentId) ele irá nos retornar '0' ou '1' (pois temos apenas uma variante cadastrada), na qual '0' é a variante original e o '1' a variante nova. Com este valor armazenado na variável optimizeExperiment poderemos utilizar ela para fazer a checagem dos componentes na nossa view, e renderizarmos o componente que queremos.
Conclusão
O Optimize é uma ferramenta bastante completa e que pode nos auxiliar a descobrir mais sobre o nosso usuário, e qual estratégia de conteúdo converte mais utilizando dados.
Nos próximos posts, iremos abordar sobre os outros tipos de testes e também como fazer as alterações via interface gráfica! Então fique ligado e não perca! :)
Possui alguma dúvida? 🙋
Sinta-se a vontade para entrar em contato ou deixar um comentário que iremos responder! ✌️
