L'A/B Testing

⚠️ 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é !

⚖️Chez Axeptio on pense que tester ce n'est pas tromper. C'est super important de pouvoir comparer. Quel message convertit le mieux ? Le violet c'est pas trop flashy ? Donnez-vous en à cœur joie !

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 cookieVersion que vous pourrez agir pour charger une version tirée au sort parmi celles que vous avez à disposition.

Avant de passer à l'intégration sur vos propres pages, il faudra bien évidemment créer les différentes versions dans l'interface d'administration. Dans l'interface d'accueil du projet, et après avoir cliqué sur "Gestion des cookies", choisissez "Créez une configuration de cookies" ou dupliquez la configuration que vous voulez modifier.

✅ Pensez à lui donner un nom caractéristique dans le champ intitulé Identifiant de la version.

Une fois les modifications validées, publiez le projet afin de mettre en ligne cette nouvelle version.

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. 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.

• Implémentation aléatoire simple
• Implémentation aléatoire pondérée

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;
}