100% Free Google Optimize Alternative

Google Optimize is sunsetting. The exact date depends on when you are reading this article, but the process started in September 2023.

It’s sad that a free and accessible tool like Google Optimize didn’t continue development. Experimentation should be accessible to everyone, and there should be a free tool for running experiments.

Why? Experimentation is not typically something we learn in school. Instead, we learn it by working at other companies or teaching ourselves. However, there should be a way for individuals to conduct experiments for free. Of course, having a website with traffic is necessary.

A/B testing with Google Tag Manager and Google Analytics 4

Indeed, you may have wondered whether it’s possible to conduct experiments with GTM. Well, the answer is yes! And the good news is that it integrates seamlessly with Google Analytics (GA4).

However, before we get started, there are a few things you’ll need to have already in place.

  • You must have Google Tag Manager connected to your website.
  • You must have publishing rights within the Google Tag Manager container.
  • You must have GA4 connected to the website.
  • You must have admin access to the GA4 account that is linked.
  • You should possess basic knowledge of HTML, CSS, and JavaScript (JS).

Structure

Allow me to briefly explain how it works, so you have a clear understanding of what you’ll be working on. It’s worth noting that this process is asynchronous, which means that it occurs during the website loading phase rather than after it has loaded.

When a visitor lands on your website, Google Tag Manager will trigger the initialisation event, which is the first thing we’ll set up. This event will trigger the initialisation trigger.

When the initialis

ation trigger is fired, the splitter tag will run. The splitter tag will execute JavaScript code that splits our traffic and saves the version of the experiment in the visitor’s localStorage.

The GA4 configuration tag will be triggered by the page view trigger, which will send our data to GA4 with a version variable.

The container-loaded event can also trigger two tags, depending on the stored version.

If the version includes slots 5, 6, 7, 8, or 9, the variant trigger will be fired, which will execute the variant tag that contains the experiment code.

If the version includes slots 0, 1, 2, 3, or 4, the control trigger will be fired, which will execute the control tag.

Each slot represents 10% of the traffic, and the number of slots is used to randomly split the traffic and facilitate Multi-Variant Testing.

Setup Google Analytics 4 for Experimentation

Let’s start with creating a custom definition in Google Analytics 4. This will be your connection between GTM and GA4.

  1. Open Google Analytics 4
  2. Go to Account > Property
  3. Click Custom definitions in the property list
  4. Click the button ‘Create custom dimensions’

    Dimension name: Version
    Scope: User
    Description: Used for analysing experiments from GTM
    User property: Version
  5. Hit save

That’s it for now in GA4!

Custom Definition GA4 + Google Tag Manager

The downside of GA4 is that it takes time before the data appears. It can take up to 48 hours before data is showing in GA4, after creating the custom definition.

Setup GTM for A/B testing

A valuable lesson I acquired through coding is to avoid working directly on the master branch (or the default Workspace in our situation). To start, it is essential to launch GTM (Google Tag Manager). Locate the Default Workspace option in the left sidebar and click on it. Afterwards, locate the “+” icon positioned in the upper right corner and give it a click.

Workspace Google Tag Manager experimentation

Name: Experimentation setup
Description: Setting up everything to start with experimentation. This is based on the article of Sander Volbeda.

Save.

This will make sure nobody is working on the same version as we are. It’s just a security measure.

Let’s get going!

Variable (Version)

The first thing we’ll do is to create a new variable. This piece of JavaScript will create the version row in the browser localStorage of the visitor.

Action:

  1. Navigate to variables in the sidebar
  2. Add new User-Defined Variable
  3. Name it: Version
  4. Choose as Variable Configuration the Variable Type Custom JavaScript
  5. Copy and paste the code from down below into the variable
function() {
  var keyValue = localStorage.getItem('version');
  return keyValue;
}

It’s important to be aware that browsers do not reset the localStorage automatically, unlike Cookies. Visitors have the option to manually reset it by clearing their browser’s cache and other stored data, but the likelihood of them doing so is relatively low.

Consequently, running experiments in this manner can surpass the duration of cookies that are automatically reset, thereby enhancing the accuracy of your data.

GTM creating Version variable

Triggers

Next, we will proceed with configuring all the triggers. To execute a single experiment, you will require three triggers.

  1. Initialisation trigger
  2. Control – Page View
  3. Variant – Page View

Initialisation trigger

This trigger is used to see if there is a experiment running on the page that the user visits.

  1. Go to the triggers in GTM
  2. Click the ‘New’ button to add a trigger
  3. Name it: Experiment 1 – Initialisation
  4. Select Trigger Configuration
  5. Choose Page View > Initialisation
  6. Select: This trigger fires on ‘Some Initialisation Events’
  7. First field: Page path (if it’s not in the list choose ‘Choose Buildt-In Variable’ and select Page path)
  8. Second field: equals
  9. Third field: /
  10. Save
Initialisation for experiment GTM trigger

This is also the place where we can add more requirements, for example device targeting.

Control – Page View

Now, let’s delve into the experiment trigger (for the control).

  1. Click the ‘New’ button to add a trigger
  2. Name it: Experiment 1 – Control – Page View
  3. Select Trigger Configuration
  4. Choose Page View > Page View
  5. Select: This trigger fires on ‘Some Page Views’
  6. First row:

    First field: Version
    Second field: matches RegEx
    Third field: Slot 0$|Slot 1$|Slot 2$|Slot 3$|Slot 4$
  7. Add a second row:

    First field: Page path
    Second field: equals
    Third field: /
  8. Save

That’s it for the control variant.

GTM AB test control trigger

Variant – Page View

Now, let’s delve into the experiment trigger (for the variant).

  1. Click the ‘New’ button to add a trigger
  2. Name it: Experiment 1 – Variant – Page View
  3. Select Trigger Configuration
  4. Choose Page View > Page View
  5. Select: This trigger fires on ‘Some Page Views’
  6. First row:

    First field: Version
    Second field: matches RegEx
    Third field: Slot 5$|Slot 6$|Slot 7$|Slot 8$|Slot 9$
  7. Add a second row:

    First field: Page path
    Second field: equals
    Third field: /
  8. Save

That’s it for the variant. All the triggers are done now. Let’s move on to the tags.

GTM AB test variant trigger

All the triggers are done now. Let’s move on to the tags.

Tags

It’s time to add three new tags and make adjustments to the GA4 configuration to ensure that the data is sent to the custom definition we previously created in GA4.

Splitter tag

After the Initialisation trigger has been activated, we will employ a tag that randomly divides the traffic into either the control or variant. This split tag will be triggered accordingly.

  1. Move to tags in the navigation of GTM
  2. Click ‘New’ button
  3. Name: Experiment 1 – Splitter
  4. Tag Configuration select Custom HTML
  5. Add the script from down below into the Custom HTML block in GTM
  6. Select Trigger: Experiment 1 – Initialisation
  7. Save
<script>
  (function () {
  var slots = 10;
  var version;
  if (localStorage.getItem('version')) {
    version = localStorage.getItem('version');
  } else {
    var random = Math.floor(Math.random() * slots);
    version = 'Slot ' + (random);
    localStorage.setItem('version', version);
  }
  return version;
  })();
</script>

That’s it for the splitter tag.

GTM traffic splitter

Control tag

Once the splitter tag has successfully executed and the user falls within one of the slots ranging from 0 to 4, the control tag will be triggered.

  1. Click ‘New’ button
  2. Name: Experiment 1 – Control – Script
  3. Tag Configuration select Custom HTML
  4. Add the script from down below into the Custom HTML block in GTM
  5. Select Trigger: Experiment 1 – Control – Page View
  6. Save
<script>
  (function () {
    // experiment code here
    console.log("Control loaded");
  })();
</script>
GTM load script control

Variant tag

Once the splitter tag has successfully executed and the user falls within one of the slots ranging from 5 to 9, the variant tag will be triggered.

  1. Click ‘New’ button
  2. Name: Experiment 1 – Variant – Script
  3. Tag Configuration select Custom HTML
  4. Add the script from down below into the Custom HTML block in GTM
  5. Select Trigger: Experiment 1 – Variant – Page View
  6. Save
<script>
  (function () {
    // experiment code here
    console.log("Variant loaded");
  })();
</script>
GTM load script variant

Google Analytics (4) configuration tag

Lastly, we need to make edits to the Google Analytics tag.

  1. Open the GA4 configuration tag
  2. Open User Properties
  3. Add new row

    Property name: Version
    Value: {{Version}}
  4. Save
GA4 settings for experimentation

Everything in GTM has been set up! Basically we could now start to run an A/A experiment to see if the data collection works. But, before we do so we need to check if all data works correctly.

Debug GTM for experimentation

The first step is simple. Preview your new changes on the website.

image 14 - Sander Volbeda

Time to review if everything works as it is suppose to.

Check 1: Second step of the preview mode should fire the Experiment 1 – Splitter tag.

Check if the splitter works

Check 2: Move to the Variables tab (still in step 2) and check if a Slot has been set with the Version (bottom row).

Check if version has been set

Check 3: Navigate to step 3 in the left sidebar and verify whether Experiment 1 has been triggered. Depending on your version, the Control should be fired if your slot falls between 0 and 4, while the variant should be fired if the slot value ranges from 5 to 9.

Check if experiment 1 has fired.

Everything seems to work with me. Now let’s also check the console log to check if the Control Script has fired.

Check 4: Open the website (still preview mode of GTM), right-click and select Inspect. Now open the console tab and check if there’s anywhere ‘Control loaded’ or ‘Variant loaded’ in the content.

Check if script is loaded from experiment

Leave the GTM preview mode open before heading to the next step. We’ll still need it. I mean this tab:

Tab to keep open GTM

Debug GA4 for experimentation

The first thing you’ll have to do is to add Google Analytics Debugger to your browser. By doing this, you will be able to utilize the Debugger view in Google Analytics 4. This functionality applies to every website present in your Google Analytics account, making it incredibly useful in various scenarios.

  1. Activate the extension on the GTM preview page
  2. Go to your GA4 > Admin > Account > Property
  3. Check for DebugView (last item in the first list)
  4. Select your device from the dropdown (might be hard, but give it a try)
  5. Now check if the Version is shown in the debug list.
View Version is incoming GTM to GA

Remember, as mentioned earlier. It can take up to 48 before data is shown in GA4. However, the DebugView is live, so there might be little delay (couple of seconds).

You’ve checked everything for the debugging!

Publish experiment

Everything is set to go, still two things left to do.

  1. Open up Google Tag Manager
  2. Select ‘Folders’ in the left side menu
  3. Click ‘New Folder’
  4. Name it: Experimentation
  5. Select all Experimentation related items (do not include GA configuration)
  6. Select ‘Move’ and move the items to the Experimentation Folder
Structured folder GTM

This way everybody knows what these items are being used for. Time to publish these changes!

  1. Click the blue ‘Submit’ button top right corner
  2. Click ‘Publish’
  3. Close the slide-in
  4. Open up the Workspace you’re now in
  5. Click update (next to ‘This workspace is out of date.’)
  6. Click update
Update workspace GTM

It’s running! Always start with an A/A test, which means no changes to the website, to make sure you collect the data you need.

Optional enhancements

To make running experiment more interesting I have some additional information.

Device type

Something you would like to run experiments only for specific devices right. You won’t have to do anything if your experiment is focused on all devices. However, if you would like to run an experiment only for mobile users than we have to configure some additional settings.

  1. Open Google Tag Manager
  2. Move to Variables (left side column)
  3. Add ‘New’ variable
  4. Name it: Device Category
  5. For Variable Configuration choose ‘Custom JavaScript’
  6. Paste the code from down below into the text field
  7. Save
function(){
  var width = window.innerWidth,
    screenType;
    if (width <= 520){
      screenType = "mobile";
    } else if (width <= 992) {
      screenType = "tablet";
    } else {
      screenType = "desktop";
    }
  return screenType
}

Now let’s move on to the triggers. You have to do this for all triggers ‘Initialisation, Experiment 1 – Control, Experiment 1 – Variant’. I’ll showcase just one, the rest is the same. Repeat the following steps for all triggers related to the experiment.

  1. Open the Triggers (left side column)
  2. Go to the ‘Experiment 1 – Initialisation’
  3. Add an additional row to ‘Fire this trigger when an Event occurs and all of these conditions are true’

    Field 1: Device Category
    Field 2: contains
    Field 3: mobile
  4. Field 3 is lowercase! You can use either mobile, tablet, or desktop.
  5. Hit save, and also do this for the other triggers (Experiment 1 – Control and Experiment 1 – Variant).

Make sure to test it in preview mode within GTM before publishing.

Split test

Split testing can be done using Google Tag Manager. This comes in handy for paid ads for example. The setup works the same as explained in this article. However, this is the defined JavaScript code you can use.

<script>
(function() {
    'use strict';

    // Get the current URL parameters
    var queryParams = new URLSearchParams(window.location.search);

    // Create the new URL with the current parameters
    var newUrl = 'https://sandervolbeda.com/';

    // Append the parameters if they exist
    if (queryParams.toString()) {
        newUrl += '?' + queryParams.toString();
    }

    // Redirect to the new URL
    window.location.href = newUrl;
})();
</script>

The code above also includes the parameters if the exist. Copy and paste the code in the Experiment 1 – Variant – Script, to make it work. Don’t forget to change the link from my website to the URL it should redirect to!

Based on HTML class (WordPress example)

Conclusion

So far, I’ve been really enjoying this way of doing experiments. It does everything I needed and did with Google Optimize in the past. It’s even a bit more flexible if you ask me.

Pros:

  1. It’s easy to set up
  2. It integrates nicely with GA4
  3. It’s client-side
  4. It’s free
  5. It doesn’t use cookies
  6. It’s asynch!

Cons:

  1. You’ll need to understand GTM
  2. JavaScript is required to run your experiments
  3. Data accuracy may be affected due to GA4 (if you don’t use BigQuery)

Sources

This article couldn’t have been written without the help of others! Big shoutout to Mike and Jeroen.

Jeroen Wiersema – Free course on this matter

Logo Freelance CRO specialist Sander Volbeda

Working remotely from Groningen, the Netherlands. Get in touch and let’s schedule a meeting, no strings attached.

Get in touch
  • English
  • Nederlands
© 2024 Sander Volbeda, All rights reserved
CoC: 53236734 VAT: NL002247968B39