Taking Control (Back) in Google Website Optimizer

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.)

Blistered fingers from guitar playing

Since the band broke up last May, I hadn’t picked up a guitar for an earnest practice until last week…

Two days afterTwo days after

I found the photographed blister on my finger the next morning. The swelling disappeared, but it filled with blood, and it’s even darker today.

I raised a guitar-playing blister on my finger only one other time in my life: one preparation day on the mission, spent at an inactive member’s house, playing his guitar. (Yes, sounds rather apostate. Whatever.) That was a blister to remember: it was over a quarter of an inch high. It was on the same finger: left hand, ring finger. Ah, memories.

Not excited about Google’s “self-driving” auto

Today at work, Angela shared with us this story: Google’s self-driving car takes blind man to Taco Bell, and I just couldn’t be happy for anyone, not Google, not the blind man, and not even Taco Bell, who finally got a customer that could afford a car.

Perhaps my irritation with Google over their self-driving cars comes because it was two years ago that they announced their new development, and I remember sitting at PubCon, hearing Matt Cutts (the face of Search Quality at Google) acknowledge the feeling that Google had recently lost ground to spam and alienated white-hat website owners, “but we made self-driving cars!” he said.

That was no consolation. At the time, the only capability we’d seen the self-driving car to possess was basic obstacle avoidance. Essentially, it looked about as smart as a Roomba, but instead of cleaning the room, it burned fossil fuels and added to traffic on the road. Was this new development going to benefit any of us in the foreseeable future? It’s been two years, and they’re not even beta testing.

In the same month (Sept 2010), Google tried to convince us that it was our poor typing skills that were holding back our search experience, so they blessed us with Google Instant. (Google Instant never fires until I’ve finished typing my search query. No help there, Google.)

Fun (& dissapointment) with Email Fraud

Last week, a coworker tapped me on the shoulder and said, “I got this weird e-mail.”

It was from “accounts@[his bank].com.” It read, “Your account has been overdrawn by $1 billion. Come up with the money by five o’clock, or we’ll break your legs.”

I waited for Nick, my coworker, to share his thoughts and then told him, “I sent that e-mail.”

It’s easy to commit this fraud

I don’t have access to Nick’s bank’s mail server; anyone can send an e-mail like this because the sender of the e-mail (you, me, anyone) can set the ‘from’ header of the e-mail transmission to any value he pleases. (No, your e-mail website or client software won’t let you set this header manually, but a very little bit of computer coding is all you need.)

So suppose I compose an e-mail to Nick, and I include his bank’s info in the mail, complete with logos and official-sounding text. My fraudulent e-mail instructs him to login at the website and check his messages, then provides a link to the login page.

… Only the page that it opens isn’t the bona fide login page. It’s a page I’ve built that looks identical to the real login page. (It might even have a URL almost identical to your bank’s webpage’s URL.) As soon as you try to login on my imitation webpage, I get your bank login information. Then I go to your bank’s real website and steal your money.

The good news

The good news is that it’s easy for your mail server to warn you of this kind of fraud: when your mail server (i.e. the recipient mail server) gets the fraudulent e-mail, it can compare the ‘from’ address with the address of the mail server that actually sent the e-mail (i.e. the sender mail server). If the two don’t match, your mail server can attach a warning flag to let you know that this e-mail may be fraudulent.

E.g. some months ago, I sent an e-mail to my bishop (using Mozilla Thunderbird), and his mail server rejected it because I used an AOL account to identify myself (i.e. the ‘from’ header) but configured my mail client to use my ISP’s server (i.e. the sender mail server).

Disappointing news about Gmail

The bad news is that detecting this warning sign appears to be out of common practice. As implied before, my office’s e-mail server did not give my coworker any warning about the fraudulent e-mail I sent him.

Another surprise for me: Gmail also provided no warning when I sent similar e-mails to my Gmail account. Because of Gmail’s good spam filtering system, I assumed that Gmail was watching out for its users better than this.