Este guia descreve como usar os Experimentos de conteúdo com o analytics.js.
Visão geral
Com a Estrutura de Experiências de conteúdo do Google Analytics, você pode testar quase qualquer mudança ou variação de uma propriedade para ver seu desempenho quanto à otimização de uma meta específica. Por exemplo, o aumento das conclusões de meta ou a diminuição das taxas de rejeição. Assim, é possível identificar alterações valiosas para implementação com base no impacto direto que elas têm no desempenho do seu website.
Esse documento é destinado a usuários com requisitos avançados e desenvolvedores que querem integrar as experiências do Google Analytics no seu serviço, conforme descrito na Referência do recurso de experiências.
Implementação padrão
Se você é iniciante nas Experiências de conteúdo, considere a possibilidade de usar a implementação padrão no seu website. A maioria das etapas de implementação pode ser concluída na interface da Web do Google Analytics, e isso fornece o código JavaScript necessário para trabalhar com a biblioteca analytics.js.
Essa implementação usa redirecionamentos do lado do cliente para mostrar aos usuários a variação escolhida para eles. Visite a Central de Ajuda do Google Analytics para saber mais sobre os benefícios das experiências e como implementá-las no seu website. Para saber mais, leia:
- Vantagens das experiências (Central de Ajuda): uma visão geral das Experiências de conteúdo e do que você pode fazer com eles.
- Executar uma experiência (Central de Ajuda): aprenda a preparar, configurar e acompanhar o andamento de experiências.
Implementação somente no navegador
Para implementações em que as escolhas de variação são feitas do lado do cliente no navegador, a API JavaScript de Experiências de conteúdo pode ser usada para executar a maior parte do trabalho associado à seleção de uma variação e ao armazenamento de valores experimentais para um usuário usando a biblioteca analytics.js.
Esse tipo de implementação é muitas vezes usado quando você está testando alterações por alterar o DOM/CSS de uma página com JavaScript. Em outras palavras, todas as decisões de variação e alterações pelo usuário são feitas do lado do cliente no navegador. Por exemplo, você pode executar uma experiência para testar variações de:
- Imagens na página.
- Cores do botão.
- Tamanho da fonte.
- Conteúdo da página.
Para escolher uma variação para um usuário, as etapas a seguir precisam ser realizadas toda vez que um usuário for exposto a um experimento:
- Carregar o cliente da API JavaScript de Experiências de conteúdo usando o parâmetro de consulta
experiment
para especificar o ID do experimento executada na página. - Chamar o método
chooseVariation
. - Avaliar o valor de retorno do método
chooseVariation
e realizar a ação apropriada (por exemplo, alterar a imagem, cor dos botões etc.). - Carregar a biblioteca analytics.js e enviar pelo menos um hit para o Google Analytics (por exemplo, "pageview", "event" etc.).
Exemplo
O exemplo simples a seguir escolhe uma variação para cada usuário e mostra a imagem correspondente.
<html> <head> <!-- 1. Load the Content Experiments JavaScript Client --> <script src="//www.google-analytics.com/cx/api.js?experiment=YByMKfprRCStcMvK8zh1yw"></script> <script> var image_variations = [ 'original.png', 'variation1.png', 'variation2.png' ] // 2. Choose the Variation for the User var variation = cxApi.chooseVariation(); window.onload = function(){ // 3. Evaluate the result and update the image exp_image = document.getElementById('hero_image'); exp_image.src = image_variations[variation]; } </script> <!-- 4. Load analytics.js and send a hit to Google Analytics --> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXX-Y', 'auto'); ga('send', 'pageview'); </script> </head> <body> <h1>Welcome</h1> <img id="hero_image"/> <p>Welcome to my experiment!</p> </body> </html>
Implementação no lado do servidor
Esse tipo de implementação é frequentemente utilizado para:
- Executar experiências para websites com conteúdo dinâmico.
- Testar alterações não relacionadas à interface do usuário que ainda tenham efeito sobre seu objetivo. Por exemplo, um conjunto de resultados de consulta de banco de dados que é retornado a um usuário.
- Integrar as experiências do Google Analytics ao seu serviço (por exemplo, provedor de gerenciamento de conteúdo).
- Gerenciar experiências usando sua própria plataforma de otimização.
Nesse caso, a escolha da variação é realizada no servidor, mas a variação é apresentada ao usuário no navegador. Também é dele que a biblioteca analytics.js envia dados para o Google Analytics. Assim, é necessário haver coordenação entre o servidor e o cliente para enviar corretamente os dados da experiência para o Google Analytics sobre os usuários expostos a uma experiência.
Os valores a serem enviados ao Google Analytics são:
- ID da experiência: ID da experiência a que o usuário foi exposto.
- Variação escolhida: o índice da variação exibida ao usuário.
É possível usar o método "set" do analytics.js para informar ao Google Analytics qual variação foi exibida para o usuário.
Para definir os valores da experiência, é necessário realizar as etapas a seguir cada vez que um usuário for exposto a uma experiência e visualizar uma variação:
- Carregue a biblioteca analytics.js.
- Defina o ID do experimento
expId
. - Defina a variante do experimento
expVar
como a escolhida. - Envie pelo menos um hit para o Google Analytics (por exemplo, exibição de página, evento etc.).
Use a lógica do servidor para gravar dinamicamente o JavaScript necessário para definir o ID da experiência e o número da variação da última página exibida para o usuário. Isso garante que, quando a página de variação for processada no navegador do usuário, os valores experimentais do usuário sejam definidos e, em seguida, enviados para o Google Analytics com o hit do analytics.js.
Exemplo
Normalmente, para cada usuário, você determina no servidor a existência de uma experiência em execução na página e, se houver, qual variação exibir ao usuário. No entanto, no exemplo de PHP abaixo, o ID da experiência e o número da variação são definidos no início da página, para simplificar.
<?php // The Id of the experiment running on the page $experimentId = 'YByMKfprRCStcMvK8zh1yw'; // The variation chosen for the user $chosenVariation= 2; ?>
Após a escolha do ID da experiência e da variação para o usuário, a próxima etapa é incluir alguma lógica para gravar dinamicamente os dados da experiência na string JavaScript necessária para definir os valores experimentais:
<html> <head> <script> // 1. Load analytics.js --> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-XXXXX-Y', 'auto'); // 2. Set the chosen variation for the User (Dynamically in this case) --> <?php <<<HTML ga('set', 'expId', '$experimentId'); // The id of the experiment the user has been exposed to. ga('set', 'expVar', '$chosenVariation'); // The index of the variation shown to the user. HTML; ?> // 3. Send a pageview hit to Google Analytics. ga('send', 'pageview'); </script> </head> <!-- Begin body -->
Depois que a execução do script PHP é concluída, os valores da experiência são salvos na página. Depois que o JavaScript na página é processado no navegador, todos os valores da experiência são definidos e, em seguida, enviados com o hit "pageview" da biblioteca analytics.js.
Referência da API JavaScript de Experiências de conteúdo
A API JavaScript de Experiências de conteúdo pode ser usada para:
- Escolher uma variação para um usuário: para implementações do lado do cliente, essa API fornece uma maneira fácil de selecionar uma variação da experiência para novos usuários ou conseguir a variação a que o usuário já foi exposto.
- Definir a variação escolhida para um usuário: isso é útil ao lidar com escolhas de experiências do servidor e quando você deseja informar a variação escolhida pelo cliente para o Google Analytics.
- Conseguir a variação escolhida para um usuário: recuperar uma variação escolhida anteriormente armazenada para um usuário.
Carregamento do cliente da API
Para carregar o cliente da API JavaScript de Experiências de conteúdo em uma página experimental, você adiciona um snippet de JavaScript à página:
<script src="//www.google-analytics.com/cx/api.js"></script>
ou você pode usar um parâmetro de consulta experiment
para especificar um ID de experiência e carregar informações para essa experiência.
<script src="//www.google-analytics.com/cx/api.js?experiment=YByMKfprRCStcMvK8zh1yw"></script>
O cliente é carregado de forma síncrona e cria um objeto global chamado cxApi
. Os desenvolvedores usam o objeto cxApi
para escolher variações, e definem e recebem valores experimentais.
Constantes do objeto cxApi
Há três constantes usadas para definir variações comuns:
cxApi.ORIGINAL_VARIATION
: para indicar o conteúdo original de uma experiência.cxApi.NO_CHOSEN_VARIATION
: para indicar que nenhuma variação foi escolhida para o usuário.cxApi.NOT_PARTICIPATING
: para indicar que o usuário não participa da experiência.
Métodos do objeto cxApi
chooseVariation
Escolhe uma variação para o usuário.
Se o usuário já faz parte do experimento, chooseVariation
retorna o número da variação à qual o visitante já foi exposto, a menos que o experimento tenha terminado ou que a variação esteja desativada. Nesses casos, ele retorna cxApi.ORIGINAL_VARIATION
, especificando o original. Se o usuário for iniciante na experiência, ele determinará se o usuário será incluído na experiência com base na taxa de participação configurada. Se o usuário for incluído, ele usará os pesos da experiência para selecionar aleatoriamente uma variação para o usuário e gravar o valor em um cookie.
chooseVariation
simplifica o processo de determinar qual variação será exibida a um usuário.
Ele sempre retorna uma variação, mesmo que o usuário não esteja incluído no experimento. Nesse caso, retorna cxApi.ORIGINAL_VARIATION
. Em comparação, o getChosenVariation
informa qual variação foi escolhida anteriormente para um usuário, incluindo se nenhuma variação foi escolhida para ele ou se ele foi excluído do experimento.
cxApi.chooseVariation();
Retorna
Integer
: o índice da variação escolhida.
Exemplos
Escolher a variação para mostrar ao usuário:
variationNumber = cxApi.chooseVariation();
setChosenVariation
Define a variação que foi escolhida para o usuário exposto a uma experiência e grava os valores em um cookie.
cxApi.setChosenVariation(chosenVariation, opt_experimentId);
Parâmetros
Integer chosenVariation
: o índice da variação mostrada ao usuário oucxApi.NOT_PARTICIPATING
.String opt_experimentId
: o ID do experimento para o qual definir a variação escolhida. Se não for fornecido, utiliza a primeira experiência ao carregar o cliente.
Exemplos
Definir a variação escolhida para o usuário:
cxApi.setChosenVariation(2, ‘YByMKfprRCStcMvK8zh1yw’);
Definir a variação escolhida para o usuário quando o ID da experiência é especificado durante o carregamento do cliente:
cxApi.setChosenVariation(2);
getChosenVariation
Se estiver disponível, mostra a variação previamente escolhida para o usuário.
cxApi.getChosenVariation(opt_experimentId);
Parâmetros
String opt_experimentId
: o ID da experiência para a qual conseguir a variação escolhida. Se não for fornecido, utiliza a primeira experiência ao carregar o cliente.
Retorna
Integer
: o índice da variação escolhida para o usuário. O retorno decxApi.NO_CHOSEN_VARIATION
indica que o usuário é novo para o novo experimento, e você precisa determinar o que fazer com o usuário (por exemplo, escolher uma variação). O retorno decxApi.NOT_PARTICIPATING
indica um usuário recorrente que não foi escolhido para ser incluído no experimento.
Exemplos
Mostrar a variação escolhida para o usuário:
variationNumber = cxApi.getChosenVariation(‘YByMKfprRCStcMvK8zh1yw’);
Mostrar a variação escolhida para o usuário quando o ID da experiência é especificado durante o carregamento do cliente:
variationNumber = cxApi.getChosenVariation();
Cookies experimentais
A API inclui algumas chamadas opcionais que personalizam a forma como o cookie é salvo.
setDomainName
Define o nome de domínio a ser usado ao gravar os cookies da experiência. É necessário defini-lo como o mesmo valor especificado para o código de acompanhamento do analytics.js.
cxApi.setDomainName(domainName);
Parâmetros
String domainName
- o nome de domínio a ser usado.
setCookiePath
Define o caminho do cookie a ser usado ao gravar o cookie das experiências. É necessário defini-lo como o mesmo valor especificado para o código de acompanhamento do analytics.js.
cxApi.setCookiePath(cookiePath);
Parâmetros
String cookiePath
: o caminho do cookie a ser usado.
setAllowHash
Define a configuração da hash do domínio do cookie a ser usada ao gravar o cookie das experiências. É necessário defini-lo como o mesmo valor especificado para o código de acompanhamento do analytics.js.
cxApi.setAllowHash(allowHash);
Parâmetros
Boolean allowHash
: se o hash do domínio será permitido.