Start je eerste A/B-test met Google Analytics/Tag Manager

De software-oplossingen voor het afnemen van A/B-testen schieten de laatste jaren als paddenstoelen de grond uit. We kennen allemaal Optimizely, VWO en Adobe Test&Target. Maar ook Google timmert hard aan de weg op dit gebied met de nog uit te brengen tool Google Optimize. Via Google Analytics en Google Tag Manager kun je nu ook al testen, ik leg je in deze blog uit hoe dit werkt.

Google Analytics wordt gebruikt voor het aanmaken van het experiment, ofwel een A/B-test, en wordt daarnaast gebruikt voor het opslaan van de data vanuit een experiment. Daarnaast heeft Google, een Tag Manager op de markt gebracht.

Google Tag Manager is een tool om nieuwe JavaScript-code te injecteren op een live site zonder release uit te voeren. Beide tools zijn in staat om met elkaar te communiceren waardoor het mogelijk is gratis A/B-testen op te zetten voor al je sitebezoekers.

Aan het eind van deze blog weet je:

  • Hoe je een experiment aanmaakt in Google Analytics;
  • Hoe je een koppeling maakt van het experiment naar Google Tag Manager;
  • Hoe je een experiment online plaatst.

Inhoudelijk in deze blog ga ik niet in op het installeren en de overige functies van Google Analytics of Google Tag Manager.

Een experiment maken in Google Analytics

Note: voor het aanmaken van het experiment is het noodzakelijk dat het account, waarmee je bent ingelogd, voldoende gebruikersrechten heeft (gebruikersrechten: Bewerken of Gebruikers beheren).

Zodra de varianten van een A/B-test zijn gedefinieerd en uitgewerkt kan er begonnen worden met het maken van het experiment in Google Analytics. De stappen voor het aanmaken van het experiment zijn als volgt:

  1. Login in Google Analytics zorg dat de tab ‘Rapportage’ geselecteerd is.
  2. Open de tab ‘Gedrag’ en klik vervolgens op ‘Experimenten’.
  3. Klik op deze pagina op de button ‘Experiment maken’.
  4. Vul het invoerveld in en selecteer een doel. Het doel is nodig om het aantal conversies te kunnen berekenen. Als de e-commerce module van Google Analytics juist is ingericht raad ik aan om het doel ‘Transacties’ te kiezen. Mochten er geen doelen beschikbaar zijn, dan kan er een nieuw doel worden aangemaakt.
  5. Laat het percentage verkeer naar experiment op 100% staan.
  6. Onder de link ‘Geavanceerde opties’ dient enkel nog de slider van het ‘Verkeer gelijkmatig distribueren naar alle varianten’ op AAN te worden gezet. Dit zorgt ervoor dat het A/B algoritme wordt gebruikt i.p.v. het Multi-armed Bandit algoritme.
    Schermafbeelding 2015-10-13 om 13.03.38
  7. Je experiment configureren
    Geef een URL op van de pagina waarop de A/B-test afgenomen gaat worden. Vervolgens kun je een willekeurige URL opgegeven voor de variant(en). Deze URL hoeft niet te bestaan omdat er geen gebruik wordt gemaakt van de redirect functie binnen Google Analytics Experiments. Later kan in Google Tag Manager één of meerdere URLs ingegeven worden.
    Schermafbeelding 2015-10-13 om 13.03.33
  8. Je experimentcode instellen
    Kopieer het Experiment-ID. Dit ID wordt gebruikt om de koppeling tussen Google Analytics en GTM te maken. Je vindt het experiment-ID door op de button ‘De code handmatig invoeren’ te klikken. De experimentcode wordt voor de implementatie niet gebruikt.
    Schermafbeelding 2015-10-13 om 13.03.29
  9. Controleren en starten
    Klik op ‘Experiment starten’ als alles goed staat ingesteld. Het kan geen kwaad om het experiment al live te zetten in Google Analytics omdat het experiment-ID nog niet aanwezig is op de site waardoor er nog geen koppeling kan worden gemaakt.

Het instellen van Google Tag Manager

In de volgende stappen leg ik uit hoe de koppeling tot stand komt tussen het experiment en Google Tag Manager. Voordat je begint binnen Google Tag Manager is het belangrijk er publicatie rechten op het account aanwezig zijn. Zonder publicatie rechten kan de container niet gepubliceerd worden.

  1. Log in bij Google Tag Manager en maak een nieuwe TAG aan. Geef de TAG een naam en kies ‘Aangepaste HTML’ dat vermeldt staat onder het kopje ‘Wordt de gewenste tag niet weergegeven?’
  2. Kopieer onderstaande code en plak dit in het open veld onder het kopje HTML.

    <!– Laden van Google Analytics Content Experiment API –>
    <script src=”//www.google-analytics.com/cx/api.js?experiment=EXPERIMENT_ID”></script>
    <script>
    // Google Analytics bepaald welke variant getoond gaat worden aan gebruiker.
    var chosenVariation = cxApi.chooseVariation();
    </script>
    <script>
    // Voeg binnen de {} van de variant de JavaScript/jQuery toe.
    var pageVariations = [
    function() {}, // Origineel (voeg hier niets aan toe)
    function() {} // Variant
    ];
    // Wacht totdat de DOM geladen waarna er een variant wordt gekozen.
    $(document).ready(
    pageVariations[chosenVariation]
    );
    </script>

  3. Plak het Experiment ID vanuit Google Analytics op de plaats waar EXPERIMENT_ID staat. Dit ID maakt de koppeling tussen Google Analytics en Google Tag Manager mogelijk.
  4. Zet de code van de variant tussen de {} bij // Variant. Mochten er meerdere varianten zijn aangemaakt in het experiment dan is het mogelijk om een nieuwe functie toe te voegen – function() {}. Zorg wel dat de voorgaande functie wordt afgesloten met een komma (,). Er kunnen tot maximaal 10 varianten worden toegevoegd.
    TIP: Mocht je geen jQuery/JavaScript kennis hebben dan kun je voor de simpele testen gebruik maken van de editor van Optimizely, waarna de code gemakkelijk overgenomen kan worden. Voor de grotere testen raad ik Testing.Agency aan.
  5. Voeg een activeringsregel toe om de code live te kunnen plaatsen.
  6. Sla de TAG op en test de deze binnen een nieuwe container.
  7. Publiceer de container naar de live omgeving. Het experiment staat nu live, gefeliciteerd! 🙂

Conclusie

In het algemeen is het A/B-testen met Google Analytics in combinatie met Google Tag Manager gemakkelijk in te regelen voor het uitvoeren van experimenten. Verschillende functies, zoals mobiel verkeer uitsluiten binnen een experiment, zijn standaard niet aanwezig binnen Google Tag Manager maar kunnen wel worden toegevoegd door het gebruik van Variabelen/Triggers.

Daarnaast is het een voordeel dat de data direct in Google Analytics aanwezig is voor de analyse van het experiment en zijn de mogelijkheden hierdoor onbeperkt. Bijkomend voordeel; beide tools zijn gratis te gebruiken!

Reacties (6)

  1. auke@umigo.mx'

    Interessant artikel! Maar ik heb wel een vraagje, normaal gesproken laad je de google tag manager code na de openings body tag. Echter normaal gesproken moet de google experiment code bovenaan de pagina, net na de opening head tag geplaatst worden. Veroorzaakt dit geen problemen?

    • roy.schieving@onlinedialogue.com'

      Leuk om te horen dat je het een interessant artikel vindt. Bedankt hiervoor.

      Het advies van Google Analytics om de experimentcode onmiddellijk na de eerste head-tag te plaatsen is alleen van toepassing voor split-url testen. Voor split-url testen is dit de snelste/beste oplossing omdat de DOM hiervoor nog niet geladen dient te zijn.

      
Doordat de experimentcode in Google Tag Manager wordt geplaatst, na de openings body-tag, leidt dit niet tot problemen. Het voorkomt eigenlijk problemen omdat de variant pas iets kan uitvoeren nadat de DOM (ready) geladen is. Mocht de DOM nog niet geladen zijn dan kan het voorkomen dat wijzigingen niet te zien zijn op de pagina.

      Succes met het opzetten van een test!

      • roy.schieving@onlinedialogue.com'

        Het klopt dat er een kleine flickering kan optreden bij het inladen van de variant. De flickering is in de meeste gevallen een fractie van een seconden.

        Om dit te reduceren is het mogelijk om het script van Google Tag Manager in de head-tag te plaatsen. Plaats hiervoor het -element direct na de opening van de -tag en het overige deel direct boven het sluiten van -tag.

        Ondanks dit niet wordt aangeraden door Google werkt dit wel naar behoren. 🙂

Reacties zijn gesloten.