⚠️ Pour implémenter l'A/B testing, vous allez avoir besoin de toucher un peu de code. Si le javascript vous file des boutons, envoyez cette page à votre développeur préféré !
L'A/B testing est une méthodologie de déploiement qui consiste à tester plusieurs variantes d'une même configuration sur une population cible, puis à mesurer laquelle fonctionne le mieux.
Même si Axeptio n'embarque pas de script permettant la distribution des variantes, il est très aisé d'implémenter un script qui viendra piocher aléatoirement une version parmi celles à disposition. Pour que l'AB test soit significatif, il est de bon ton de mémoriser la version affichée à l'internaute dans un cookie ou dans le localStorage du navigateur.
Lorsque vous ajoutez le code du SDK Axeptio dans la page de votre site, vous créez une variable axeptioSettings qui peut contenir, si vous le précisez, la version de configuration cookie à afficher. C'est sur cette propriété, intitulée cookiesVersion que vous pourrez agir pour charger une version tirée au sort parmi celles que vous avez à disposition.
Prérequis
Avant de commencer, vous devez créer autant de configurations dans votre projet Axeptio que de variations de votre bandeau que vous souhaitez tester, et avoir le nom technique de ces différentes configurations sous la main.
Sur votre site, il faut ensuite créer un bout de code JavaScript dont le rôle sera de déterminer quelle version est à afficher parmi celles présentes.
Intégrez le code avec la logique
Ce bout de code peut être mis "en dur" dans la page ou chargé via un Tag Manager, peu importe. Il est par contre impératif qu'il s'exécute avant le code Axeptio. On peut également noter que si votre code retourne une version qui n'est pas présente dans la configuration publiée, le script Axeptio retournera la première configuration présente.
Si vous utilisez Google Tag Manager
C'est encore plus simple !
Créez une variable de type JavaScript personnalisé, dans laquelle vous collerez un des 2 scripts proposés.
Dans votre balise Axeptio, modifiez le champ Cookies Version pour appeler cette variable.
Bouts de code prêts à l'emploi
Implémentation aléatoire simple
Dans cette situation, nous disposons de deux versions : landing_fr_A et landing_fr_B. Nous allons choisir aléatoirement laquelle afficher si aucune des deux n'a déjà été affichée.
function getCookiesVersion(){
// Si une version a déjà été présentée à l'utilisateur
// on lui retourne.
var version = window.localStorage.getItem('cookiesVersion');
if (version) {
return version;
}
// Liste des versions que l'on s'attend à trouver
// dans votre configuration publiée
var versions = ['landing_fr_A', 'landing_fr_B'];
// On en choisit une au hasard
version = versions[Math.floor(Math.random() * versions.length)];
// On l'enregistre dans le navigateur
window.localStorage.setItem('cookiesVersion', version);
// Et on la retourne.
return version;
}Implémentation aléatoire pondérée
Dans cette situation nous disposons de trois versions : landing_fr_PROD, landing_fr_TEST1, et landing_fr_TEST2.
Nous souhaitons afficher aux internautes majoritairement la version dite "_PROD" et tester 2 nouvelles versions pour choisir entre deux évolutions de notre configuration.
Plusieurs méthodes et algorithmes sont utilisables pour atteindre cette finalité, nous vous en proposons ici une interprétation naïve à adapter à votre contexte :
function getCookiesVersion(){
// Si une version a déjà été présentée à l'utilisateur
// on lui retourne.
var version = window.localStorage.getItem('cookiesVersion');
if (version) {
return version;
}
// Liste des versions pondérées
var versions = [{
item: 'landing_fr_PROD',
weight: 80
}, {
item: 'landing_fr_TEST1',
weight: 10
}, {
item: 'landing_fr_TEST2',
weight: 10
}]
var version = pickItem(versions);
// On l'enregistre dans le navigateur
window.localStorage.setItem('cookiesVersion', version);
// Et on la retourne.
return version;
}
/**
* @param ##{{item: String, weight: Number}[]} options
* @return String the picked 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;
}