Teste A/B no Google Analytics com acompanhamento de eventos

por Rostyslav Mykhajliw Fundador da TrueSocialMetrics.com ~ 8 min

Como você sabe, por padrão, o recurso de experimentos do Google Analytics funciona apenas com páginas separadas e funciona bem quando você está iniciando uma campanha publicitária. Assim, você pode controlar o URL de destino. Mas o que fazer se você não controla suas fontes de tráfego: pesquisa, referência, postagens em mídias sociais. Essa é a questão principal. Mas temos uma solução simples para isso. A solução requer:

• jquery
• jquery.cookie

Vamos começar a testar

/ página de índice tem uma imagem por padrão, mas queremos substituí-la por vídeo para 50% dos visitantes e medir a taxa de inscrição para cada caso. Eu criei um js simples para teste A/B com economia de alocação em cookies.

função alocação(nome, células) {
    célula = $.cookie('ab-testing-' + nome);
    if (célula) retornar célula;
    // distribuir
    rand = Math.random();
    if (rand<0,5) {
        célula = células[0];
    } outro {
        célula = células[1];
    }
    $.cookie('ab-testing-' + nome, célula, { expira: 90, caminho: '/' });
    célula de retorno;
}

Este código aloca 50% dos usuários para testar a célula aleatoriamente e salva a alocação no cookie e retorna o nome da célula de alocação. O primeiro parâmetro é o "nome do teste", o segundo - lista de nomes de células

Caso de uso:

alocação('ImageVsVideo', ['Imagem', 'Vídeo']); // Imagem ou Vídeo

Para substituir a imagem na página por vídeo em 50% dos casos, precisamos adicionar um identificador exclusivo ao elemento. Eu o nomeei: ab-testing-ImageVsVideo.

Isso é ótimo, estamos prontos para substituir a lógica. Eu carreguei o vídeo em vimeo.com como resultado, após a conversão, recebi o seguinte código de exportação

<iframe src="http://player.vimeo.com/video/45516767" width="460" height="253" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>

Eu preferia o código html5 (mas se você quiser, pode sempre voltar atrás e usar o objeto flash legado).

Nossa lógica é simples: se o nome da célula for igual a "Vídeo", atualize o ID do elemento "ab-testing-ImageVsVideo" pelo código html do player fornecido.

$(função(){
    célula = alocação('ImageVsVideo', ['Imagem', 'Vídeo']);
    if (cell=='Vídeo') {
        html = '<iframe src="http://player.vimeo.com/video/45516767" width="460" height="253" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>';
        $('#ab-testing-ImageVsVideo').html(html);
    }
});

Tudo funciona bem, mas não rastreamos nossos objetivos. Como sabemos qual variação de teste vence?

O Google Analytics fornece um ótimo recurso chamado Rastreamento de eventos. É usado principalmente para rastrear a ação do usuário na página, como pressionar o botão ou algum rastreamento de ação ajax. Mas vamos usá-lo para rastrear a alocação de células do nosso teste. Existem 2 argumentos obrigatórios: Categoria e Ação, no nosso caso, categoria "AB-Testing" para todos os testes a/b e ação "ImageVsVideo-Image" (ou ImageVsVideo-Video) como identificador. Script de trabalho para nossa página.

<tipo de script="texto/javascript">
  _gaq.push(['_trackEvent', 'AB-Testing', 'ImageVsVideo-' + alocação('ImageVsVideo', ['Imagem', 'Vídeo'])]);

Você pode encontrar uma amostra no código-fonte da página de destino. Também coloquei a função de alocação no arquivo ab-testing.js para facilitar o uso.

Os relatórios do Google Analytics são a próxima etapa

Nosso objetivo original era aumentar a "taxa de inscrição", mas também queríamos conhecer um resultado econômico, taxa de conversão geral e conclusão de metas. Então selecionamos as seguintes métricas:

• Visitantes únicos
• Inscrever-se (Conclusões da meta11)
• Inscreva-se (Taxa de Conversão da Meta11)
• Valor da meta por visita
• Taxa de conversão de metas
• Metas atingidas

Também é bom dividir os visitantes "Novos" e "Retornantes", porque principalmente quando falamos de "Inscrever-se", nos preocupamos com os novos usuários. Então, vamos ao relatório personalizado e crie um novo "teste A/B"
É ótimo ! Mas ainda temos uma lista completa de visitas sem a diferença "Imagem" ou "Vídeo", então temos que criar 2 segmentos personalizados. Vá para "Segmentos avançados" e crie "Novo segmento personalizado" - "Imagem". A métrica de localização "Ação do evento" contém "ImageVsVideo-Image".
Repita o mesmo para o segmento "Video" com "Event Action" igual a "ImageVsVideo-Video ".

Por fim, aplique os dois segmentos "Imagem" e "Vídeo" e você verá algo assim:

Como resultado: taxa de conversão de vídeo de 13% contra 10% com imagem, maior valor econômico, mas a taxa de conversão de meta é um pouco menor. Portanto, precisamos de mais estatísticas. Vamos selecionar a dimensão secundária "Tipo de tráfego".
Para o tráfego direto, os resultados são quase os mesmos, mas para o tráfego de pesquisa, a "taxa de inscrição" e o valor econômico são muito maiores. Mas, de outra perspectiva, para os usuários existentes, a conversão está diminuindo. Isso mostra que, para as pessoas que já visitaram nosso site, a "resposta rápida" é mais importante. Portanto, faz sentido mostrar "Vídeo" para os novos clientes que vêm dos mecanismos de pesquisa.

Links

• Event Tracking Guide

Atualização de 07/05/2013

Atualizei o "código de alocação" adicionando o suporte a vários testes para a mesma página. Por exemplo, em uma página de blog atual - 2 testes: - Existem 4 formulários de "cadastro" diferentes, com mensagens diferentes (mas os outros 3 estão ocultos). Se você abrir a página em um modo de origem, você os encontrará.

• O segundo teste é uma mensagem no formulário com um link para as páginas "How-it-works" ou "Singup".

O código completo está aqui, também você pode download nossa versão mais recente (lembre-se que estamos usando async js especializado loader, se você não usá-lo, você deve substituir head.ready(function(){ por $( documento).pronto(função(){.

função alocaçãoTestCell(nome, células) {
    célula = $.cookie('ab-testing-' + nome);
    if (célula) retornar célula;
    // distribuir
    rand = Math.random();
    início = 0;
    delta = 1/células.comprimento;
    célula = células[0];
    for (i=0;i<cells.length;i++) {
        if (i*delta<=rand && rand<(i+1)*delta) {
            célula = células[i];
            quebrar;
        }
    }
    $.cookie('ab-testing-' + nome, célula, { expira: 90, caminho: '/' });
    célula de retorno;
}
$(documento).pronto(função(){
    var AbTestting = {};
    $('.ab-testing').each(função(índice, elemento) {
        teste = $(elemento).attr('data-ab-testing-test');
        célula = $(elemento).attr('data-ab-testing-cell');
        if (!(AbTestting[test] instanceof Array)) {
            AbTestting[teste] = [];
        }
        AbTestting[teste].push(célula);
    });
    // alocação
    for (teste em AbTestting) {
        alocação = alocaçãoTestCell(teste, AbTestting[teste]);
        _gaq.push(['_trackEvent', 'AB-Testing', teste + '-' + alocação, 'ab-testing-'+teste+'-'+'alocação', 0, verdadeiro]);
        $('.ab-testing').each(função(índice, elemento) {
            _test = $(elemento).attr('data-ab-testing-test');
            _cell = $(elemento).attr('data-ab-testing-cell');
            if (_test!=teste) return;
            if (_célula!=alocação) {
                return $(elemento).hide();
            }
            $(elemento).show();
        });
    }
});

A principal diferença é que o novo código não requer a escrita de nenhum código em JS. Você só precisa adicionar a classe "ab-testing" a qualquer elemento que deseja testar e especificar o nome do teste e o nome da célula, por exemplo <div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="how-it-works">algum código para teste</div>.

Vejamos uma amostra real da aplicação desse teste desde o início.

O código-fonte desse elemento se parece com:

<div>
  Analise e melhore sua presença na mídia social <a href="/how-it-works">Comece agora</a>
</div>

Na primeira etapa, você deve copiar o elemento, alterar uma mensagem e ocultá-la.

<div>
  Analise e melhore sua presença na mídia social <a href="/how-it-works">Comece agora</a>
</div>
<div style="display:none;">
  Analise e melhore sua presença na mídia social <a href="/signup">Comece agora</a>
</div>

Agora, se você atualizar a página, nada será alterado: você tem 1 elemento visível e 1 elemento invisível com o link que deseja testar. Na próxima etapa, precisamos escolher um testname e um nomes de células. No meu exemplo:

• signupblogtext - nome do teste
• how-it-works - nome da célula para o primeiro bloco com link para "como funciona"
• inscrição - nome da célula para o bloco oculto com link para "inscrição"

Além disso, adicionaremos a classe "ab-testing" como um marcador para nosso JS. Portanto, o código de trabalho completo fica assim:

<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="how-it-works">
  Analise e melhore sua presença na mídia social <a href="/how-it-works">Comece agora</a>
</div>
<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="sign-up" style="display:none;">
  Analise e melhore sua presença na mídia social <a href="/signup">Comece agora</a>
</div>

Como resultado, 50% dos usuários verão um bloco com o link "como funciona" e outros 50% - o segundo.

Teste

Meu código está armazenando a alocação nos cookies dos usuários, o que significa que a alocação está acontecendo apenas uma vez, portanto, se você quiser testá-lo, precisará de um navegador limpo sem cookies. Mas uma solução muito mais simples é usar o recurso Google Chrome Incognito Window. Ele fornece uma nova janela do navegador totalmente clara, sem cookies. Como resultado, você pode abrir a página várias vezes e verificar se tudo está funcionando corretamente.