Pruebas A/B en Google Analytics con seguimiento de eventos

por Rostyslav Mykhajliw Fundador de TrueSocialMetrics.com ~ 8 min

Como sabe, de forma predeterminada, la función de experimentos de Google Analytics funciona solo con páginas separadas y funciona bien cuando comienza una campaña publicitaria. Para que pueda controlar la URL de destino. Pero qué hacer si no controla sus fuentes de tráfico: búsqueda, referencia, publicaciones en redes sociales. Ese es el problema principal. Pero tenemos una solución simple para ello. La solución requiere:

• jquery
• jquery.cookie

Empecemos a probar

/ La página de índice tiene una imagen predeterminada, pero queremos reemplazarla con video para el 50 % de visitantes y medir la tasa de registro para cada caso. Creé un js simple para pruebas A/B con asignación de ahorro en cookies.

asignación de funciones (nombre, celdas) {
    celda = $.cookie('ab-testing-' + nombre);
    si (celda) devolver celda;
    // asignar
    rand = Math.random();
    si (rand<0.5) {
        celda = celdas[0];
    } demás {
        celda = celdas[1];
    }
    $.cookie('ab-testing-' + nombre, celda, { expira: 90, ruta: '/' });
    celda de retorno;
}

Este código asigna el 50% de los usuarios a la celda de prueba al azar y guarda la asignación en la cookie y devuelve el nombre de la celda de asignación. El primer parámetro es el "nombre de prueba", el segundo - lista de nombres de celdas

Caso de uso:

asignación('ImagenVsVideo', ['Imagen', 'Video']); // Imagen o Video

Para reemplazar la imagen en la página con video en el 50% de los casos, debemos agregar un identificador único al elemento. Lo he llamado: ab-testing-ImageVsVideo.

Eso es genial, estamos listos para reemplazar la lógica. Subí un video en vimeo.com como resultado, después de la conversión obtuve el siguiente código de exportación

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

Prefería el código html5 (pero si quieres, siempre puedes dar un paso atrás y usar un objeto flash heredado).

Nuestra lógica es simple: si el nombre de la celda es igual a "Video", actualice la identificación del elemento "ab-testing-ImageVsVideo" según el código HTML del reproductor.

$(función(){
    celda = asignación('ImagenVsVideo', ['Imagen', 'Video']);
    if (celda=='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);
    }
});

Todo funciona bien, pero no hemos rastreado nuestros objetivos. ¿Cómo sabemos qué variación de la prueba gana?

Google Analytics proporciona una gran función llamada Seguimiento de eventos. Se usa principalmente para rastrear la acción del usuario en la página, como presionar un botón o algún seguimiento de acción de ajax. Pero lo usaremos para rastrear la asignación de celdas de nuestra prueba. Hay 2 argumentos obligatorios: Categoría y Acción, en nuestro caso, categoría "Prueba AB" para todas las pruebas a/b y la acción "ImagenVsVideo-Imagen" (o ImagenVsVideo-Video) como identificador. Script de trabajo para nuestra página.

<script tipo="texto/javascript">
  _gaq.push(['_trackEvent', 'AB-Testing', 'ImageVsVideo-' + adjudicación('ImageVsVideo', ['Imagen', 'Video'])]);

Puede encontrar una muestra en el código fuente de la página de destino, también puse la función de asignación en el archivo ab-testing.js para facilitar su uso.

Los informes de Google Analytics son el siguiente paso

Nuestro objetivo original era aumentar la "tasa de registro", pero también queríamos conocer una resultado económico, tasa de conversión general y consecución de objetivos. Así que seleccionamos las siguientes métricas:

• Visitantes únicos
• Regístrate (finalizaciones de Goal11)
• Regístrate (tasa de conversión de Goal11)
• Valor del objetivo por visita
• Tasa de conversión de objetivos
• Consecuciones de objetivos

También es bueno dividir a los visitantes "Nuevos" y "Recurrentes", porque principalmente cuando hablamos de "Registrarse" nos preocupamos por los nuevos usuarios. Entonces, vayamos al informe personalizado y creemos una nueva "Prueba A/B"
Es genial ! Pero todavía tenemos una lista completa de visitas sin la diferencia "Imagen" o "Video", por lo que tenemos que crear 2 segmentos personalizados. Vaya a "Segmentos avanzados" y cree "Nuevo segmento personalizado" - "Imagen". Buscar la métrica "Acción de evento" contiene "ImagenVsVideo-Imagen".
Repita lo mismo para el segmento "Video" con "Event Action" igual a "ImageVsVideo-Video ".

Finalmente, aplica ambos segmentos "Imagen" y "Video" y verás algo como esto:

Como resultado: Tasa de conversión de video 13% vs 10% con Imagen, mayor valor económico, pero Tasa de conversión de objetivo es un poco más baja. Así que necesitamos más estadísticas. Seleccionemos la dimensión secundaria "Tipo de tráfico".
Para el tráfico directo, los resultados son casi los mismos, pero para el tráfico de búsqueda, la "tasa de registro" y el valor económico son mucho más altos. Pero desde otra perspectiva, para los usuarios existentes, la conversión está disminuyendo. Muestra que para las personas que ya visitaron nuestro sitio web, la "respuesta rápida" es más importante. Entonces tiene sentido mostrar "Video" a los nuevos clientes que vienen de los motores de búsqueda.

Enlaces

• Event Tracking Guide

Actualización del 07/05/2013

Actualicé el "código de asignación" agregando el soporte de pruebas múltiples para la misma página. Por ejemplo, en una página de blog actual - 2 pruebas: - Hay 4 formularios de "registro" diferentes, con mensajes diferentes (pero el resto de los 3 están ocultos). Si abre la página en un modo fuente, los encontrará.

• La segunda prueba es un mensaje debajo del formulario con un enlace a las páginas "Cómo funciona" o "Registrarse".

El código completo está aquí, también puede download nuestra última versión (recuerde que estamos usando async js especializado loader, si no lo usa, debe reemplazar head.ready(function(){ por $( documento).listo(función(){.

función asignaciónTestCell(nombre, celdas) {
    celda = $.cookie('ab-testing-' + nombre);
    si (celda) devolver celda;
    // asignar
    rand = Math.random();
    inicio = 0;
    delta = 1/celdas.longitud;
    celda = celdas[0];
    for (i=0;i<cells.length;i++) {
        if (i*delta<=rand && rand<(i+1)*delta) {
            celda = celdas[i];
            romper;
        }
    }
    $.cookie('ab-testing-' + nombre, celda, { expira: 90, ruta: '/' });
    celda de retorno;
}
$(documento).listo(función(){
    var PruebaAb = {};
    $('.ab-testing').each(función(índice, elemento) {
        prueba = $(elemento).attr('data-ab-testing-test');
        celda = $(elemento).attr('data-ab-testing-cell');
        if (!(AbTestting[prueba] instancia de Array)) {
            AbPrueba[prueba] = [];
        }
        AbTestting[prueba].push(celda);
    });
    // asignación
    para (prueba en AbTestting) {
        asignación = asignaciónTestCell(prueba, AbTestting[prueba]);
        _gaq.push(['_trackEvent', 'AB-Testing', prueba + '-' + asignación, 'ab-testing-'+prueba+'-'+'asignación', 0, verdadero]);
        $('.ab-testing').each(función(índice, elemento) {
            _test = $(elemento).attr('data-ab-testing-test');
            _cell = $(elemento).attr('data-ab-testing-cell');
            if (_prueba!=prueba) regresa;
            if (_cell!=asignación) {
                devuelve $(elemento).hide();
            }
            $(elemento).mostrar();
        });
    }
});

La principal diferencia es que el nuevo código no requiere escribir ningún código en JS. Solo necesita agregar la clase "ab-testing" a cualquier elemento que desee probar y especificar el nombre de prueba y el nombre de celda, p. <div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="how-it-works">algún código para probar</div>.

Veamos una muestra real de la aplicación de esta prueba desde cero.

El código fuente de este elemento se ve así:

<div>
  Analice y mejore su presencia en las redes sociales <a href="/how-it-works">Empiece ahora</a>
</div>

En la primera etapa, debe copiar el elemento, cambiar un mensaje y ocultarlo.

<div>
  Analice y mejore su presencia en las redes sociales <a href="/how-it-works">Empiece ahora</a>
</div>
<div estilo="pantalla:ninguno;">
  Analice y mejore su presencia en las redes sociales <a href="/signup">Empiece ahora</a>
</div>

Ahora mismo, si actualizas la página, no cambiará nada: tienes 1 elemento visible y 1 elemento invisible con el enlace que deseas probar. En el siguiente paso, debemos elegir un nombre de prueba y un nombre de celda. En mi ejemplo:

• signupblogtext - nombre de prueba
• cómo funciona - nombre de celda para el primer bloque con enlace a "cómo funciona"
• registrarse - nombre de celda para el bloque oculto con enlace a "registrarse"

También agregaremos la clase "ab-testing" como marcador para nuestro JS. Entonces, el código de trabajo completo se ve así:

<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="cómo-funciona">
  Analice y mejore su presencia en las redes sociales <a href="/how-it-works">Empiece ahora</a>
</div>
<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="regístrate" style="display:none;">
  Analice y mejore su presencia en las redes sociales <a href="/signup">Empiece ahora</a>
</div>

Como resultado, el 50 % de los usuarios verá un bloque con el enlace "cómo funciona" y otro 50 %, el segundo.

Pruebas

Mi código almacena la asignación en las cookies de los usuarios, lo que significa que la asignación ocurre solo una vez, por lo que si desea probarlo, necesita un navegador limpio sin cookies. Pero una solución mucho más simple es usar la función Google Chrome Incognito Window. Proporciona una nueva ventana del navegador absolutamente clara sin cookies. Como resultado, puede abrir la página varias veces y verificar si todo funciona correctamente.