One of the limitations of Google Website Optimizer is that you have no control over which combination will be displayed to a user.
Wouldn’t it be great to have total control over which variation is displayed in each section?
For example, lets say you want to test a new navigation scheme that required testing of the page header and footer, but they had to be in sync with each other. In other words, header #1 must be displayed with footer#1, header #2 must be displayed with footer#2 and so forth.
This “hack” gives you the ability to read and write which variation is displayed in each section.
Before I go into the specifics, here is a short explanation of how it works (slightly simplified):
- First check if the user already has a GWO cookie. If yes then stop running the hack code (we don’t want to be changing variations mid-session). If they don’t have a GWO cookie then continue.
- Since they don’t already have a GWO cookie we need to create a temporary one we can use as a base. It has to look real, so use a copy of the original GWO display code to setup this temporary cookie.
- Use you own logic to read or write the variation values for the sections.
- Continue with the original GWO code. The original GWO display code will just think you’ve already been here and use the variation values you just set up.
My code provides two JavaScript functions:
gwo_read_section(section_number)
This returns the current variation number for a section.
gwo_write_section(section_number,value)
This sets the variation number for a section.
Now, lets take a look at an actual example.
Here is the original version of a simple experiment with three sections: header, middle and footer.
http://www.prusak.com/gwo/write_test_original.html
Now here’s the same experiment after we’ve added the new hack code.
This example includes simple logic to sync the header and footer sections.
http://www.prusak.com/gwo/write_test.html
Lets taken a closer look at the lines we added (you might want to “view source” for the link above):
Include the JavaScript library with the new GWO read and write functions.
// if first visit, get __utmx cookie BEFORE the original GWO code
// otherwise, do nothing.
var got_utmx = read_cookie('__utmx');
if (got_utmx == "") {
Look for the GWO __utmx cookie. This only exists if a user has been here before. Continue only if the user does not have a __utmx cookie.
function utmx_section(){}function utmx(){}
(function(){var k='1216062483',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(' ')})();
This is an exact copy of the original GWO display code. This is needed to setup all of the GWO cookies, including the __utmx cookie that we’ll modify as needed.
document.write(' ');
Include your own logic in gwo_write_logic.js to modify the sections. The logic code doesn’t seem to work when it’s in the main HTML file. Something about the order in which inline vs included JavaScript code gets executed.
// Get the current value of section zero
var section_zero = gwo_read_section(0);
// write it to section two
gwo_write_section(2,section_zero);
This is the code in gwo_write_logic.js. Here is where the “magic” happens.
Simply read the current value of section zero (the header) and then write that value to section two (the footer).
This should be enough to get you started.
Here are the actual files you’ll need:
gwo_write.js
This has the GWO read and write functions. See the source code for more documentation.
Just include this file before any of the GWO code.
gwo_write_logic.js
This should include your own logic for reading and writing section variations.
It doesn’t seem to work if this logic is in the main HTML file.
write_test.html
This is the example of the code in action.
You should be able to easily modify this to your needs.
Here are some ideas on what else you could do:
- Stop showing variations which are performing badly (and show one that is performing well)
- Always show (or don’t show) a specific combination of variations to certain people (the logic would have to be in JavaScript or server side). This could be based on IP, traffic source (referrer), etc.
- If you wanted to get really funky – you could link two different experiments so people who saw variation X on a different page will always see variation Y on this page.
Let me know if this code helped you in some way.
Ophir
February 15, 2008 at 12:37 pm
Good post! I have been thinking of the same problematic.
Though i think this can be very useful for specific situations, IMO, A/B testing can generally resolve the problem for testing specific navigation schemes. You just have to create multiple copies of your page, with the specific combinations you want to test.
That being said, it is not always that easy and your hack can come in handy!
August 5, 2008 at 4:46 pm
First of all, thank you for this great code!
I have a small problem, though, and was wondering if you might be able to help. I have a scenario where the code executes properly, but only when loaded locally (i.e. I open the file in my explorer). When the page is opened on my local testing server or uploaded to the domain the code does not work.
I can see that the application is setting the cookies correctly in the later scenario – where the code does not work.
It sets two values for __utmx
1. Content: ID:3:0-1
Domain: domain.com
Expires: …2010…
2. Content: ID:3:0-0
Host:domain.com
Expires …2008…
Like I said, when this is executed locally, the code works as it supposed to: the first variation takes precedence. So 0-0, 1-1 and 2-2 are the only possible values seen in the cookie.
Do you have any advice on this issue?
Thanks in advance!
July 15, 2010 at 3:03 pm
Hi, this looks great, but I do have a question…
I would like to run a simple A/B split test, but only want to show Version B to a particular IP address and have everyone else see the original page (Version A). Can this be done? If so, how exactly? I dont quite understand all of the code for this script.