⚠️ Om A/B testing te implementeren, moet je wat code aanpassen. Als JavaScript je angst aanjaagt, stuur deze pagina dan naar je favoriete ontwikkelaar!
A/B testing is een implementatiemethodologie die bestaat uit het testen van meerdere varianten van dezelfde configuratie op een doelpopulatie, en vervolgens te meten welke het beste werkt.
Hoewel Axeptio geen script bevat voor de distributie van varianten, is het heel gemakkelijk om een script te implementeren dat willekeurig een versie uit de beschikbare opties kiest. Om de A/B test significant te maken, is het verstandig om de versie die aan de gebruiker wordt weergegeven in een cookie of in de localStorage van de browser op te slaan.
Wanneer je de Axeptio SDK-code aan de pagina van je website toevoegt, maak je een variabele axeptioSettings die, als je dit opgeeft, de versie van de te displayen cookieconfiguratie kan bevatten. Op deze eigenschap, genaamd cookiesVersion, kun je inwerken om een versie te laden die willekeurig uit de beschikbare versies is gekozen.
Vereisten
Voordat je begint, moet je evenveel configuraties in je Axeptio-project maken als je bandeau-variaties wilt testen, en je moet de technische naam van deze verschillende configuraties bij de hand hebben.
Op je website moet je vervolgens een stukje JavaScript-code maken dat bepaalt welke versie van de beschikbare versies moet worden weergegeven.
Integreer de code met de logica
Dit stukje code kan "hardcoded" op de pagina worden geplaatst of via een Tag Manager worden geladen, het maakt niet uit. Het is echter absoluut noodzakelijk dat het wordt uitgevoerd voordat de Axeptio-code wordt uitgevoerd. We kunnen ook opmerken dat als je code een versie retourneert die niet aanwezig is in de gepubliceerde configuratie, het Axeptio-script de eerste aanwezige configuratie zal retourneren.
Als je Google Tag Manager gebruikt
Het is nog makkelijker!
Maak een variabele van het type aangepast JavaScript, waarin je een van de 2 voorgestelde scripts plakt.
Wijzig in je Axeptio-tag het veld Cookies Version om deze variabele aan te roepen.
Kant-en-klare code-fragmenten
Eenvoudige willekeurige implementatie
In deze situatie hebben we twee versies: landing_fr_A en landing_fr_B. We kiezen willekeurig welke wordt weergegeven als een van de twee nog niet is weergegeven.
function getCookiesVersion(){
// Als een versie al aan de gebruiker is gepresenteerd
// geven we die terug.
var version = window.localStorage.getItem('cookiesVersion');
if (version) {
return version;
}
// Lijst met versies die we verwachten
// in je gepubliceerde configuratie
var versions = ['landing_fr_A', 'landing_fr_B'];
// We kiezen er willekeurig een
version = versions[Math.floor(Math.random() * versions.length)];
// We slaan het op in de browser
window.localStorage.setItem('cookiesVersion', version);
// En we geven het terug.
return version;
}Gewogen willekeurige implementatie
In deze situatie hebben we drie versies: landing_fr_PROD, landing_fr_TEST1, en landing_fr_TEST2.
We willen voornamelijk de zogenaamde "_PROD"-versie aan bezoekers tonen en 2 nieuwe versies testen om te kiezen tussen twee evoluties van onze configuratie.
Er zijn meerdere methoden en algoritmen beschikbaar om dit doel te bereiken. We stellen hier een naïeve interpretatie voor die je aan je context kunt aanpassen:
function getCookiesVersion(){
// Als een versie al aan de gebruiker is gepresenteerd
// geven we die terug.
var version = window.localStorage.getItem('cookiesVersion');
if (version) {
return version;
}
// Lijst met gewogen versies
var versions = [{
item: 'landing_fr_PROD',
weight: 80
}, {
item: 'landing_fr_TEST1',
weight: 10
}, {
item: 'landing_fr_TEST2',
weight: 10
}]
var version = pickItem(versions);
// We slaan het op in de browser
window.localStorage.setItem('cookiesVersion', version);
// En we geven het terug.
return version;
}
/**
* @param ##{{item: String, weight: Number}[]} options
* @return String het gekozen item
*/
function pickItem(options) {
var i, weights = [];
for (i = 0; i < options.length; i++) {
weights[i] = options[i].weight + (weights[i - 1] || 0);
}
var random = Math.random() * weights[weights.length - 1];
for (i = 0; i < weights.length; i++){
if (weights[i] > random){
break;
}
}
return options[i].item;
}