A/B-testen in Google Analytics met Event Tracking

door Rostyslav Mykhajliw Oprichter van TrueSocialMetrics.com ~ 7 min

Zoals u weet, werkt de Google Analytics-experimentenfunctie standaard alleen met afzonderlijke pagina's en het werkt goed wanneer u een advertentiecampagne start. U kunt dus de bestemmings-URL beheren. Maar wat te doen als u geen controle heeft over uw verkeersbronnen: zoeken, doorverwijzen, berichten op sociale media. Dat is het belangrijkste probleem. Maar daar hebben we een simpele oplossing voor. De oplossing vereist:

• jquery
• jquery.cookie

Laten we beginnen met testen

/ index-pagina heeft standaard een afbeelding, maar we willen deze vervangen door video voor 50% bezoekers en het aanmeldingspercentage voor elk geval meten. Ik heb een eenvoudige js gemaakt voor A/B-testen waarbij toewijzing in cookies wordt opgeslagen.

functie toewijzing(naam, cellen) {
    cel = $.cookie('ab-testing-' + naam);
    als (cel) retourcel;
    // toewijzen
    rand = Math.willekeurig();
    als (rand<0,5) {
        cel = cellen[0];
    } anders {
        cel = cellen[1];
    }
    $.cookie('ab-testing-' + naam, cel, { vervalt: 90, pad: '/' });
    retourcel;
}

Deze code wijst 50% van de gebruikers toe om de cel willekeurig te testen en slaat de toewijzing op in een cookie en retourneert de naam van de toewijzingscel. De eerste parameter is de "testnaam", de tweede lijst met celnamen

Gebruiksgeval:

toewijzing('ImageVsVideo', ['Image', 'Video']); // Afbeelding of video

Om de afbeelding op de pagina in 50% gevallen te vervangen door video, moeten we een unieke identificatie aan het element toevoegen. Ik heb het genoemd: ab-testing-ImageVsVideo.

Dat is geweldig, we zijn klaar om logica te vervangen. Ik heb video geüpload op vimeo.com als resultaat, na conversie kreeg ik de volgende exportcode

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

Ik gaf de voorkeur aan html5-code (maar als je wilt, kun je altijd een stapje terug doen en een verouderd Flash-object gebruiken).

Onze logica is simpel: als de celnaam gelijk is aan "Video", update element-id "ab-testing-ImageVsVideo" door de gegeven player html-code.

$(functie(){
    cel = toewijzing('ImageVsVideo', ['Image', 'Video']);
    als (cel=='Video') {
        html = '<iframe src="http://player.vimeo.com/video/45516767" width="460" height="253" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>';
        $('#ab-testen-ImageVsVideo').html(html);
    }
});

Alles werkt goed, maar we hebben onze doelen niet bijgehouden. Hoe weten we welke testvariant wint?

Google Analytics biedt een geweldige functie genaamd Event Tracking. Het wordt meestal gebruikt voor het volgen van gebruikersacties op de pagina, zoals het indrukken van een knop of het bijhouden van ajax-acties. Maar we zullen het gebruiken om de celtoewijzing van onze test bij te houden. Er zijn 2 vereiste argumenten: Categorie en Actie, in ons geval categorie "AB-testen" voor alle a/b-testen en actie "ImageVsVideo-Image" (of ImageVsVideo-Video) als identificatie. Werkend script voor onze pagina.

<scripttype="tekst/javascript">
  _gaq.push(['_trackEvent', 'AB-Testing', 'ImageVsVideo-' + toewijzing('ImageVsVideo', ['Image', 'Video'])]);

U kunt een voorbeeld vinden op de broncode van de bestemmingspagina, ik heb ook de toewijzingsfunctie in het bestand ab-testing.js geplaatst voor eenvoudig gebruik.

Google Analytics-rapporten is de volgende stap

Ons oorspronkelijke doel was om "SignUp rate" te verhogen, maar we wilden ook een economisch resultaat, algemene conversieratio en behaalde doelen. Daarom hebben we de volgende statistieken geselecteerd:

• Unieke bezoekers
• Aanmelden (Goal11-voltooiingen)
• Aanmelden (Goal11-conversieratio)
• Doelwaarde per bezoek
• Doelconversieratio
• Voltooiingen van doelen

Het is ook leuk om "Nieuwe" en "Terugkerende" bezoekers te splitsen, want als we het hebben over "Aanmelden", geven we vooral om nieuwe gebruikers. Dus laten we naar het aangepaste rapport gaan en een nieuwe "A/B-test" maken
! Maar we hebben nog steeds een volledige lijst met bezoeken zonder het verschil "Afbeelding" of "Video", dus we moeten 2 aangepaste segmenten maken. Ga naar "Geavanceerde segmenten" en maak "Nieuw aangepast segment" - "Afbeelding" aan. Zoekstatistiek "Event Action" bevat "ImageVsVideo-Image".
Herhaal hetzelfde voor het "Video"-segment waarbij "Event Action" gelijk is aan "ImageVsVideo-Video ".

Pas ten slotte beide segmenten "Afbeelding" en "Video" toe en u ziet zoiets als dit:

Resultaat: videoconversieratio 13% versus 10% met afbeelding, hogere economische waarde, maar doelconversieratio is iets lager. We hebben dus meer statistieken nodig. Laten we de secundaire dimensie "Verkeerstype" selecteren.
Voor direct verkeer zijn de resultaten bijna hetzelfde, maar voor zoekverkeer zijn "Aanmeldingspercentage" en Economische waarde veel hoger. Maar vanuit een ander perspectief, voor bestaande gebruikers daalt de conversie. Het laat zien dat voor mensen die onze website al hebben bezocht "snel reageren" belangrijker is. Het is dus logisch om "Video" te laten zien aan de nieuwe klanten die afkomstig zijn van zoekmachines.

Koppelingen

• Event Tracking Guide

Update van 05/07/2013

Ik heb de "toewijzingscode" bijgewerkt door de ondersteuning voor meerdere tests voor dezelfde pagina toe te voegen. Bijvoorbeeld op een huidige blogpagina - 2 tests: - Er zijn 4 verschillende "singup" -formulieren, met verschillende berichten (maar de rest van de 3 is verborgen). Als u een pagina opent in een bronmodus, zult u ze vinden.

• De tweede test is een bericht onder het formulier met een link naar "How-it-works" of "Singup" pagina's.

De volledige code is hier, ook kunt u onze nieuwste versie download gebruiken (vergeet niet dat we gespecialiseerde async js loader gebruiken, als u deze niet gebruikt, moet u head.ready(function(){ vervangen door $( document).klaar(functie(){.

functie toewijzingTestCell(naam, cellen) {
    cel = $.cookie('ab-testing-' + naam);
    als (cel) retourcel;
    // toewijzen
    rand = Math.willekeurig();
    begin = 0;
    delta = 1/cellen.lengte;
    cel = cellen[0];
    voor (i=0;i<cellengte;i++) {
        als (i*delta<=rand && rand<(i+1)*delta) {
            cel = cellen[i];
            pauze;
        }
    }
    $.cookie('ab-testing-' + naam, cel, { vervalt: 90, pad: '/' });
    retourcel;
}
$(document).klaar(functie(){
    var AbTest = {};
    $('.ab-testen').elk(functie(index, element) {
        test = $(element).attr('data-ab-test-test');
        cel = $(element).attr('data-ab-testcel');
        if (!(AbTestting[test] instantie van Array)) {
            AbTest[test] = [];
        }
        AbTestting[test].push(cel);
    });
    // toewijzing
    voor (test in AbTest) {
        toewijzing = toewijzingTestCell(test, AbTestting[test]);
        _gaq.push(['_trackEvent', 'AB-Testing', test + '-' + toewijzing, 'ab-testing-'+test+'-'+'toewijzing', 0, waar]);
        $('.ab-testen').elk(functie(index, element) {
            _test = $(element).attr('data-ab-test-test');
            _cell = $(element).attr('data-ab-testcel');
            als (_test!=test) terugkeer;
            als (_cell!=toewijzing) {
                retourneer $(element).hide();
            }
            $(element).show();
        });
    }
});

Het belangrijkste verschil is dat voor nieuwe code geen enkel stukje code op JS hoeft te worden geschreven. U hoeft alleen de klasse "ab-testing" toe te voegen aan elk element dat u wilt testen en de testnaam en de celnaam op te geven, b.v. <div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="how-it-works">een code om te testen</div>.

Laten we eens kijken naar een echt voorbeeld van het vanaf het begin toepassen van deze test.

De broncode van dit element ziet er als volgt uit:

<div>
  Analyseer en verbeter uw aanwezigheid op sociale media <a href="/how-it-works">Ga nu aan de slag</a>
</div>

In de eerste fase moet je het element kopiëren, een bericht wijzigen en het verborgen maken.

<div>
  Analyseer en verbeter uw aanwezigheid op sociale media <a href="/how-it-works">Ga nu aan de slag</a>
</div>
<div style="display:none;">
  Analyseer en verbeter uw aanwezigheid op sociale media <a href="/signup">Ga nu aan de slag</a>
</div>

Als je nu de pagina ververst, verandert er niets: je hebt 1 zichtbaar en 1 onzichtbaar element met de link die je wilt testen. Bij de volgende stap moeten we een testnaam en een celnaam kiezen. In mijn voorbeeld:

• aanmeldingsblogtekst - testnaam
• hoe-het-werkt - celnaam voor het eerste blok met link naar "hoe het werkt"
• aanmelden - celnaam voor het verborgen blok met link naar "aanmelden"

We zullen ook klasse "ab-testing" toevoegen als markering voor onze JS. Dus de volledige werkende code ziet er als volgt uit:

<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="how-it-works">
  Analyseer en verbeter uw aanwezigheid op sociale media <a href="/how-it-works">Ga nu aan de slag</a>
</div>
<div class="ab-testing" data-ab-testing-test="signupblogtext" data-ab-testing-cell="sign-up" style="display:none;">
  Analyseer en verbeter uw aanwezigheid op sociale media <a href="/signup">Ga nu aan de slag</a>
</div>

Als gevolg hiervan ziet 50% van de gebruikers één blok met de "hoe-het-werkt"-link en nog eens 50% - de tweede.

Testen

Mijn code slaat toewijzing op in gebruikerscookies, wat betekent dat toewijzing slechts één keer plaatsvindt, dus als je het wilt testen, heb je een schone browser zonder cookies nodig. Maar een veel eenvoudigere oplossing is het gebruik van Google Chrome-functie Incognito Window. Het biedt een absoluut duidelijk nieuw browservenster zonder cookies. Hierdoor kun je de pagina meerdere keren openen en controleren of alles naar behoren werkt.