Welcome to a comprehensive guide on setting up A/B tests using Google Tag Manager (GTM) and Google Analytics 4 (GA4). In this tutorial, we’ll walk through a custom HTML tag script designed to facilitate A/B testing on your website. This script provides a straightforward approach to implementing A/B tests without diving into complex coding.
Let’s break down the script into its key components to understand how it works:
Understanding the Script
Cookie Management
function readCookie(testName){
console.log('-----------\n\nreading cookies');
var cookies = decodeURIComponent(document.cookie);
var splitCookie = cookies.split(';');
var testCookie = '';
for(var i =0;i<splitCookie.length;i++){
if(splitCookie[i].includes(testName)){
testCookie = splitCookie[i].replace(testName+'=','').trim();
break;
}
}
return testCookie;
}The script begins by addressing cookie management. Cookies are utilised to track users’ previous variant choices, ensuring consistency across sessions.
The above readCookie function accepts the test name as a string, and checks whether a cookie exists for that test. If it exists, it returns the contents of the cookie.
function createCookie(testName,testVariant){
console.log('-----------\n\ncreating cookies');
var d = new Date();
d.setTime(d.getTime()+1000*60*60*24*730);
var expires = "expires="+d.toGMTString();
document.cookie = testName+"="+testVariant+"; "+expires+"; path=/";
console.log('cookie created!\n\n.....\n\n cookie name is: '+testName);
}The createCookie function accepts the test name, and test variant as inputs. The function creates a cookie with the name of the test, and stores the test variant assigned to the user.
By default, this cookie is set to expire after 2 years. This may be excessive, especially if your test only runs for 2 weeks, so feel free to update it to a more appropriate expiry. To do so, change the 730 in the calculation to relevant number of days. So if you want to update it to just 14 days, the calculation should be as follows:
var d = new Date();
d.setTime(d.getTime()+1000*60*60*24*14);Variant Assignment
function setVariant(testRatio){
console.log('-----------\n\nsetting variant');
var testDecider = Math.random();
console.log('-----------\n\ndecider = '+testDecider);
var testVariant = '';
if(testDecider >=testRatio){
testVariant = 'A';
}
else{
testVariant = 'B';
}
return testVariant;
}The setVariant function randomly assigns users to different variants based on a specified ratio. This gives us flexibility in assigning the test variant to a specified amount that we desire.
The logic of the function works by generating a random number from 0 to 1. The assumption is that any number between 0 and 1 has equal chance of being returned. If the random number generated is lower than the threshold, then we assign variant B, if it is lower, we assign variant A.
This function only caters for 2 variants at a time. If you want to have 3 or more variants, the code needs to be re-written to allow for different buckets.
Page Modifications
function makePageChanges(){
document.querySelector('h1').innerHTML = 'This is a test';
}The makePageChanges function is where the actual modifications to the webpage occur. This is the core of the A/B testing process, allowing changes to be implemented based on the assigned variant.
You may need to work with a developer to change the desired element on the page. Keep in mind that the changes done here should be minor cosmetic changes. Whilst you can technically make larger functional changes, since the tag loads after GTM loads, users will likely see the original version before the new version suddenly appears. This was one of the reasons Google Optimize used to have the anti-flicker snippet.
Triggering Changes
function triggerPageChanges(testVariant,makeChangesOnB){
console.log('-----------\n\nmaking page changes');
var testTrigger = 'B';
if(makeChangesOnB=false){testTrigger='A'};
if(testVariant==testTrigger){
makePageChanges();
}
}The triggerPageChanges function determines when the page modifications should be triggered based on the assigned variant.
The function works by accepting the test variant assigned (testVariant), and a boolean input for makeChangesOnB. This is passed in to confirm whether the changes should be done on the A variant, or the B variant. If true, it will make the changes on the B variant.
The function checks if makeChangesOnB is equal to false, in which case, the testTrigger variable is set to ‘A’. The function then checks if the testTrigger is equal to the testVariant assigned to this user. If they are equal, then it triggers the makePageChanges() function that we just saw above.
Test Setup
function setUpTest(){
console.log('-----------\n\nsetting variables');
// Adjust these variables as required.
var testName = '_my_first_test';
var testVariant = '';
var testRatio = 0.5;
var makeChangesOnB = true;
// Do not change the code below.
testVariant = readCookie(testName);
if(!testVariant){
console.log('cookie doesn\'t exist');
testVariant = setVariant(testRatio);
createCookie(testName,testVariant);
}
triggerPageChanges(testVariant,makeChangesOnB);
dataLayer.push({'event':'page_test','test_data':{
'test_name':testName,
'page_variant_name':testVariant
}});
}
//This line is what triggers the whole test.
setUpTest();Finally, the setUpTest function coordinates the entire A/B testing process, from reading cookies to triggering page changes. It acts as the central controller for the test.
The general order of the function commands are as follows:
- Set the variables for this test, including the test name, the ratio of traffic to be assigned the test, and which variant should trigger the test.
- The cookie for the test is read.
- If the cookie does not already exist, a new cookie is created on the user’s browser.
- The triggerPageChanges function is then called to determine whether the changes on the page should be made or not.
- An event is pushed to the dataLayer so that it can be used for analytical tools such as GA4.
- After the function is closed, the setUpTest function is triggered in the last line.
Implementation
To implement this script, simply insert it into a custom HTML tag within Google Tag Manager. Customise the variables as per your requirements, including the test name, variant ratio, and page modifications.
You can then set up a tag for GA4, or any other analytical tool that you have set up on your site and to gather the testing information. This event can then be used to create a segment based on sessions to determine which test variant drove the desired results.
Conclusion
A/B testing is a powerful technique for optimising website performance and user experience. With this script and Google Tag Manager, you can conduct A/B tests efficiently and derive valuable insights to enhance your website’s effectiveness.
Remember to use proper statistical rigor when analysing results.
Happy testing!
Leave a Reply