A/B Tests using Google Analytics, Content Experiments and JavaScript

When creating templates on high-end websites, it's useful to know how well the template was performing before and how that performance changed after updating. This can be achieved using Google Analytics (bounce rate, session duration and goals).

But what happens when the performance drops drastically and you want to go back to the original? How can you do this without risking losing sales or traffic? A/B tests allow you to test multiple variations of the template and measure which performs better.

Here we will look how to do it using free Google tools.

First off you will need a Google Analytics account. Go to https://www.google.com/analytics/ and create an account. Then create a GA id and embed code ready for later.

Next within Google Analytics go into Content Experiments and create a new experiment, you will need to enter the urls for each variation. Just use your base url and add url parameters for the other variations e.g:



After creating the experiment you will get a Content Experiment ID, we can embed this into the top of our page. Important: we want to load the Content Experiment code first before anything else for speed of switching the layout!

<script src="//www.google-analytics.com/cx/api.js?experiment=XXXXXXX"></script>

Next we want to setup the url params to override variations. This is to allow us to bypass the experiment and view a variation (for development and testing purposes). Add the following code directly after the api.js script tag:

    var param = window.location.search.split('var='),
        id = param[1] ? param[1] : cxApi.chooseVariation(),
        html = document.getElementsByTagName('html')[0];
    html.className = 'var' + id;

This code first splits the url params, and if there is a variation number, it applies a className to the root <html> element like this:

<html class="var0">

If the url param does not exist, it will run the Content Experiment method cxApi.chooseVariation() which will choose a random variation based on it's own experiment logic. By appending the variation class to the html element, we can run this script in the head of the document = fastest time. This prevents a flash of switching template layouts.

Finally then embed your Google Analytics code below the others:

<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-XXXXXXXX-1', 'auto');
    ga('send', 'pageview');
</script>

This will send a PageView tracking the variation number automatically. You can check this by looking at the Network request for the collect xvar param:



Note that this xvar param will not be sent if you bypass the Content Experiment method cxApi.chooseVariation(). Which is any time when using the ?var=1 params for development!

Here is a JSFiddle showing the code running:


Hope this helps you get set up and running with A/B tests using Google Tools!

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)