A/B-testning i Google Analytics med händelsespårning

av Rostyslav Mykhajliw Grundare av TrueSocialMetrics.com ~ 7 min

Som du vet fungerar Google Analytics-experimentfunktionen som standard endast med separata sidor och den fungerar bra när du startar en annonskampanj. Så du kan styra destinationsadressen. Men vad ska du göra om du inte kontrollerar dina trafikkällor: sökning, hänvisning, inlägg på sociala medier. Det är huvudfrågan. Men vi har en enkel lösning på det. Lösningen kräver:

Låt oss börja testa

/ indexsida har en bild på sig som standard, men vi vill ersätta den med video för 50 % besökare och mäta registreringsfrekvensen för varje fall. Jag har skapat en enkel js för A/B-testning med att spara allokering i cookies.

funktionstilldelning (namn, celler) {
    cell = $.cookie('ab-testing-' + namn);
    if (cell) returnera cell;
    // fördela
    rand = Math.random();
    if (rand<0,5) {
        cell = celler[0];
    } annat {
        cell = celler[1];
    }
    $.cookie('ab-testing-' + namn, cell, { expires: 90, path: '/' });
    returcell;
}

Den här koden tilldelar 50 % av användarna att testa cellen slumpmässigt och sparar allokeringen i en cookie och returnerar allokeringscellens namn. Den första parametern är "testnamnet", den andra - cellnamnlistan

Användningsfall:

allocation('ImageVsVideo', ['Bild', 'Video']); // Bild eller video

För att ersätta bilden på sidan med video i 50 % fall måste vi lägga till en unik identifierare till elementet. Jag har döpt den: ab-testing-ImageVsVideo.

Det är bra, vi är redo att ersätta logik. Jag har laddat upp video på vimeo.com som resultat, efter konvertering fick jag följande exportkod

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

Jag föredrog html5-kod (men om du vill kan du alltid gå tillbaka och använda äldre flash-objekt).

Vår logik är enkel: om cellnamnet är lika med "Video" uppdatera element-id "ab-testing-ImageVsVideo" med given spelarens HTML-kod.

$(function(){
    cell = allocation('ImageVsVideo', ['Bild', 'Video']);
    if (cell=='Video') {
        html = '<iframe src="http://player.vimeo.com/video/45516767" width="460" height="253" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>';
        $('#ab-testing-ImageVsVideo').html(html);
    }
});

Allt fungerar bra, men vi har inte spårat våra mål. Hur vet vi vilken testvariant som vinner?

Google Analytics tillhandahåller en fantastisk funktion som kallas händelsespårning. Det används mest för att spåra användaråtgärder på sidan som knapptryckningar eller någon Ajax-åtgärdsspårning. Men vi kommer att använda det för att spåra vårt tests cellallokering. Det finns 2 obligatoriska argument: Kategori och Åtgärd, i vårt fall kategorin "AB-testning" för alla a/b-tester och åtgärd "ImageVsVideo-Image" (eller ImageVsVideo-Video) som identifierare. Arbetsskript för vår sida.

<script type="text/javascript">
  _gaq.push(['_trackEvent', 'AB-Testing', 'ImageVsVideo-' + allocation('ImageVsVideo', ['Image', 'Video'])]);

Du kan hitta exempel på målsidans källkod, jag har också lagt tilldelningsfunktionen i filen ab-testing.js för enkel användning.

Google Analytics-rapporter är nästa steg

Vårt ursprungliga mål var att öka "SignUp rate", men vi ville också veta en ekonomiskt utfall, generell omvandlingsfrekvens och måluppfyllelse. Så vi valde följande mätvärden:

Unika besökare
Registrera dig (Slutförda mål 11)
Registrera dig (omvandlingsfrekvens för mål 11)
Målvärde per besök
Målomvandlingsfrekvens
Uppfyllda mål

Det är också trevligt att dela upp "Nya" och "Återkommande" besökare, för mest när vi pratar om "SignUp" bryr vi oss om nya användare. Så låt oss gå till anpassad rapport och skapa en ny "A/B-testning"
Det är fantastiskt ! Men vi har fortfarande en fullständig lista över besök utan skillnaden "Bild" eller "Video", så vi måste skapa 2 anpassade segment. Gå till "Avancerade segment" och skapa "Nytt anpassat segment" - "Bild". Hitta mätvärdet "Event Action" innehåller "ImageVsVideo-Image".
Upprepa samma sak för "Video"-segmentet med "Event Action" är lika med "ImageVsVideo" ".

Till sist, använd båda segmenten "Bild" och "Video" och du kommer att se något sånt här:

Som ett resultat: Videokonverteringsfrekvens 13 % mot 10 % med bild, högre ekonomiskt värde, men målkonverteringsfrekvensen är lite lägre. Så vi behöver mer statistik. Låt oss välja sekundär dimension "Trafiktyp".
För direkt trafik är resultaten nästan desamma, men för söktrafik är "SignUp rate" och Economic value mycket högre. Men ur ett annat perspektiv, för befintliga användare minskar konverteringen. Det visar att för personer som redan har besökt vår webbplats är "snabb respons" viktigare. Så det är vettigt att visa "Video" för de nya kunderna som kommer från sökmotorer.

Länkar

Event Tracking Guide

Uppdatering från 2013-07-05

Jag har uppdaterat "tilldelningskod" genom att lägga till stödet för flera tester för samma sida. Till exempel på en aktuell bloggsida - 2 tester: - Det finns 4 olika "singup"-former, med olika meddelanden (men resten av de 3 är dolda). Om du öppnar sidan i ett källläge hittar du dem. – Det andra testet är ett meddelande under formuläret med en länk till sidorna "Hur-det-fungerar" eller "Singup".

Den fullständiga koden finns här. Du kan också download vår senaste version (kom ihåg att vi använder specialiserad async js loader, om du inte behöver ersätta den för (heady $.) document).ready(function(){.

function allocationTestCell(namn, celler) {
    cell = $.cookie('ab-testing-' + namn);
    if (cell) returnera cell;
    // fördela
    rand = Math.random();
    start = 0;
    delta = 1/cell.längd;
    cell = celler[0];
    för (i=0;i<cells.length;i++) {
        if (i*delta<=rand && rand<(i+1)*delta) {
            cell = celler[i];
            ha sönder;
        }
    }
    $.cookie('ab-testing-' + namn, cell, { expires: 90, path: '/' });
    returcell;
}
$(document).ready(function(){
    var AbTestting = {};
    $('.ab-testing').each(function(index, element) {
        test = $(element).attr('data-ab-testing-test');
        cell = $(element).attr('data-ab-testing-cell');
        if (!(AbTestting[test] instans av Array)) {
            AbTestning[test] = [];
        }
        AbTestning[test].push(cell);
    });
    // tilldelning
    för (testa i AbTestting) {
        allocation = allocationTestCell(test, AbTestting[test]);
        _gaq.push(['_trackEvent', 'AB-Testing', test + '-' + allocation, 'ab-testing-'+test+'-'+'allocation', 0, true]);
        $('.ab-testing').each(function(index, element) {
            _test = $(element).attr('data-ab-testing-test');
            _cell = $(element).attr('data-ab-testing-cell');
            if (_test!=test) returnera;
            if (_cell!=allokering) {
                return $(element).hide();
            }
            $(element).show();
        });
    }
});

Den största skillnaden är att ny kod inte kräver att man skriver någon kod på JS. Du behöver bara lägga till klassen "ab-testing" till alla element du vill testa och ange testnamnet och cellnamnet t.ex. <div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="how-it-works">någon kod för testning</div>.

Låt oss titta på ett verkligt exempel på att tillämpa denna testning från början.

Källkoden för detta element ser ut så här:

<div>
  Analysera och förbättra din närvaro på sociala medier <a href="/how-it-works">Kom igång nu</a>
</div>

På det första steget måste du kopiera elementet, ändra ett meddelande och göra det dolt.

<div>
  Analysera och förbättra din närvaro på sociala medier <a href="/how-it-works">Kom igång nu</a>
</div>
<div style="display:none;">
  Analysera och förbättra din närvaro på sociala medier <a href="/signup">Kom igång nu</a>
</div>

Just nu, om du uppdaterar sidan kommer ingenting att ändras: du har 1 synligt och 1 osynligt element med länken du vill testa. I nästa steg måste vi välja ett testnamn och ett cellnamn. I mitt exempel:

signupblogtext - testnamn
så fungerar det - cellnamn för det första blocket med länk till "hur det fungerar"
registrering - cellnamn för det dolda blocket med länk till "registrering"

Vi kommer också att lägga till klassen "ab-testing" som en markör för vår JS. Så hela arbetskoden ser ut så här:

<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="how-it-works">
  Analysera och förbättra din närvaro på sociala medier <a href="/how-it-works">Kom igång nu</a>
</div>
<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="sign-up" style="display:none;">
  Analysera och förbättra din närvaro på sociala medier <a href="/signup">Kom igång nu</a>
</div>

Som ett resultat kommer 50 % av användarna att se ett block med länken "hur-det-fungerar" och ytterligare 50 % - det andra.

Testning

Min kod lagrar allokering i användarnas cookies, vilket innebär att allokeringen bara sker en gång, så om du vill testa den behöver du en ren webbläsare utan cookies. Men en mycket enklare lösning är att använda Google Chrome-funktionen Incognito Window. Det ger ett helt klart nytt webbläsarfönster utan några cookies. Som ett resultat kan du öppna sidan flera gånger och kontrollera om allt fungerar som det ska.