GWO provides for an A/B style of testing “out of the box”. However, sometimes you may find it does not quite suit your needs, or, you may need more control over the URL to which visitors get redirected. This article describes how to perform an A/B test where you have much more control over how the redirection to the alternative pages takes place.
The following is a technique for performing an A/B test such that you have an opportunity to dynamically participate in the construction of the alternative URL’s.
First, instead of creating an A/B experiment, create a Multi-Variate experiment. Place the control script at the top of your test (A) page. Place the test page tracking script at the bottom of your test page and alternate pages (B, C, etc). Place the goal tracking script at the bottom of your goal page.
Now, instead of introducing the multi-variate sections scripts, place the following somewhere in your test page (I recommend it go near the control script):
This HTML comment is very much like a section script in that it declares a section named “page-url”, but does not modify the page or the user’s experience at all.
Now, you can validate the test and goal pages and move on to specifying the alternate URLs which you want to test. Enter these into the GWO UI as the content of variations for the page-url section. Here I’ve specified a simple relative URL, but you can specify a complete URL if you want:
Before launching or previewing your experiment, place the following script immediately after the control script on your test (A) page:
<script>
function filter(v) {
var b = utmx('variation_content', 'page-url');
var u = v[0].contents;
if (b && u.substr(0,7) == 'https://' && b.substr(0, 7) != 'https://') {
u = u.substr(7);
}
return u;
}
utmx('url', 'page-url', 0, filter);
</script>
At this point, you can preview and launch the experiment. It will behave just like any other A/B experiment.
You can see an example of this in action here as follows.
Note that that URL will take you to the A page without enrolling you in the experiment. In order to experience a possible redirect, remove the content after the # in the link’s URL:
The Filter Function
This script above will perform the redirection to alternative pages, should GWO decide that a given visitor is not to see the A page. Let’s look at a bit more closely.
<script>
function filter(v) {
...
}
utmx('url', 'page-url', 0, filter);
</script>
The utmx function is defined by the control script. It is the main entry point for a variety of GWO functionality available in test pages. In this case, the first argument, ‘url’ tells the function that it should treat this experiment as an A/B experiment and perform a redirect if necessary. The second argument, ‘page-url’, is the name of the section which defines the alternative URL’s. The third argument is a positional indicator and should be set to zero in this case. Otherwise, I will not describe it here.
The fourth argument is a filter function which you define and is called just before redirection takes place. It takes, as an argument, an object containing the redirection URL computed by the utmx function and returns the actual URL to which the user will be redirected. It is your opportunity to get involved in the form of the URL the visitor is redirected.
Before calling the filter function, the utmx function does a number of things to the target URL. First, it merges all query parameters of the current URL (document.location) with the query parameters of the target URL. This allows an alternate page to have the same information the A page has. For example, you might encode product ID’s as a query param:
https://www.mystore.com?product=slinky
You might enter:
https://www.mystore.com/b-page.htm
As the alternative B-page URL for your experiment. Because you are testing all your product pages, you can only specify the B-page URL, sans the product. GWO will redirect to:
https://www.mystore.com/b-page.htm?product=slinky
Which allows your B-page to know which product is being queried and present that product in the context of the B-page.
The utmx(‘url’, …) function also looks at the URL and adds https:// to it if it does not already have it. Many times, this is fine, if you don’t specify the protocol. For example:
www.mystore.com/b-page.htm
But it can sometimes get in the way. For example, you might want to specify (as I do in my example above), a simple, relative URL for the alternate pages:
b-page.htm
The the code in the custom script above will strip this away as needed:
var b = utmx('variation_content', 'page-url');
var u = v[0].contents;
if (b && u.substr(0,7) == 'https://' && b.substr(0, 7) != 'https://') {
u = u.substr(7);
}
return u;
If the “raw” version of the alternative in the variable ‘b’ does not begin with https:// but utmx’s version does, then it will be stripped away. Finally, the URL in the variable u is returned where GWO will perform a redirection to it.
URL Customization
The filter function allows you to inspect and modify the redirection URL at will. To demonstrate this further, consider my example above where the product ID is a query parameter:
https://www.mystore.com?product=slinky
But, what if my site encodes the product in the path of the URL? Like so:
https://www.mystore.com/slinky/a-page.html
And, I want to test an alternative page, like so?
https://www.mystore.com/slinky/b-page.html
You’d might enter the alternative URL in GWO as:
https://www.mystore.com/slinky/b-page.html
But, because your test page will be called for more than one product, like:
https://www.mystore.com/tofu/a-page.html
You can’t enter that URL, otherwise all users will see only the tofu product, regardless of which product they may have clicked on. Or, you might enter:
https://www.mystore.com/b-page.html
But, no product is specified here, and your web server might produce an error page.
What you need to do in cases like this is write some custom JavaScript which builds the correct URL. So, building off the last example, consider the following example. Let’s say the the following URLS are two of among many products:
https://www.mystore.com/slinky/a-page.htm
https://www.mystore.com/tofu/a-page.htm
And you specify an alternative URL like so:
https://www.mystore.com/PRODUCT/b-page.htm
The idea is while computing the URL to which a redirection will take place, inspect the current URL (document.location.href) for the name of the product, and replace the word PRODUCT with the name of the current product in the a-page. Like so:
<script> var b = utmx('variation_content', 'page-url'); function filter(v) { var u = v[0].contents; if (b && u.substr(0,7) == 'https://' && b.substr(0, 7) != 'https://') { u = u.substr(7); } var l = document.location.href; var prefix = 'mystore.com/'; var i = l.indexOf(prefix); var j = l.indexOf('/', i + prefix.length); u = u.replace('PRODUCT', l.substring(i + prefix.length, j)); return u; } utmx('url', 'page-url', 0, filter); </script>
This is very much like the first example above, but instead of simply returning the URL, we get the current product name and use it to replace the place-holder token, “PRODUCT” which is present in all alternative URL’s. This allows us to redirect to the proper alternative URL, while preserving the current product the visitor is interested in.
You can see this in action here:
Happy redirecting!
Comments:
This is awesome stuff Eric thanks for this, it will help alot with some of those advanced problems.
Gavin Doolan : March 20, 2009 3:03 AMThis is great thanks Eric. One question, do you have to alter the conversion script in any way? Our test is tracking visitors no problem, however conversions seem to be another issue.
: April 2, 2009 11:02 AMGreat stuff Eric, thanks. One question, do you have to alter the conversion script as well? We are tracking visitors with no problems, yet conversions is another story.
: April 2, 2009 11:03 AMHi Began,
No, the conversion scripts need not be chnaged using this technique. All this does is change the way that the redirection takes place.
– Eric
Eric Vasilik : April 20, 2009 9:48 PMHi Eric,
Great article! I had a question regarding the way GWO handles the URL defined in an AB test.
I have a test running with 1 variation. The scripts are all in place and I’m seeing conversions but the visitor count is not counting on the variation.
I have the URL for the variation defined correctly in the tool but once the user hits that page, it passes them to different pages depending on their login status, and then to a third page (I have the tracking script defined on that page).
It is important that the user hits the main page that handles the redirect. But it doesn’t seem to register as visits.
Is that because the tool has to match the URL to the page triggering the script. And if so why am I seeing conversions? Is it registering the trackPageview but not counting as a visit.
Is there any way around this?
Any help would be appreciated
Thanks,
Hans
[email protected]
: August 12, 2009 2:08 PMReally wonderful stuff here Eric. In one experiment I’m now testing thousands of templated pages versus a new version of the template. It’s working perfectly
: September 16, 2009 10:04 AMThe redirects work fine for my colleagues who use IE8 on XP and IE7 on Vista.
Any ideas? Could it potentially mess up the GWO results?
Thanks in advance.
Cristina : September 21, 2009 8:03 AMHi Cristina,
I have the same experience you do with IE8 under Vista. However, if you clear cookies *and* close IE, and then go back to IE and visit your experiment, I find that it can redirect to an alternate page. IE seems to remember stuff in a browser session.
– Eric
Eric Vasilik : September 21, 2009 10:11 AMEric, thanx a lot! I want to test product pages so I guess this will help me a lot!
I have one question. What to do if even a Goal page has URL like www.example.com/buy-it/PRODUCT?
Thank you very much in advance!
Best Regards,
Michal
Michal : November 5, 2009 9:54 AMMichal,
Just put the goal tracking script on all your goal pages. Only those who entered the experiment and get to a goal will trigger a conversion.
– Eric
Eric Vasilik : December 27, 2009 8:05 PM