A/B Testing

⚠️ To implement A/B testing, you'll need to touch some code. If JavaScript makes you crazy, share this page with your favorite developer!

At Axeptio, we think that testing is a must. It's incredibly important to be able to compare options. Which message converts the best? Is the purple too flashy? Give it a whirl!

A/B testing is a deployment methodology that involves testing multiple variants of the same configuration on a target population and then measuring which one works better.

Even if Axeptio does not include a script for distributing variants, it is very easy to implement a script to randomly select an available version. For the A/B testing to work properly, you'll need to store the version displayed to the user in a cookie or in the browser's localStorage.

When you add the Axeptio SDK code to your site's page, you create an axeptioSettings variable that can hold the version of the cookie configuration being displayed. This cookieVersion property can be used to load a version selected randomly from those available.

Before integrating it on your own page, you'll need to create a different version in the admin interface. In the project's home interface, after clicking "Cookie Management", select "Create a cookie configuration" or copy the configuration you want to modify.

✅ Remember to give it a characteristic name in the Version ID field.

Once the changes have been confirmed, publish the project in order to put this new version online.

You'll then need to create a piece of JavaScript code on your site to determine which version to display. It doesn't matter whether this code is "hard-coded" on the page or loaded by means of a Tag Manager. It is imperative, however, that it runs before the Axeptio code. If your code returns a version that does not exist in the published configuration, the Axeptio script will return the first available configuration.

• Simple random implementation
• Weighted random implementation

Simple random implementation

In this situation, we have two versions: landing_fr_A and landing_fr_B. We'll randomly choose which one to display if neither of the two have already been displayed.

function getCookiesVersion(){
  // If one version has already been presented to the user,
  // it is returned.
  var version = window.localStorage.getItem('cookiesVersion');
  if (version) {
   return version;
  }
  // List of available versions 
  // in your published configuration
  var versions = ['landing_fr_A', 'landing_fr_B'];
  // It is selected at random
  version = versions[Math.floor(Math.random() * versions.length)];
    // It is saved to the browser
  window.localStorage.setItem('cookiesVersion', version);
  // And it is returned.
  return version;
}

Weighted random implementation

In this situation, we have three version: landing_fr_PROD, landing_fr_TEST1, and landing_fr_TEST2.

We mainly want to display the "_PROD" version to users and test two new versions to choose between the configuration options.

There are several methods and algorithms that can be used to achieve this objective. The following is a basic interpretation that you can adapt for your purposes:

function getCookiesVersion(){
// If one version has already been presented to the user,
// it is returned.
  var version = window.localStorage.getItem('cookiesVersion');
  if (version) {
    return version;
  }

  // List of weighted versions
  var versions = [{
    item: 'landing_fr_PROD',
    weight: 80
  }, {
    item: 'landing_fr_TEST1',
    weight: 10
  }, {
    item: 'landing_fr_TEST2',
    weight: 10
  }]
  var version = pickItem(versions);
  // It is saved to the browser
  window.localStorage.setItem('cookiesVersion', version);
// And it is returned.
  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;
}