Teste A/B no Google Analytics com acompanhamento de eventos

por Rostyslav Mykhajliw Fundador da TrueSocialMetrics.com ~ 7 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:

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

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.



Quando você está pronto para balançar suas análises de mídia social

TrueSocialMetrics dar uma tentativa!


Iniciar teste
Nenhum cartão de crédito necessário.






leia mais




Soda guerras: principais marcas de refrigerante no Twitter
Enquanto nós lembro que havia uma intensa rivalidade entre as marcas de refrigerante no mercado. Todos os dias esta guerra Soda se desdobra em diferentes campos de batalha e um deles é Media.In social deste estudo, vamos dar uma olhada em cinco principais marcas de refrigerante no Twitter no Verão (1 de junho de 2013 - 31 de agosto de 2013). Usando métricas como taxa de Conversação (comentários por post), a taxa de amplificação (partes por post), a taxa de Aplausos (gostos por post) para avaliar e comparar o seu desempenho contas de Twitter.


Acompanhamento multi-dispositivo de Google Analytics e protocolo de medição
Hoje em dia o marketing e análises estão enfrentando um novo desafio após a era PC. É rastreamento multi-dispositivo. Os clientes estão usando smartphones, laptops, PC em casa e nosso software de análise de conta-los como diferentes sessões do usuário.


O tipo mais viral de pinos: Barney no Pinterest
Me deparei com uma técnica interessante usos de Barney para apresentar suas roupas e acessórios no Pinterest. Eles sempre fazem dois tipos de pinos para cada produto: um "produto individual" e um "produto em um ambiente". Eu não podia simplesmente andar pela e não comparar a eficácia de ambos os métodos de representação do produto. Qual deles é mais provável de ser re-fixado e gostei - um "produto individual" ou um "produto em um ambiente" formato?


Modelo de Calendário Editorial para poupar tempo e aumentar a sua presença social
Vamos encarar. A criação de conteúdos é confuso. Você vai precisar para postar regularmente para ver os resultados; Não basta sentar e esperar por sua musa. Mas isso não é o que geralmente acontece. Há uma maneira de torná-lo menos caótica, porém: Utilizando o calendário editorial. Hoje eu estou feliz de compartilhar com vocês um modelo de calendário editorial que usamos aqui no TrueSocialMetrics.