Blag on the Interwebs

What do you do when you want to decide which variation a particular user sees? That’s a question that just doesn’t come up in most GWO tests, but suppose, for instance, you want to run two tests on your site and wish the users who saw a particular graphical theme in experiment 1 to see the same graphical theme in experiment 2.

It can be done!

Overview

1. Cancel Google’s Control
2. Alter GWO cookie
3. Load appropriate content

After these three steps, it’s business as usual: tracking scripts fire on your original, variation, and goal pages.

The following instructions are restricted to A-B tests; however, the concepts can be extended to MVT (multivariate) tests.

Step 1: Cancel Google’s Control

Comment out or delete the last part of GWO’s Control Script snippet:

<script type="text/javascript">utmx("url",'A/B');</script>

Step 2: Alter GWO cookie

Google Website Optimizer actually sets a few cookies, but the only one with which you need to concern yourself is __utmx.

You must parse this cookie because it contains data for your domain and for every GWO experiment that the user has encountered. Learn about the format and meaning of the __utmx cookie on page 6 of this white paper on Google Website Optimizer, and I shall forgo a redundant explanation.

The important thing to take away is that you need to find the colon-delimited triplet that refers to your Experiment 1, and read its variation code (final value). Then you need to set the variation code for the colon-delimited triplet that refers to your Experiment 2.

I wrote a snippet for parsing and setting the __utmx cookie. You can view it at pastie.org/3849930 or download it here. To make use of the downloadable snippet, insert the following after the GWO Control Script and before the GWO Tracking Script.

(function(){
	// get variation code from experiment 1
	var variation = MyGWOCookie.getVariation('[id for experiment 1]');
	// set variation code for experiment 2
	MyGWOCookie.set('[id for experiment 2]', variation);
})();

This will set the variation code for Experiment 2 to the same value as the variation code for Experiment 1. (If you need to employ a different variation code for 2, this is the place to write in your own logic.)

*** NB: My snippet makes use of jQuery and the jQuery Cookie plugin. If you use my code, be sure to have those js files on hand and require them in <script> tags higher in your document.

*** NB 2: If you use jQuery Cookie but write your own code instead of using my downloadable snippet, be sure to only use jQuery Cookie for parsing, not writing the cookie. It will escape your colons, making the cookie unreadable to Google Website Optimizer.

Step 3: Load appropriate content

You have two options for handling this: 1) use javascript or 2) use server-side logic.

Using javascript

Using javascript is what Google Website Optimizer does, and it’s the simpler alternative. On your original page (the one with the Control Script), use javascript set window.location to whichever variation page matches the code in your __utmx cookie (refer back to step 2, if you’re lost).

The following snippet accomplishes this (and references my parsing-and-setting snippet from the previous step).

(function(){
	// get variation code from experiment 1
	var variation = MyGWOCookie.getVariation('[id for experiment 1]');
	// set variation code for experiment 2
	MyGWOCookie.set('[id for experiment 2]', variation);
	// handle redirect
	switch(variation)
	{
		case '1':
			window.location = "/variation-1.html";
		case '2':
			window.location = "/variation-2.html";
		...
		case n:
			window.location = "/variation-n.html";
	}
})();

*** NB:  This action must be carried out after you alter the __utmx and before the Tracking Script.

Using server-side logic

It may be more convenient for you to use your server-side script to figure out what content to load, for instance, if there are a lot of pages between your test page and your conversion page and if those intervening pages need to preserve the graphical theme from Experiment 1.

If you are using server-side logic, then you can figure out most of what to do on your own, but there’s an additional step: include the Control Script (not just Tracking Script) on every variation page (not just the original). (You also must include the call to MyGWOCookie.set() in each case.)

Your code

Now your html should include something like this:

<script src="jquery.js"></script>
<script src="jquery.cookie.js"></script>
<script src="gwo-supplement.js"></script> <!-- contains MyGWOCookie -->

<!-- Google Website Optimizer Control Script -->
<script>
	function utmx_section(){}function utmx(){}
	(function(){var k='XXXXXXXXXX',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 escape(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 -->
<script>
	(function(){
		// get variation code from experiment 1
		var variation = MyGWOCookie.getVariation('<id for experiment 1>');
		// set variation code for experiment 2
		MyGWOCookie.set('<id for experiment 2>', variation);
		// handle redirect
		switch(variation)
		{
			case 1:
				window.location = "/variation-1.html";
			case 2:
				window.location = "/variation-2.html";
			...
			case n:
				window.location = "/variation-n.html";
		}
	})();
</script>
<!-- Google Website Optimizer Tracking Script -->
<script type="text/javascript">
	var _gaq = _gaq || [];
	_gaq.push(['gwo._setAccount', 'UA-1543091-6']);
	_gaq.push(['gwo._trackPageview', '/XXXXXXXXXX/test']);
	(function() {
	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	})();
</script>
<!-- End of Google Website Optimizer Tracking Script -->
	

The end

You’re done. If you have questions, please ask in the comments below. (I use Akismet spam filter, and I don’t actually comb through the spam folder before deleting, so try to look genuine.)

Further help

(You don’t need to read further, but some users might find this helpful.)

Background: The Control Script & Tracking Script

Google Website Optimizer has you place three different javascript snippets in your HTML code.  (You might think I mean one for the original page to be tested, one for the variation page(s), and one for the conversion page; but I actually mean one Control Script and two different Tracking Scripts—the tracking script on the conversion/goal page differs from the one on the original page and variation page).

The Control Script is in charge of setting the experiment cookies (if values for the present experiment do not already exist) and then redirecting the user (if he/she is not on the page that matches his/her cookie).

The Tracking Script is in charge of logging a user’s presence in the experiment page view. The Tracking Script on the goal page (presumably) requires the cookie set by the Control Script in order to indicate which variation produced a conversion (completed goal).

Putting it into practice: a real-world example

My website sells life insurance. I want to test (1) how to get users from the home page to the start of the quote process and (2) how to get users through the entire quote process. Our web designer wants data for each of questions, but he wants users to see the same graphical theme through the entire process. (I’m dumbing it down quite a lot.)