Een goed converterende website is, zoals we vaker zeggen bij SDIM, cruciaal voor elke ondernemer. A/B testen is hierbij essentieel, zodat de beste en meest optimale versie van de website wordt samengesteld. Waar dit vroeger vaak gebeurde met het gratis programma Google Optimize, zijn er sinds het verdwijnen hiervan betaalde alternatieven voor Google Optimize ontstaan. Bij SDIM kiezen wij vaak voor het A/B testen via VWO, maar soms is dit niet de beste oplossing. Immers kan VWO vrij prijzig worden voor simpele tests op pagina’s met veel verkeer. Daarom voeren wij bij SDIM ook regelmatig A/B-testen uit via Google Tag Manager (GTM). In dit artikel leggen wij stap voor stap uit hoe je dat kunt doen.
Voorwaarden
Om te beginnen even een aantal voorwaarden waar we vanuit gaan.
Je hebt ervaring met CSS, JavaScript en/of HTML. We hebben namelijk geen interface zoals VWO, dus we gaan zelf code moeten toevoegen in GTM.
Voor sommige tests is de hulp nodig van een developer. Die kan ook eventueel helpen met voorwaarde 1 hierboven.
Misschien overbodig om te vermelden als je al tot hier bent gekomen in dit artikel, maar: je hebt Google Tag Manager nodig of een andere tagmanager.
In het voorbeeld van dit artikel gaan we ervan uit dat we de buttonkleuren van deze website niet geel maar roze willen maken. Simpele test misschien, maar voldoende voor dit voorbeeld. Wat we hierbij nodig hebben is:
Een stukje code dat de buttonkleur aanpast (voor deze specifieke test)
Een random verdeling van bezoekers in groep A en B voor een valide test in GTM over een langere tijd
Het inladen van CSS voor bezoekers in groep B
Het aan Google Analytics doorgeven of bezoekers deelnemen aan een test, hoe de test heet en of ze in de originele variant of de variant zitten
Het analyseren van de testresultaten in Google Analytics of een alternatieve tool
Scripts en het hele voorbeeld staan ook in deze drive-link, die direct geïmporteerd kan worden in GTM. Voor het gemak gaan we ervan uit dat de code waarmee een variant wordt getoond al beschikbaar is en lopen wij de verschillende componenten door.
Random verdeling bezoekers
We gaan bezoekers verdelen op basis van een random getal dat Google Tag Manager kan genereren en plaatsen dit direct in een cookie. Scripts en het hele voorbeeld staan in de eerder genoemde drive-link als JSON-bestand. Dit bestand kan direct geïmporteerd worden in je eigen GTM.
Om te beginnen verdelen we bezoekers op basis van de ingebouwde variabele “Random Number”. Deze plaatsen we in een cookie genaamd ab_cookie, mits de bezoeker nog niet eerder deze cookie heeft gekregen. De onderstaande code moet als HTML-tag worden ingeladen:
<script>
(function() {
var cookieName = "ab_cookie"; // Name of your cookie
var cookieValue = "{{Random Number}}"; // Value of your cookie
var expirationTime = 29030400; // 48 weeks in seconds
expirationTime = expirationTime * 1000; // Converts expiration time to milliseconds
function getCookie(name) {
var nameEQ = name + "=";
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var c = cookies[i].trim();
if (c.indexOf(nameEQ) === 0) {
return c.substring(nameEQ.length, c.length);
}
}
return null;
}
function setCookie(name, value, milliseconds) {
var date = new Date();
date.setTime(date.getTime() + milliseconds); // Sets expiration time
var expires = "expires=" + date.toUTCString();
document.cookie = name + "=" + value + "; SameSite=None; Secure; " + expires + "; path=/; domain=." + location.hostname.replace(/^www\./i, "");
}
var existingCookie = getCookie(cookieName);
if (existingCookie) {
// Update the expiration time for the existing cookie
setCookie(cookieName, existingCookie, expirationTime);
} else {
// Set a new cookie
setCookie(cookieName, cookieValue, expirationTime);
}
})();
</script>
Opmerking: Zorg ervoor dat de trigger alleen wordt geactiveerd als de huidige hostnaam en verwijzende hostnaam niet gelijk zijn aan elkaar. Dit zorgt ervoor dat het script automatisch de verlooptijd van de cookie bijwerkt wanneer een nieuwe sessie wordt gestart. Hieronder vind je de benodigde Custom JavaScript Macro.
function() {
var currentHostname = location.hostname.replace(/^www\./i, ""); // Current hostname without 'www.'
var referrerHostname = document.referrer ? new URL(document.referrer).hostname.replace(/^www\./i, "") : ""; // Referrer's hostname without 'www.'
// Return true if hostnames are different, false otherwise
return currentHostname !== referrerHostname;
}
De op deze variabele gebaseerde trigger noemen wij “PV – Different hostname referrer”. Deze trigger activeert op basis van een pageview, met als voorwaarde dat de variabele van hierboven true bevat.
Bezoekers splitsen we op basis van het laatste cijfer van de cookiewaarde: even of oneven. Als de cookiewaarde nog niet bestaat, gebruiken we het random getal dat op dat moment wordt gegenereerd.
De JavaScript-macro voor het ophalen van deze waarde ziet er als volgt uit:
function() {
// Fetch GTM variables
var randomnumb = {{Random Number}};
var dc = {{CD - ab_cookie}};
// Check if `dc` is defined
if (dc !== undefined && dc !== null) {
return dc;
} else {
return randomnumb;
}
}
Hierboven zie je de code voor de originele versie en de manier waarop we de groepen splitsen. In dit voorbeeld doen we dit op basis van het laatste cijfer van de cookie en of dit cijfer even of oneven is. Je kunt echter ook andere methoden toepassen, zoals het eerste of tweede cijfer gebruiken, of een indeling maken zoals 0 t/m 4 versus 5 t/m 9.
Voor het inladen van de A/B-testen gebruiken we dataLayer.push in HTML-tags. Hieronder staat een voorbeeld van de variant. Houd bij het instellen rekening met de triggers, zodat de test alleen wordt uitgevoerd op de juiste momenten.
Belangrijk:
Het event dat wordt gebruikt voor elke A/B-test moet hetzelfde zijn.
Gebruik per test een unieke block trigger.
In de variabele test_name verwerk je de naam van de test, en in test_variant geef je aan of het om de originele variant of de testvariant gaat.
In ons voorbeeld passen we de buttonkleuren aan op alle pagina’s. De trigger wordt daarom geactiveerd op alle pagina’s. In de onderstaande code zie je de tag voor de variant. Hierin laden we ook meteen de CSS om de buttonkleuren te wijzigen (zie regel 11 t/m 15).
Zorg dat je aangepaste dimensies aanmaakt in GA4 voor test_name en test_variant op gebeurtenisniveau. Als trigger gebruiken we ab_test.
Opmerking: Je kunt deze data ook naar andere tools sturen, zoals Piwik Pro of Piano Analytics. De setup blijft hetzelfde: gebruik consistente parameternamen voor de testnaam en variantnaam.
Segment in GA4
We zijn klaar met de codes, en nu komt een van de belangrijkste stappen: het analyseren van de resultaten. Naast het gebruik van Google BigQuery kun je dit ook goed doen via verkenningen in GA4. Houd er rekening mee dat verkenningen geen statistische analyses bieden, maar ze zijn wel handig om inzichten te verkrijgen.
Segmenten per testvariant
We raden aan om per A/B-testvariant losse segmenten aan te maken. Bijvoorbeeld:
Voor de originele variant maak je een segment aan waarin de waarde van test_variant gelijk is aan “original”.
Voor de testvariant maak je een segment aan waarin de waarde van test_variant gelijk is aan “variant”.
Zet deze segmenten naast elkaar in een verkenning en vergelijk ze op basis van de voor jou relevante statistieken. Of het nu gaat om omzet per sessie, conversiepercentages of de gemiddelde tijd op de website – je kunt deze inzichten eenvoudig visualiseren en analyseren in de verkenningstool.
Conclusie
Bij SDIM geloven we heilig in een data-gedreven aanpak en A/B testen is daar een onmisbaar onderdeel van. Hopelijk heb je nu genoeg handvaten om zelf aan de slag te gaan met A/B testen via Google Tag Manager met ons template. Toch teveel code en handwerk? Bekijk dan gerust ook ons artikel over A/B testen via VWO of neem contact op om te ontdekken wat het beste past in jouw situatie.
Usability kan omschreven worden op meerdere manieren; user-friendly, gebruiksvriendelijkheid of bruikbaarheid. In het vakgebied usability binnen CRO wordt met…
Reacties (0)