Robuuste A/B tests bouwen

Zonder diepgaande kennis van code.

Je website of app optimaliseren? Dan kun je niet om A/B-testen heen. Maar wat als een test niet doet wat hij moet doen? Wat als…

…wijzigingen niet worden weergegeven?
…er een flikkering is tussen de originele en de nieuwe variant?
…de code onbedoeld meerdere keren wordt uitgevoerd?
…je test in de preview werkt, maar live niet?

Je bent niet de enige die tegen deze problemen aanloopt. En gelukkig kun je er iets aan doen, zelfs als je geen developer bent. In deze blog leer je hoe je experimenten kunt herstellen, zodat je weer de inzichten verzamelt die je nodig hebt.

Wat als je A/B test niet doet wat ‘ie moet doen? Gelukkig kun je hier iets aan doen, zelfs als je geen developer bent. In deze blog leer je hoe je experimenten kunt herstellen, zodat je weer de inzichten verzamelt die je nodig hebt.

A/B tests coderen is een vak apart

Een groot deel van het bouwen van een goed werkende A/B test is het begrijpen van het verschil tussen programmeren voor een experiment en ‘native’ programmeren voor een website. Omdat je (waarschijnlijk) een A/B-testingtool van een derde partij gebruikt voor je experimentenprogramma, kun je je code niet volledig samensmelten met de doelpagina(s) van je test. Dat is vaak de reden dat een developer zonder ervaring met A/B testen waarschijnlijk te snel denkt dat hun code ‘wel werkt’.

Een beetje kennis van Javascript is voor elke CRO-specialist superhandig. Wil je zelf testen leren coderen? Dankzij onderstaande tips (met voorbeelden van code) voorkom je de meestvoorkomende problemen en zorg je voor robuuste A/B tests.

Zo voorkom je fouten in je A/B test

1. Vermijd de visuele editor

Veel A/B-testingtools bieden een visuele editor. Handig voor kleine wijzigingen, zoals een knopkleur aanpassen, maar ongeschikt voor complexere tests. De visuele editor kijkt naar de volgorde van elementen, maar die kan op verschillende pagina’s variëren. Dit leidt vaak tot fouten.

Ons advies: codeer alle experimenten in Javascript.

2. Zet al je experimentencode in een Immediately Invoked Function Execution (IIFE)

Als je specifieke wijzigingen doorvoert in een test, kan het voorkomen dat je experimentcode conflicteert met de website zelf. Resultaat: er staan fouten op de site waardoor bezoekers afhaken.

Om dat te voorkomen, plaats je alle code voor een test in een Immediately Invoked Function Execution (IIFE). Daarmee beperk je al je code tot deze test, waarmee je onvoorziene fouten voorkomt.

Hulpcode: <script src=”https://gist.github.com/BasLinders/db4b41b1070c632074cc1f4df516258f.js”></script>

3. Bouw je experiment modulair op

Niets is vervelender dan een foutje in je test tegenkomen en vervolgens door honderden regels code moeten (laten) ploegen om dit te vinden en op te lossen.

Fouten oplossen (‘debuggen’) gaat een stuk eenvoudiger als je afgebakende, hapklare stukjes code gebruikt om je test modulair mee op te bouwen. Die stukjes code noemen we ‘functies’ en ze maken een experiment een stuk beter leesbaar en makkelijker te interpreteren.

4. Zorg dat je test pas start als de pagina geladen is

In de meeste gevallen moet het uitvoeren van een wijziging in een A/B test wachten totdat de inhoud van de webpagina (het ‘document’) is geladen. Dat wordt vaak gedaan door document.addEventListener(‘DOMContentLoaded’) aan te roepen, waarna de experimentcode pas wordt uitgevoerd.

Het probleem is dan dat de A/B testing tool code vaak uitvoert nadat die gebeurtenis (DOM content loaded) plaatsvindt. De tool ziet dit niet gebeuren, dus zal ook niets doen. Los dit op door in het laadstadium van een webpagina al aan te geven dat je experiment moet worden uitgevoerd met onderstaand stukje code.

Hulpcode: EMBED CODE: <script src=”https://gist.github.com/BasLinders/706b7a98c76f215f5d097edd7401c8c7.js”></script>

5. Gebruik console.log voor debugging

Je test werkt niet zoals bedoeld, maar waarom? Door console.log toe te voegen aan je code, kun je eenvoudig nagaan wat er gebeurt. Dit is een handige manier om te controleren of je code wordt uitgevoerd en of de juiste elementen worden aangepast.

Hulpcode: EMBED CODE: <script src=”https://gist.github.com/BasLinders/29708e4336e32e2f7108d2b93f8a1216.js”></script>

6. Gebruik DOM-manipulatietechnieken

Soms komt het deel van de pagina dat je in een A/B test wilt veranderen pas tevoorschijn als een bezoeker al lang en breed op de pagina aan het kijken is. De testing tool zal dat niet herkennen en dus ook niet reageren. Tenminste, als je daar geen rekening mee houdt, natuurlijk.

Je kunt op dat deel van de pagina ‘wachten’ door bijvoorbeeld te werken met:

setTimeout() – Je stelt een vertraging in voordat iets wordt gedaan door je tool. Jij stelt in hoeveel milliseconden het duurt voordat je code reageert.
setInterval() – Periodiek wordt gecontroleerd of het deel van de pagina dat je wilt bewerken, bestaat.
Handmatige ‘polling mechanismen’ – je schrijft code waarmee je herhaaldelijk door de pagina ‘loopt’ totdat het deel dat je wilt wijzigen verschijnt.

Extra helpende hand

Voor de meeste A/B-testwijzigingen volstaan de eerder genoemde methodes. Maar wat als het element dat je wilt aanpassen slechts kort zichtbaar is of moeilijk te detecteren? In dat geval heb je een krachtigere oplossing nodig: de Mutation Observer.

Deze geavanceerde JavaScript-functionaliteit monitort veranderingen op je pagina en reageert direct zodra een element wijzigt of verschijnt. Je kunt de Mutation Observer zo specifiek instellen als nodig, zodat geen enkele aanpassing onopgemerkt blijft. Een eenvoudige implementatie is snel geregeld, maar voor de beste resultaten is het belangrijk om hem goed af te stemmen op je experiment. Onderstaand codevoorbeeld helpt je op weg.

<script src=”https://gist.github.com/BasLinders/2a645b69c3cfc69b2513edca7e3cbd2e.js”></script>

Een sterke basis

Als je rekening houdt met de (soms subtiele) verschillen tussen coderen voor A/B-tests en regulier webdevelopment, leg je een sterke basis voor succesvolle experimenten. AI kan hierin een waardevolle assistent zijn, maar een goed begrip van de basisprincipes blijft essentieel.

Gebruik deze tips bij je volgende A/B-test of deel dit artikel met je developer om samen betere experimenten op te zetten.

Zin in nog meer inspiratie?

Heb je behoefte aan externe ondersteuning bij je A/B-testprogramma? Of wil je gewoon eens ongegeneerd geeky praten over optimalisaties? Wij staan voor je klaar!