Google Tag Manager (GTM) is a powerful tag management solution. It enables you to deploy and manage your Google Analytics as well as other web analytics tracking tags. It’s also useful for deploying your own custom JavaScript code snippets to pages of your choice. This means it’s possible to make dynamic changes to the way your home page, or other target pages, look and feel – so you can try to optimise conversions or other engagement opportunities.

If you haven’t got access to Maxymiser or Optimizely, then using Google Tag Manager (GTM) could be a way to implement A/B or simple MVT tests aimed at page optimisation.

I’ll describe in this blog the process for implementing a simple A/B test scenario using Google Tag Manager. Let’s take the ‘Contact Us’ registration form page as an example. Say we want to present a different form submit button to 50% of the visitors who hit this page, so that half of the views of this page get a red button with ‘Contact Us’ and half get the default page with a blue button with ‘Submit’ as the label.

Jamie Blog Contact Submit buttons

Creating the GTM custom tag

  1. Click Tags
  2. Click New
  3. Enter a name such as ’Test – Version B Contact Us Page’ for the tag
  4. Choose a tag type of ‘custom HTML tag’
  5. In the HTML box enter your custom JavaScript code:
    <script>
    var elem=document.getElementById(“submitButton”);
    elem.style.backgroundColor=”red”;
    elem.value=”Contact Us”;
    </script>
  6. Click Save.

Next we’ll create the variable that will allow us to sample 50% of our traffic. This is based on the Random Number variable type available in Google Tag Manager.

Create the Variable

  1. Click Variables
  2. Click New
  3. Enter a name such as ’randomNumber’
  4. Select variable type ‘Random Number’
  5. Click ‘Create Variable’

Now we create the trigger which will allow firing of the tag on our target page for 50% of the traffic.

Create the Trigger

  1. Click Triggers
  2. Click New
  3. Enter a name such as ‘Contact Us 50 per cent sample’.
  4. Select event type ‘Page View’
  5. Select trigger type ‘Page View’
  6. Enter the following ‘Fire on’ rules:  Fire On rules
  7. The second condition means that the custom tag will only fire when the random number generated by GTM ends with 1,2,3,4 or 5 which should equate to 50% of the traffic to the page.
  8. Click Create Trigger

The next step is to attach the trigger to the custom tag we created in step 1.

Attaching the trigger to the tag

  1. Click Tags
  2. Click the ’Test – Version B Contact Us Page’ tag you created earlier.
  3. In the ‘Fire On’ section choose More and select the ‘Contact Us 50 per cent sample’ trigger.
  4. Click ‘Save’.
  5. Click ‘Save Tag’.

That’s it. If you deploy the tags into Preview Mode in Google Tag Manager and browse to the page you’re looking to test (i.e. http://www.yourdomain.com/contact-us) and refresh a few times, you should see that the button changes its appearance when the custom tag fires.

Of course, you’ll want to measure when this optimised page is displayed to your visitors and its impact on conversion or engagement, so you may want to fire an analytics tag to indicate that version B has been displayed. Since we’re not using a testing tool such as Maxymiser you’ll need to implement your own reporting.

Happily, your web analytics tool can be used to facilitate measuring the results of your optimisation tests. If you’re using Google Analytics you could utilise the data layer and create a GA custom dimension. If you’re using IBM Digital Analytics, as we are, you could use an element tag or page attributes to measure the views of the specific page versions. I’ll cover this in another blog. Happy testing!