Pular para conteúdo

Testes A/B - Experimentos em Sites

Testes em Sites Usando JavaScript

Este sessão aborda como executar experimentos (testes A/B) em seu site usando o Rastreador JavaScript so MVMCloud Analytics.

Aprenderemos como incorporar a estrutura de teste A/B em seu site, como incorporar e implementar seus experimentos usando as melhores práticas e o que fazer quando um experimento for concluído.

Criando um experimento

Leia o guia do teste A/B para saber mais sobre como criar um experimento de teste A/B.

Incorporando a estrutura JavaScript de teste A/B

Quando você instala no seu site o código de rastreamento javascript do MVMCloud Analytics e, posteriormente, cria um teste A/B, o código gerado é automaticamente incorporado ao seu site.

Carregando o Rastreamento Mais Cedo

Oo código de rastreamento do MVMCloud Analytics que você instala no seu site, por padrão, é carregado de forma assíncrona no navegor do usuário. Isto é feito desta forma para evitar que este código interfira na velocidade de carregamento da página. No entanto, quando você está realizando um teste A/B é recomendado que o teste inicie o mais rapidamente possível para evitar que qualquer oscilação/intermitência do conteúdo atrase o início do teste. Portanto, para evitar a situação descrita, o código de rastreamento precisa ser carregado de forma síncrona durante a realização dos testes, o arquivo que é carregado é o tracker.js. Para fazer isto você precisa modificar o código incorporado no seu site da seguinte forma:

  • Mova o código de rastreamento MVMCloud Analytics que carrega o arquivo tracker.js para a tag <head> do seu site, se ele já não estiver lá;
  • Carregue o arquivo de forma síncrona em vez de assíncrona:
    • Removendo as duas linhas que contém:
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.async=true; g.src=u+'js/tracker.php'; s.parentNode.insertBefore(g,s);
  • Adicionando a seguinte linha após o elemento de fechamento:<script type="text/javascript" src="//url-do-mvmcloud-analytics/js/tracker.js"></script>
  • Seu código de rastreamento ficará assim:
<!-- MVMCloud Analytics2 -->
<script>
  var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
    var u="//url-do-mvmcloud-analytics/";
    _paq.push(['setTrackerUrl', u+'js/tracker.php']);
    _paq.push(['setSiteId', ID-do-seu-site]);
  })();
</script>
<script type="text/javascript" src="//url-do-mvmcloud-analytics/js/tracker.js"></script>
<!-- End MVMCloud Analytics2 Code -->

Incorporando um experimento

Ao criar um experimento em seu MVMCloud Analytics, é gerado para você o código JavaScript que executará seu experimento e que você precisa incorporar nas páginas do seu site que farão parte do experimento. O código geralmente se parece com isso:

<!-- MVMCloud Analytics2 A/B Test -->
<script type="text/javascript">
    var _paq = _paq || [];
    _paq.push(['MvmAbTesting::create', {
        name: 'Teste-de-landing-page', // você também pode usar o '2' (ID do experimento) para ocultar o nome
        percentage: 100,
        includedTargets: [{"attribute":"url","inverted":"0","type":"any","value":""}],
        excludedTargets: [],
        variations: [
            {
                name: 'original',
                activate: function (event) {
                    // normalmente nada precisa ser feito aqui
                }
            },
            {
                name: 'Variation1', // você também pode usar o '2' (ID do experimento) para ocultar o nome
                activate: function(event) {
                    // eg $('#btn').attr('style', 'color: ' + this.name + ';');
                }
            }            
        ],
        trigger: function () {
            return true; // aqui você pode personalizar ainda mais quais dos seus visitantes participarão deste experimento
        }
    }]);
</script>
<!-- MVMCloud Analytics2 A/B Test -->

Neste exemplo, um experimento é criado por meio do _paq.pushmétodo e várias propriedades do experimento são definidas. Este código de experiência será gerado para você em seu MVMCloud Analytics. Para melhor compreensão, aqui está uma explicação do que essas propriedades significam:

  • name- O nome do experimento conforme configurado no MVMCloud Analytics. Se preferir não expor o nome da sua experiência aos seus usuários no DOM, você também pode usar o ID do experimento. Você pode encontrar o ID de um experimento na lista de todos os experimentos no MVMCloud Analytics;
  • includedTargets- Especifica em quais páginas de destino o experimento deve ser ativado. Para que um experimento seja ativado, todas as regras precisam corresponder (AND lógico) e nenhum dos destinos excluídos pode corresponder;
  • excludedTargets- Especifica em quais páginas de destino o experimento não deve ser ativado. Se alguma das regras fornecidas corresponder (OR lógico), o experimento não será ativado mesmo que todos os destinos incluídos correspondam;
  • variations- A lista de diferentes variações que você deseja comparar. Os experimentos podem ser criados para várias variações (A/B), não se restringindo a apenas duas;

Observe que você não pode simplesmente adicionar mais variações neste código JavaScript. Quando o MVMCloud Analytics recebe uma solicitação de rastreamento para um experimento, ele aceita apenas as variações pré-configuradas. Para definir mais variações do experimento ou alterar uma variação existente, edite seu experimento no MVMCloud Analytics.

Propriedades opcionais do experimento

Existem mais propriedades que podem ser configuradas quando você cria um experimento no MVMCloud Analytics. Essas propriedades são opcionais:

var _paq = window._paq = window._paq || [];
_paq.push(['AbTesting::create', {
  // [...]
  percentage: 100,
  startDateTime: '2017/08/25 00:00:00 UTC',
  endDateTime: '2020/05/21 23:59:59 UTC',
  trigger: function () {
      if (isLoggedIn && userAge < 50) {
          return true;
      }
      return false;
  },
  variations: [
        // [...]
        {
            name: 'VariationA',
            percentage: 40,
            activate: function(event) {}
        }          
    ]
}]);
  • percentage- Um percentual de quantos usuários devem participar deste experimento. Por padrão, 100% de seus usuários participarão de seu experimento e verão a versão original ou qualquer uma de suas variações;
  • startDateTime- Se configurado, o experimento não será ativado até o horário de início especificado;
  • endDateTime- Se configurado, o experimento não será mais ativado após o horário de término especificado;
  • trigger- A função trigger permite que você restrinja ainda mais quais visitantes participarão de seu experimento. Por exemplo, se você deseja executar o experimento apenas para visitantes de um país específico ou deseja ativar a experiência apenas em um determinado tipo de página, pode usar esse método para personalizar quem participará;
  • variation.percentage- Por padrão, cada variação obtém a mesma quantidade de tráfego, mas você pode alocar mais ou menos tráfego para variações individuais. Você não precisa configurar uma porcentagem em todas as variações. Se uma porcentagem for especificada apenas para algumas variações, todas as outras variações compartilharão a porcentagem restante igualmente. Por exemplo, se você especificar que a VariationA deve obter 40%, a versão original e a VariationB compartilharão os 60% restantes e serão vistas por 30% do seu tráfego cada. Recomendamos não atribuir mais de 100% em todas as suas variações.

Implementando um experimento

Para resumir o que aprendemos até agora:

  • Para evitar oscilações no conteúdo, o arquivo tracker.js deve ser carregado de forma síncrona o mais cedo possível;
  • O código do experimento gerado pelo MVMCloud Analytics deve ser copiado e colado no site;

Agora você precisa realmente implementar o que deve acontecer quando uma variação de seu experimento for ativada. Tudo o que você precisa fazer é implementar o método activate para cada uma de suas variações.

Exemplo experimentando cores diferentes de um botão

Por exemplo, se você deseja comparar botões de cores diferentes, pode implementar o método activate da seguinte maneira:

variations: [{
  name: 'blue',
  activate: function(event) {
      document.getElementById('btn').style.color = '#0000ff';
  }
},
{
  name: 'red',
  activate: function(event) {
      document.getElementById('btn').style.color = '#ff0000';
  }
}]

Sobre o método activate

Dentro do método activate, a variável de contexto this está dentro da sua variação. Isso significa que você pode acessar o nome da sua variação via this.name.

Um event é passado para o método activate que permite, por exemplo:

  • Acesso a instância do seu experimento via event.experiment;
  • Redirecionar usuários via event.redirect(url);
  • Definir uma função que deve ser executada assim que o DOM estiver pronto via event.onReady(callback);

Se você acessar o DOM usando jQuery ou outra biblioteca, verifique se essa biblioteca já foi carregada quando o experimento for ativado.

Variações de teste

Testar variações pode ser complicado porque as variações são ativadas aleatoriamente e você sempre consegue ver a mesma variação. Para testar uma variação específica, você pode anexar um parâmetro de URL ?pk_ab_test=$variationName. Isso garantirá a ativação da variação fornecida, mesmo que o experimento ainda não deva ser acionado devido a um filtro definido. Ele também não rastreará nenhuma ativação de experimento em seu MVMCloud Analytics para que seus dados sejam mantidos limpos.

Se você estiver executando vários testes na mesma página, poderá ativar várias variações especificando os nomes das variações separados por vírgula: ?pk_ab_test=$variationName1,$variationName2.

Rastrear uma meta manualmente

Ao comparar diferentes variações, muitas vezes é necessário rastrear metas para decidir qual das variações é a mais bem-sucedida. Ao configurar sua experiência, você pode atribuir várias metas como uma "métrica de sucesso". Essas metas geralmente são convertidas automaticamente sem precisar fazer nada, mas você também pode rastrear uma conversão de meta manualmente assim:

variations: [{
  name: 'blue',
  activate: function(event) {
      var button = document.getElementById('btn');
      button.style.color = '#0000ff';
      button.addEventListener('click', function () {
          var idGoal = 5;
          event.experiment.trackGoal(idGoal);
      });
  }
}]

Impacto do ITP (Proteção Inteligente de Rastreamento)

MO MVMCloud Analytics armazena a variação selecionada no armazenamento local para lembrar qual variação foi ativada para um visitante específico. Desde o Safari 13.1, o Safari exclui todos os dados armazenados localmente após sete dias. Isso significa que, se um visitante não visitar seu site por sete dias, a variação ativada não será mais lembrada e, na próxima vez que o visitante visitar seu site, uma nova variação será selecionada aleatoriamente. Caso o visitante volte a visitar o seu site dentro de sete dias, tentamos estender o tempo de vida por mais sete dias. Não esperamos que esse comportamento viese ou invalide os resultados.

Caso deseje excluir o Safari ao executar testes A/B, você pode adicionar o seguinte código ao seu código de rastreamento:

var _paq = window._paq = window._paq || [];
_paq.push(['AbTesting::disableWhenItp']);

Certifique-se de chamar esse método antes de definir qualquer experimento.

Evitando Oscilações de Conteúdo

Ao comparar, por exemplo, diferentes cores de botões para ver qual das cores converte melhor, você pode se deparar com um problema em que primeiro a cor original é mostrada por alguns milissegundos antes que a cor seja alterada para a cor de uma variação. Isso é conhecido como cintilação ou flashing de conteúdo.

Para evitar essa oscilação, é importante colocar o código de rastreamento do experimento na posição correta no código-fonte do seu site.

Aplicativos de Página Única

Sites de página única e Progressive Web Apps se tornaram um padrão nos últimos anos. Acertar o rastreamento desses sites e aplicativos é crucial para o seu sucesso, pois você precisa garantir que os dados medidos sejam significativos e corretos.

Rastrear uma nova visualização de página e garantir que o teste A/B funcione

O desafio começa quando você precisa rastrear uma nova visualização de página. Um aplicativo de página única é diferente de um site comum, pois não há carregamento regular de nova página e o MVMCloud Analytics não pode detectar automaticamente quando uma nova página é visualizada. Isso significa que você precisa informar ao MVMCloud Analytics sempre que a URL e o título da página forem alterados e incorporar o código de teste A/B novamente. Você pode fazer isso usando os métodos setCustomUrl, setDocumentTitle e AbTesting::create assim:

window.addEventListener('pathchange', function() {
    var _paq = window._paq = window._paq || [];
    _paq.push(['setCustomUrl', window.location.pathname]);
    _paq.push(['setDocumentTitle', document.title]);
    _paq.push(['AbTesting::create', {
        name: 'theExperimentName',
        includedTargets: [{"attribute":"url","type":"starts_with","value":"http:\/\/www.example.org","inverted":"0"}],
        excludedTargets: [],
        variations: [
            {
                name: 'original',
                activate: function (event) {
                    // normalmente nada é necessário ser feito aqui
                }
            },
            {
                name: 'blue',
                activate: function(event) {
                    // eg $('#btn').attr('style', 'color: ' + this.name + ';');
                }
            }
        ]
    }]);
    _paq.push(['trackPageView']);
});

Carregar o código de rastreamento de forma síncrona

Conforme já mencionado anteriormente neste guia: é altamente recomendável carregar o arquivo tracker.js de forma síncrona no HTML <head>.

Decidir onde colocar o código do experimento

Recomendamos colar o código JavaScript do experimento logo após o elemento HTML que você deseja alterar.

Se você não pode colocar o código JavaScript no meio do seu HTML, também pode colocar o código diretamente no elemento HTML <head> e realizar a alteração real assim que o DOM estiver pronto:

{
  name: 'blue',
  activate: function(event) {
      event.onReady(function () {
          document.getElementById('btn').style.color = this.name;
      });
  }
}

O uso do evento DOM onReady pode ser problemático, pois pode haver outros eventos DOM ready registrados que são executados antes de seu experimento ser ativado. Se você usar o evento, certifique-se de colocar o código do experimento o mais alto possível no elemento HTML <head>. Isto garantirá que o seu evento ocorrerá primeiro.

Consolide suas mudanças de CSS

Quando você estiver alterando muitos estilos CSS de uma só vez, é recomendável alterá-los todos de uma vez, assim:

{
  name: 'blue',
  activate: function(event) {
    document.getElementById('btn').style.cssText = 'color: blue; font-size: 15px;';
  }
}

Como alternativa, você pode usar classes CSS para alterar vários estilos CSS de uma só vez:

{
  name: 'blue',
  activate: function(event) {
    document.getElementById('btn').className += ' myClass';
  }
}

Use Vanilla JavaScript em vez de jQuery ou outras bibliotecas

Se possível, tente usar código JavaScript nativo em suas variações. Usando document.getElementById('btn') será mais rápido do que jQuery('#btn'). Se você precisar oferecer suporte a navegadores antigos, recomendamos testar se as variações são ativadas corretamente nesses navegadores.

Remova o código do seu experimento de um gerenciador de tags

Recomendamos remover o código de rastreamento de um gerenciador de tags, se você usar um, e colar o código da experiência diretamente em seu site. Se não for possível movê-lo para fora do gerenciador de tags, certifique-se de que seu experimento esteja configurada para carregar de forma síncrona no gerenciador de tags.

Combine a ordem de seus experimentos

Se você executar vários experimentos em seu site, pode ser útil gerar primeiro o código JavaScript para experimentos que afetam os elementos que estão acima da dobra (Primeira parte visível da tela para o usuário quando um site é visualizado). Isso garante que seus experimentos executados acima da dobra sejam executados primeiro e que o código para experimentos não visíveis acima da dobra seja executado depois.

Esconda o elemento <body> até que as variações sejam executadas

Se você tiver um piscar persistente na tela que não consegue resolver toda vez que a página é visualizada, considere ocultar todo o <body> até que seu experimento seja executado. Isso geralmente não é necessário, mas pode ser uma solução se as outras opções não ajudarem.

Finalizando um experimento

Quando um experimento é concluído:

  • Remova o código do experimento de seu site para garantir que seus visitantes não entrem mais em sua experiência. Isso é recomendado mesmo que você tenha agendado uma data de término.
  • Se o experimento provou que uma de suas variações teve um desempenho significativamente melhor do que a versão original, você provavelmente deseja alterar seu site ou aplicativo e implementar permanentemente a variação vencedora.

Boa experimentação!