Experimentos

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:

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:

  1. 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.
  2. Chamar o método chooseVariation.
  3. 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.).
  4. 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:

  1. Carregue a biblioteca analytics.js.
  2. Defina o ID do experimento expId.
  3. Defina a variante do experimento expVar como a escolhida.
  4. 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 ou cxApi.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 de cxApi.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 de cxApi.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.