How to A/B Test for Free with Google Tag Manager, and Any Marketing Analytics Tool.

The demise of Google Optimize is upon us. And wowee, aren’t you somewhat bit heartbroken. Gone are the times the place you’ll have the ability to swap a button in your web site from pink to inexperienced and run a senseless A/B check. Now you must pay $60,000 yearly for that. However wait! What if I advised you that you could proceed to run A/B testing FOR FREE, leveraging instruments which can be in all probability already in your web site. Would you pay me $60,000? How about $2? I’ll take it…

Now don’t get me unsuitable, you must completely spend money on an A/B testing platform. They’ve a butt-ton—(can I say butt-ton?…no? Okay how about boatload)—a boatload of options that transcend what I’m about to point out you. Additionally, A/B testing normally ought to have a devoted course of, with a well-thought-out testing matrix, strategists, builders, designers and analysts. If you happen to’re going to have all of that, you must in all probability have a devoted device,proper? If you happen to simply wish to be somewhat whimsical about it although, I’ll present you do testing with out something fancy. Just a bit grease in your Google Tag Supervisor wheels and any analytics platform. 

Primary Steps Under:

Let’s get began. First, this submit assumes that you’ve got a fundamental understanding of Google Tag Supervisor, triggers, variables, & tags. If you happen to don’t, then please go away and go to MeasureSchool’s YouTube to study all concerning the device. If you’re nonetheless studying then I’ll assume we’re good to go.

Create a New Cookie in GTM 

First lets construct a Cookie in GTM by importing the template “Cookie Creator” from the Neighborhood Gallery. Evaluation the permissions (which permit cookies to be written in the event you specify them within the template) of this Tag Template and choose “Add to Workspace.”

You too can simply construct a cookie utilizing customized HTML, however why work tougher than you must? After getting imported it into your templates and accepted permissions, you can begin constructing a number of cookies with ease. 

Earlier than we begin constructing our experiment, we have to enable this cookie creator to construct the cookie we inform it to. To do that, open the Cookie Creator template and navigate to “Permissions”. 

Subsequent add an allowed cookie for _gtm_exp or no matter identifier you’d wish to construct to your GTM experimentation. 

Create a GTM Experiment Tag

Within the Tags tab, create a brand new tag utilizing the Cookie Creator tag template you’ve simply saved. 

• Set Cookie Title to “_gtm_exp”
• Set Cookie Worth to “abc”
  • We’ll be updating this worth later to dynamically populate primarily based on random allocation. Since we will’t save the tag with a clean worth, let’s add “abc” to the cookie worth for now. 
• Set Expiration Mode to “By month”
• Set Expiration by Months to “6m”
  • “Even when your experiment length is shorter than 6 months, having an extended expiration date ensures that customers will proceed to see the identical experiment on return visits till this cookie is eliminated”

Chances are you’ll wish to set further cookie options- like SameSite when you have subdomains, and many others. -but we’re going to go away it clean for now. Be happy to make use of this FireFox page as a useful resource for all of the completely different configurations you are able to do with cookies. 

It can save you the tag with out a set off for now. We’ll come again to it! 

Construct a Variable to Seize the first Social gathering Cookie

Let’s now go into our variables part and construct a 1st Social gathering Cookie to seize the brand new cookie worth that we created:

1. Navigate to the Variables tab
2. Click on to create a brand new Consumer-Outlined Variable
3. Choose “1st Social gathering Cookie” because the Variable Sort
4. Replace the Cookie Title to “_gtm_exp” 
5. Give your variable a reputation and save

Superior. That was straightforward. We’ll come again to utilizing this later. 

Construct a Variable to Generate a Random Quantity Between 0-99

Now, we wish to create the performance to generate a quantity from 0-99. It will develop into the premise of our check performance. 

1. Click on to create one other Consumer-Outlined Variable
2. Choose “Customized JavaScript” because the Variable Sort
3. Add a perform to generate a random quantity. Right here is a few code so that you don’t have to go searching on the internet for it. You might be welcome. 

perform() {
    var math = Math.flooring(Math.random() * 100);
    return math
}

4. Marvel in surprise on the extremely superior, advanced little bit of JavaScript you’ve simply written
5. Title your variable “Random Quantity (0-99)”

Create a RegEx desk Variable for the Cookie 

We now wish to use our random quantity to set a cookie worth primarily based on whether or not a consumer is assigned to the management group or the check group. You would additionally create a number of variations by adjusting this logic with the quantity of numbers that characterize a model. On this model we’re on the lookout for 0-49 & 50-99 to set completely different variations, however you would simply alter to 0-33, 34-66, 67-99 for an A/B/C check (and many others.) 

1. Create a brand new RegEx Desk variable
2. Set the Enter Variable to the random quantity variable you’ve simply created
3. Use this RegEx to focus on the split-test numbers: 

• Management Group: 0 – 49
  • RegEx Sample: ([0-9]|[1-4][0-9]) 
• Take a look at Group:  50-99
  • RegEx Sample: ([5-9][0-9])

4. The Output values will likely be primarily based on the kind of check you’re operating. For this instance, we’ll be doing a easy CTA button textual content change. 

Replace Cookie Tag with RegEx Desk Variable 

Now that we now have our RegEx desk, we will use it to construct the performance of our cut up check. We’ll be utilizing the 0-49 randomized quantity to set the management & 50-99 to set the variant. 

To do that we wish to return into our cookie creator tag and set the Cookie Worth to our RegEx desk.

For the set off we would like it to fireplace on all pageview occasions the place the cookie doesn’t but have a worth that features our check. 

Now that we now have the cookie in place, we will construct our precise check. 

Create a Customized HTML Tag with Your Modifications

Now might be probably the most difficult half. You will must know a little bit of JavaScript however in the event you don’t, ChatGPT is a good useful resource. Simply ask it that can assist you goal and alter the factor you wish to change. Sadly, GTM is just not geared up with a visible editor like Google Optimize that can assist you change. If you want you should use a chrome extension akin to “visual css editor” which has a whole lot of the identical performance as a CRO visible editor and even helps you export code. General, you’ll in all probability hit a snag sooner or later and wish some assist from both AI or a JavaScript developer. Regardless, I used ChatGPT for this variation and if it’s ok for me, it’s ok for you! 

For this instance, we’ll be updating the textual content of the hero tagline by utilizing a Customized HTML tag. 

Step 1: Create a brand new Customized HTML tag. It will include any obligatory scripts to switch web site content material to your Take a look at Group.

Step 2: Within the HTML part, add your script. This instance will likely be utilizing the script beneath to replace the textual content of the hero tagline:

<script>
    var tagline = doc.querySelector('.hero-tagline');
    if (tagline) {
        tagline.innerHTML = 'Construct Sustainable Development <i class="far fa-arrow-right" aria-hidden="true"></i>';
    }
</script>

3. Give your new tag a reputation. On this case, we’ll title it “Replace Hero CTA for Take a look at Group”

Now that we now have our code, let’s set off it on 50% of the site visitors. 

Set off Your Take a look at on the Variation Set off. 

Now that the cookie is positioned, we simply must search for the worth we would like the check to set off on and add our set off situation to our Customized HTML tag. 

You’ll probably wish to check at this level. Testing is fairly easy. Simply go to your preview mode, and open the web page you wish to check on. You’ll get your randomly generated worth and it’ll set a cookie because it’s your first time there. You possibly can then navigate to the Chrome debugger and edit the cookie worth between your management and variant by discovering the cookie worth in Purposes and on the lookout for our _gtm_exp cookie.   

Nice, now that we now have the check setup portion achieved, let’s get that child into our analytics system. 

Construct Out the Analytics Portion 

This subsequent half will be utilized to ANY analytics device. I will likely be focusing this weblog on GA4 and Microsoft Readability however the identical course of will be utilized to Piwik Professional & HotJar, Matomo & ContentSquare. No matter you need. We’re going to use it to each a advertising and marketing analytics device and a heatmap software program only for enjoyable however it may be used with only one device if that’s your desire. 

Add to your Analytics Tag 

First, identical to with CRO instruments, we’d like to verify our cookies load earlier than data will get despatched to our analytics instruments. So in case you are firing your advertising and marketing analytics device on Pageview as nicely, we’re going to wish so as to add an analytics occasion that fires when the cookie is ready.

Let’s create the occasion. This occasion fires the precise occasion but in addition units the cta_button_audience to the management or the variant in our GA4 and ties it to the consumer. This would be the foundation of our viewers parameters.

Now let’s make it a cleanup tag for our cookie placement.  

Superior. One final thing. We additionally wish to add to our fundamental configuration tag. This ensures that as folks come again to the web site and the variant is there, it additionally communicates the worth to the user-level customized dimension. It ought to stay with that consumer however it is a secondary stage of safety from GA clear cache and many others. It turns into somewhat safer than simply counting on the occasion itself because the occasion solely fires the preliminary time that the consumer will get bucketed. The cookie will stay as a worth so long as it’s saved within the particular person’s browser. After the preliminary placement, the cookie needs to be there on web page load so you possibly can seize it along with your fundamental configuration on pageview.

Notice: You too can simply transfer GA4 config to Dom Prepared as a substitute of doing the above (with the identical configuration tag modifications) however some individuals are violently in opposition to altering the place GA masses, in order that’s why we did the above method. 

One other Notice: you possibly can really set the variable to an occasion stage parameter as a substitute of a user-based one since we will likely be constructing it as an viewers who noticed the actual occasion anyway, however I believe Consumer Properties are a bit cleaner. If you’re operating low on Consumer-level customized dimensions, occasion customized dimensions are effective. 

Construct Your Conversions

If you have already got a conversion that you simply wish to use with this setup you possibly can skip this part. In any other case, if you wish to arrange a secondary conversion or you don’t have any conversion you possibly can comply with together with the beneath to arrange one. 

Normally, our fundamental conversion could be a kind submit or buy, however we’re going to use cta  clicks for this instance.

Go into preview & debug mode and carry out the motion that you simply wish to observe. 

Ensure you have any related built-in variables (click on id, click on class) and triggers (all parts/hyperlink clinks) enabled in your GTM. 

Navigate to the clicking motion that you simply did and discover the related variable that you simply wish to observe. 

Construct your set off and occasion/conversion.

Nice! We’ve simply arrange the motion we wish to use in GA4 as one in every of our conversions. The great factor about constructing an viewers or phase with our variations is that you should use these together with different conversions or occasions which can be already in place (thanks pages, and many others.) 

Set Up the Conversion in Your Advertising Analytics Device

In GA4, there are just a few steps we have to take to get this to work. First, we have to arrange our conversions. Some could already be arrange, however the one we simply constructed above we have to set as a conversion. You possibly can both anticipate the occasion to point out up in GA4 after which examine the little blue toggle subsequent to the occasion, or we will navigate to conversions and enter the title of the occasion manually. Let’s try this one. 

Set Up Your Customized Dimension in your Advertising Analytics Device

Now that we now have our conversion, let’s navigate to customized dimensions. Let’s create each a Consumer  primarily based customized dimension for our cta_button_audience which is dealing with our cookie worth. 

Notice: If you happen to don’t have click_text arrange as a worth in GA4 already, you’ll wish to try this now for the cta_button_click occasion that we constructed. Each customized dimension must be outlined in GA4 for the info to point out up within the interface. 

Lastly, Let’s Construct our Audiences!

You’ll need a distinctive viewers per variant (together with management). 

You’ll wish to affirm that the quantity of customers in each the variant and the management are comparatively equal. This will likely be an extra-level of consolation that our triggers and tags are working. 

Now all we now have to do is do an viewers comparability with our conversions and we’re swimming in A/B check sauce.

You possibly can construct an viewers report by making a customized report within the library and utilizing the viewers as a dimension. 

Alternatively, you would use our user-level customized dimension

I discover it’s a bit cleaner to make use of an viewers as a result of you possibly can archive audiences when you’re achieved with the check and you’ll select to make use of the gtm_exp cookie to construct different exams sooner or later and audiences assist present a common cleanliness across the reporting.  

To run statistical significance monitoring you should use any A/B check calculator however my most well-liked is CXL’s AB Test Calculator. Simply dump your knowledge in and it’ll calculate the raise for you!

Nice job! You made it and may cease right here. Or we will deliver each variations into Microsoft Readability.  You wish to proceed??? I APPLAUD your tenacity. 

Combine with Heatmap 

For this a part of the lesson, we are going to assume you’ve Microsoft Readability up and operating. I like Microsoft Readability loads. It’s free and has a TON of options which can be actually useful. For this explicit job, we’re going to be utilizing the customized tag filter function. 

Navigate again into Google Tag Supervisor and discover the Microsoft Readability group template by Luratic. You probably have Microsoft Readability hard-coded, I recommend you migrate it to the template to be able to use their built-in customized tag function, which we’ll be using for this experiment. You too can do that with code as a substitute of the template in case you are a masochist. 

Add in a key: cta_button_audience with the worth of our GTM_Exp. Now you’ll have the ability to filter all pages by your cookie variation!

You possibly can go one step additional by additionally constructing customized occasions to your CTA clicks & conversions, which is able to make discovering particular recordings a lot simpler.

Now we now have our new Customized Tags. Navigate again to Microsoft Readability and discover the customized filters.

Now we will filter by each our key motion that we wish to see and in addition the completely different variations. This provides us final readability (pun supposed) into how the completely different pages are performing with our variations! Give it just a few days and also you’ll get your modifications in two completely different heatmaps! 

BONUS: in the event you combine GA4 with Microsoft Readability you may also pull in your GA4 segments (audiences), making this a breeze to investigate! I nonetheless like having the filters however it may assist streamline the method. 

PHEW! We’ve Reached the Finish

You probably did it! You made it! You created a completely functioning A/B check machine in GTM with FREEEEE instruments. However yeah that was a whole lot of work. Chances are you’ll wish to pay for one thing to keep away from the lengthy and drawn out (however cool) course of above. However in the event you don’t and you find yourself utilizing this resolution…perhaps you possibly can pay me as a substitute 🙂