A/B test opzetten met Google Analytics, Tag Manager en Optimize

Je kunt een A/B test opzetten met gratis tools van Google. Het implementeren en instellen hoef je gelukkig maar 1 keer te doen. Om welke tools gaat het? Voor het opzetten van een A/B test heb je het volgende nodig:

Met Google Optimize maak je een experiment aan. Je kunt vervolgens variant B aanpassen met een handige editor. In dit voorbeeld gebruiken we een WordPress website maar dit kan ook prima met e-commerce software zoals Magento of Prestashop.

1. Implementeer Google Analytics

Meld je aan voor Google Analytics. Dit is vrij eenvoudig. Nadat je aangemeld hebt krijg je een tracking-ID. Die kun je later invoeren bij Tag Manager.

Optioneel: Na aanmelding krijg je ook een stukje code, de algemene sitetag. Deze kun je plakken in de header van je website. Met een wordpress installatie kan dit bijvoorbeeld zijn in het bestand header.php (wp-content/themes/jouwtheme/header.php). Na de <head> tag plak je de code in het bestand.

Je kun het plakken van de code overslaan omdat we Analytics gaan activeren met Google Tag Manager zodat we alles op 1 plek hebben.

Optioneel: Je kunt zonder toestemming de bezoekersgedrag monitoren met Google Analytics. Hiervoor moet je wel een aantal instellingen doen om AVG-vriendelijk te zijn. Doe je dit niet dan is het verplicht om een cookie melding in te stellen.

Accepteer amendement gegevensverwerking bij accountinstellingen.

2. Zet gegevens delen met Google uit. Ga naar accountinstellingen en onder het kopje ‘instellingen voor gegevens delen‘ zet je de vinkjes. Klik op opslaan.

3. Zet Gegevens verzamelen voor advertentiefuncties uit. Ga naar Beheerder en in de tweede kolom selecteer je Trackinginfo, zet alles op uit en sla op.

4. Zet de functie voor User ID’s inschakelen uit. Ga naar Beheerder en in de tweede kolom selecteer je Trackinginfo. Klik op Gebruiker-ID en zet deze uit.

5. Er is nog een laatste stap; het anonimiseren van IP-adres. Gebruik je de algemene site tag dan moet je een coderegel toevoegen.

Bij de ene laatste regel,
gtag (‘config’. ‘UA-xxxxxxxxx’);
verander je dit naar:
gtag (‘config’. ‘UA-xxxxxxxxx’, { ‘anonymize_ip’: true });

Gebruik je Tag Manager dan ga je naar Google Analytics instellingen variabele. Bij Meer instellingen (vink overschrijven aan), onder Velden die moeten worden ingesteld, voeg je een veld toe met naam ‘anonymizeIP’ en bij de waarde zet je true. Klik op opslaan.

2. Implementeer Google Tag Manager

Met Tag Manager wordt het implementeren van nieuwe tools makkelijk gemaakt. Je plaatst een code van Tag Manager eenmalig in je site. Via Tag Manager kun je vervolgens verschillende tools laden zonder het plaatsen van nieuwe codes in je site. Met Tag manager injecteer je nieuwe HTML zonder dat je een developer hiervoor nodig hebt.

Waarom worden marketeers en developers hier van enthousiast? Snelheid, overzichtelijk, betrouwbaar en makkelijk onderhoud. Je plaatst maar 1 code op je website en Google doet rest van het werk. Je hebt minder codes op je site en met Tag Manager kun je codes eerst laten testen. Met minder codes heb je ook meer overzicht wat waar zit.

Nadat je aangemeld en ingelogd bent bij Google Analytics, ga je naar Google Tag Manager.

Klik op Account maken.
Vul de velden in en vink de serviceovereenkomst aan en klik op Ja.
Je krijgt vervolgens 2 scripts die je moet plakken in de kop en in de body van je site. Bij WordPress ga je naar header.php en en daar plak je de 2 codes in. Je kunt header.php bewerken via thema editor in het dashboard.
Klik op OK. We gaan nu Google Analytics – Tracking ID invoeren bij Tag Manager.
Ga naar Tags. Klik op Nieuw. Klik op Tagconfiguratie. Klik op Google Analytics – Universal Analytics.
Trackingtype houd je op Paginaweergave. Bij Google Analytics-instellingen klik je op nieuwe variabele. Daarvoor je de tracking ID. Klik op opslaan.
Voeg nu Trigger toe. Kies voor All Pages. Klik op opslaan en opslaan.
Klik nu op verzenden en daarna op publiceren.

Ga naar Analytics en klik op realtime. Als het goed is zul je minstens 1 gebruiker moeten zien (jezelf). Als het niet werkt ga terug naar Tag Manager. Vink Overschrijven van instellingen aan en vul het tracking ID in.

Wil je nog AVG vriendelijk zijn dan kun je onder Velden; een nieuw veld toevoegen met naam ‘anonymizeIP’ en bij de waarde zet je true. Klik op opslaan.

3. Implementeer Google Optimize

Met Google Optimize kun je A/B testen uitvoeren. Je kunt gebruikers verschillende versies van een website laten zien om de conversie rate te verbeteren.

Ga naar Google Optimize. Doorloop de aan de slag pagina.
Ga naar instellingen en koppel je Google Analytics account.
Installeer de Chrome extensie.
Ga naar Google Tag Manager en voeg een nieuwe tag toe.
Kies voor Google Optimize en voer de Container-ID in. Deze kun je vinden bij Container instellingen bij Optimize.
Selecteer {{instellingen van Google Analytics}}
Klik op Geavanceerde instellingen en vul in bij Prioriteit voor het activeren van tags: 11000 in.
Voeg een Trigger toe met All Pages. Klik op opslaan.

Ga naar je Google Analytics tag. Klik op geavanceerde instellingen. Klik op Tagreeks.

Optioneel kun je een code toevoegen om page flicker te verminderen. De pagina knippert tijdens het laden. Dit helpt gebruikers met trage internetverbindingen.

Maak een nieuwe tag aan. Kies voor aangepaste HTML. Plak de page snippet in het veld.
Verander GTM-XXXXXX naar jouw Tag Manager container ID.

<!-- Page hiding snippet (recommended) -->
<style>.async-hide { opacity: 0 !important} </style>
<script>
(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);
})(window,document.documentElement,'async-hide','dataLayer',4000,{'GTM-XXXXXX':true});
</script>

Zorg dat page flicker gestart wordt na optimize.

Als het goed is ben je nu klaar en kun je beginnen met Optimize A/B test.

Opzetten A/B test in Google Optimize

Ga naar Google Optimize en klik op aan de slag.
Vul een naam in voor je experiment.
Voer een URL in. De pagina waarmee je de test wilt doen.
Voeg een variant toe. Noem deze variant B.
Je kunt nu (met behulp van de Chrome Extensie) variant B veranderen.

Als voorbeeld heb ik de button voor contact pagina van webanalist.nl/contact verandert naar blauw bij variant B.

Bij doelgroeptargeting kun je kiezen welke gebruikersgroep dit experiment ondergaat. Je kunt bijvoorbeeld kiezen voor locatie of technologie.

Selecteer een doel. Met een doel meet je hoe je varianten presteren. Je kunt uit de lijst een doel kiezen. We kiezen bijvoorbeeld Bounces. We willen zien of een variant B leidt tot een lagere bounce rate dan variant A (oorspronkelijke versie).