⚠️ To implement A/B testing, you'll need to touch some code. If JavaScript makes you crazy, share this page with your favorite developer!
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 cookiesVersion property can be used to load a version selected randomly from those available.
Prerequisite
Before you start, you must create as many configurations in your Axeptio project as the number of banner variations you want to test, and have the technical names of these different configurations handy.
Integrate the code with the logic
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.
If you use Google Tag Manager
It’s even simpler!
Create a Custom JavaScript Variable, and paste in one of the two scripts provided below.
In your Axeptio tag, change the Cookies Version field to call this variable.
Ready-to-use code snippets
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;
}