3 Ways to Track Google Website Optimizer A/B Tests in Analytics

3 Ways to Track Google Website Optimizer A/B Tests in Analytics

August 10th, 2010 → 7:00 am by Robert Kingston // No Comments

Tweet

Displaying experiment data in Google Analytics from Google Website Optimizer is extremely straightforward to do. You might have found my other post on integrating Google Website Optimizer MVT with Google Analytics and were curious as to how you could integrate it with Google Analytics.

The truth is though, this may not be what you anticipated.

Why you DON’T need to integrate GWO A/B tests with GA

The short answer, you can get by without using fancy code.

• A: In Google Analytics, setup an advanced segment for visits that viewed Version A of the page, a segment for visits who viewed Version B of the page and so on. Since they use different URLs, this is very easy to do and requires no code changes – How to create Advanced Segments
• B: If you want to use custom variables to track a visitor’s behaviour with an experiment over multiple visits, you’ll need to use custom variables (set the scope to Visitor level – ’1′), but not necessarily by calling something like “utmx(‘combination’)”. This is explored below.
• C: Perhaps the roughest way to implement it, in my opinion is by running the custom variable code BEFORE the A/B redirect occurs. Nonetheless it’s possible, but it will affect your bounce rate metric. This is explored last.

So before you go ahead “willy-nilly” and implement random code about the place, be sure you know what you need to do first, then pick a method and stick with it.

B: Using Custom Variables with an A/B Test in Google Website Optimizer

On Version A of the page, you just need to modify the Analytics code as follows. From this:

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1111111-1");
pageTracker._trackPageview();
} catch(err) {}</script>

To this:

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1111111-1");
pageTracker._setCustomVar(1, "Test-1", "Original", 2);
pageTracker._trackPageview();
} catch(err) {}</script>

On Version B of the page, you would change the Analytics snippet as follows:

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1111111-1");
pageTracker._setCustomVar(1, "Test-1", "Variation-1", 2);
pageTracker._trackPageview();
} catch(err) {}</script>

Simple as that. No fancy JavaScript, no mucking around.

C: A Rough Alternative – Warning

One alternative that you can use on this is (which impacts your bounce rate metric) can be done by setting a custom variable and making a call to __utm.gif BEFORE the Google Website Optimizer Code conducts the redirect. It takes the experiment variable straight out of Google Website Optimizer and plugs it right into Google Analytics. Since the code redirects you to another page before your normal GA code will execute, we need to place more GA code within the GWO code.

You’ll notice that there are two separate scripts in the snippet of code you get from GWO’s Control Script it looks like:

<!-- Google Website Optimizer Control Script -->
<script>function utmx_section(){}function utmx(){}
(function(){var k='1111111111',d=document,l=d.location,c=d.cookie;function f(n){
if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.indexOf(';',i);return c.substring(i+n.
length+1,j<0?c.length:j)}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
d.write('<sc'+'ript src="'+
'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'
+'/siteopt.js?v=1&utmxkey='+k+'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='
+new Date().valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"></sc'+'ript>')})();
</script><script>utmx("url",'A/B');</script>
<!-- End of Google Website Optimizer Control Script -->

Therefore, all you need to do is insert some Google Analytics code in between these two scripts, like so:

<!-- Google Website Optimizer Control Script -->
<script>function utmx_section(){}function utmx(){}
(function(){var k='1111111111',d=document,l=d.location,c=d.cookie;function f(n){
if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.indexOf(';',i);return c.substring(i+n.
length+1,j<0?c.length:j)}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
d.write('<sc'+'ript src="'+
'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'
+'/siteopt.js?v=1&utmxkey='+k+'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='
+new Date().valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"></sc'+'ript>')})();
</script>

<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." :
"http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1111111-1");
if(typeof(utmx) == 'function'){
pageTracker._setCustomVar(1, "Test-1", "Variation-" + utmx('combination'), 2);
}
pageTracker._trackEvent("Experiment","Live","",1);
} catch(err) {}</script>

<script>utmx("url",'A/B');</script>
<!-- End of Google Website Optimizer Control Script -->

How it all works

Note that I have changed lines, 21 through to 24 to track the custom variable and submit it with a call to _trackEvent, IN PLACE OF _trackPageview. Obviously, you can customise the custom variable code to suit your needs:

• ‘1‘ refers to the slot the variable sits in (GA currently allows you to use 5 slots – 1 through to 5)
• ‘”Test-1″‘ is the name of the variable – I suggest you use the name of your experiment here
• ‘”Variation-”utmx(‘combination’).toString()‘ dynamically inserts the GWO variation number into GA
• ‘3‘ refers to the scope of the variable. I recommend using ’2′ if you’re only running a single experiment on the site, or ’3′ if you are running more than one experiment on the site. ’1′ should only be used if you want to track subsequent visits by users to the website.

There you have it, three simple (well maybe they’re not all simple) and straight forward ways to integrate your tests with Google Analytics.