A note about GwoTricks :

On May 1st of 2010, Google stopped supporting FTP publishing of blogger blogs. The migration of gwotricks.com to be Google hosted is difficult because of the sample files (non-blogger files) hosted on gwotricks.com. Because of this, until I get GwoTricks migrated to some other platform, the site is in stasis.

This also means that publication of comments is also no longer supported. In order to facilitate questions, I have created a Google Group to facilitate comments and questions:

https://groups.google.com/group/gwotricks

– Eric Vasilik

 

---

 

Website Optimizer Tricks Index

Current Articles:

• Multiple Goals – Test more than one goal by creating multiple experiments for the same test!
• GA Integration – Get experiment information into GA.
• Control Script Placement – Where should you place the control script in your test page?
• Does Medicare Cover Stair Lifts – Sample test page?
• Advanced A/B Experimentation – Techniques for obtaining more control or A/B redirection.
• Advanced Test Page Functionality – Functionality for writing customized tests.
• Fragmented Sections – Test non-contiguous pieces of your page with Fragmented Sections.
• Server-Side Dynamic Section Variations – How to generate dynamic section variations on your web server.
• New! Tracking Outbound Links — The Right Way – How to correctly track outbound links

Future Articles:

• Client-Side Dynamic Section Variations – How to include dynamic content in a section.
• Techniques for Debugging Experiments – How to check to see if your experiment is running properly.

 

---

Tracking Outbound Links — The Right Way

 

---

Server-Side Dynamic Section Variations

This technique is one of my favorites because it involves some pretty “clever” (euphemism for twisted) JavaScript. But don’t let this scare you, the script works on all the browsers and is as fail-safe as the scripting that Website Optimizer requests you place on your sites by default.

Multi-Variate Experiments “Out of the Box”

First, let’s revisit certain aspects of GWO pertinent to this technique. By default, GWO handles multi-variate experiments in the following way:

Your test page and the default content for your experiment sections are served directly from your web server. If alternative content has been chosen to be displayed to a visitor, that alternative content is served from a Google server.

Now, this poses a particular limitation: the alternative content must be static in nature. The reason behind this is in the fact that, in the default setup process of a multi-variate experiment, you are requested to input the alternative content into GWO’s user interface, and that content is simply served back to your test page on demand where it replaces the default content in the page for visitors selected to see the alternative content.

This means that if you wanted to customize that alternative content differently for each visitor, you don’t get a chance to do so. For example, you might want to include the customer’s name in the alternative content. Or, you might want to serve a promotion customized for the given customer.

Alternative Content Served from Your Webserver

The technique I am about to discuss allows you to serve all content, default and alternative, directly from your web server:

Here, the Google server does not serve any alternative content. It only serves back an indicator (an integer) of which content should be show to a given visitor. All the possible variations for the sections are rendered into the web page by your web server where you have complete dynamic control over the content of those variations. In the following, I will show you the scripts you need to generate along with that content in order to show one of either your default content or variations.

Size of Alternatives

That said, one should be careful when using this technique because it requires you to render all possible section variations into the page. Because even though your web server knows what the content of the alternatives are, it does not know which alternative will be chosen for a visitor to your test page. Contact with the Google server is required for that, and the logic about which content to show to the visitor must be executed in the browser client.

So, if the number and size of all the alternative section variations is not too large, you can use this technique. Many times, this is the case. Even if you define your entire page to be a single section, this technique may work for you because only the HTML of the alternative need be present in your page. Any other resources, like images, scripts or style sheets, which are specific to an alternative variation will be loaded if that alternative variation is chosen for a visitor. Content which was not chosen for the visitor will not even be parsed by the browser, it will essentially be thrown away.

Creating the Experiment

To use this technique, you begin by creating a regular multi-variate experiment. Give the experiment a name, test page and goal page. When asked to add the GWO scripts to the page, add the control script in the normal way. And, add the tracking scripts in the normal way.

However, do not follow the default instructions for adding section scripts. I have prepared an example test page you can look at which illustrates the alternative to the default section scripts which allows you to serve alternative section variations from your web server:

Server Side Sections Example

First, you will want to declare the number and names of the server-side dynamic experiment sections you plan to test. Sections are normally declared as a result of surrounding the default content of a section with the standard GWO sections scripts. But, because we are not using those, you need to use an alternative. So, to declare a single section with the name “Section1”, place the following immediately after the Control Script:

<!-- utmx section name="Section1" -->

You can repeat this kind of comment to declare up to 8 sections. For example:

<!-- utmx section name="Section1" -->
<!-- utmx section name="Section2" -->
<!-- utmx section name="Section3" -->

Note that you can mix regular GWO multi-variate section with server-side dynamic sections. Simply include the standard GWO style sections as described in the default install instructions.

Instrumenting the Sections

The following script is the entire definition of the section from my example page. I show you in its entirety here, and will dissect it later. Note that the dynamic content for each variation is highlighted. These are the parts of the page you get to dynamically generate. Only one of them will be show to a given visitor, the others will be stripped away.

<script>
var GWO_Section1 = utmx("variation_number", "Section1");
if (GWO_Section1 != undefined && GWO_Section1 != 0) document.write('<no' + 'script>');
</script>
Original content - shown by default<br>
</noscript><script>
if (GWO_Section1 == 1) document.write(‘</noscript a=”‘);
</script><!–“>
Alternative content 1<br>
<script>document.write(‘<‘+’!’+’-‘+’-‘)</script>–>
<script>
if (GWO_Section1 == 2) document.write(‘</noscript a=”‘);
</script><!–“>
Alternative content 2<br>
<script>document.write(‘<‘+’!’+’-‘+’-‘)</script>–>

The basic idea with this technique is that each of these script blocks controls a piece of content. The first controls the original content. By default, the original content is show to the visitor. The other script blocks control the alternative pieces of content, one of which, is meant to replace the original content. By default the alternatives are hidden from the visitor. If an alternative is chosen to be shown to the visitor, then the script blocks will work together to hide the original and show only one of the alternatives to the visitor.

The content contained in each of these script blocks is totally under your control in your web server. Which one of them is shown to the visitor is under the control of Website Optimizer.

The Default Content

Like any GWO experiment, the default content is encoded in your test pages, and if JavaScript is not present or disabled, or there is any malfunction anywhere, the default content will be presented to your visitors. With this technique, the default content is handled with this script:

<script>
var GWO_Section1 = utmx("variation_number", "Section1");
if (GWO_Section1 != undefined && GWO_Section1 != 0) document.write('<no' + 'script>');
</script>
Original content - shown by default<br>
</noscript>

Here, the script code firsts obtains the number of the variation for the section named “Section1” chosen for the current visitor:

var GWO_Section1 = utmx("variation_number", "Section1");

This call to the utmx function will return a 0 (zero) or undefined if the visitor should see the default content. This value is saved in a global variable for use in subsequent alternative content scripts. Note that the utmx function is defined by the Control Script which needs to have been executed before the call to the utmx function in this script.

Then, if alternative content has been chosen for this visitor, the default content is hidden from the visitor with the second line of code:

if (GWO_Section1 != undefined && GWO_Section1 != 0) document.write('<no' + 'script>');

By document.writing a beginning <noscript> tag, the content after the script and up to the first </noscript> tag will be consumed and ignored by the parser. This requires that your default content not contain any noscript tags (beginning or ending). This is exactly the same technique used by GWO for standard installations of multi-variate experiments. The only difference is that here we are just removing the default content, but the standard GWO multi-variate technique document.writes the alternative content to replace the default content before writing the <noscript> tag to eliminate the default content.

The Alternative Content

Now, for each variation of alternative content for a given section, you will need a script like this:

<script>
if (GWO_Section1 == 1) document.write('</noscript a="');
</script><!--">
Alternative content 1<br>
<script>document.write('<'+'!'+'-'+'-')</script>-->

Note that the 1 indicates that this script is customized for the first alternative. The second alternative will have the number 2, the third 3, etc. The larger highlighted part is your dynamically generated alternative content for the first alternative. Simply have your web server surround the alternative content with the other text.

The first line of the script determines if this alternative was chosen to be viewed by the visitor and document.writes some content designed to cause the variation to be shown to the visitor:

if (GWO_Section1 == 1) document.write('</noscript a="');

To understand this better, consider what this content would look like if scripting is disabled, or the value of GWO_Section1 does not have the value 1. That is, there is no script:

<!--">
Alternative content 1<br>
<script>document.write('<'+'!'+'-'+'-')</script>-->

This entire block of HTML is nothing more than one large comment. In fact, the alternative content is hidden by default by the fact that it is embedded inside a comment. This means that the alternative content must not have any comments in it. Note that even the script at the end of the HTML is also inside the comment.

Now, look carefully at what is written if this section variation has been chosen to be displayed to the visitor:

</noscript a="

This is the beginning of an ending noscript tag. Note that there is no > terminating the tag. Also, in this tag there is the beginning of an attribute. Notice, also, that the value of the attribute is not present and that the ending double quote is not present. That is not two single quotes. It is a single double quote.

Recall that the way that document.write works is that the written text is, essentially, inserted after the end of the script where the browser parser will resume its parsing after the script has executed. Again, by stripping away the first script tag, let’s look at what the parser will encounter:

</noscript a="<!--">
Alternative content 1<br>
<script>document.write('<'+'!'+'-'+'-')</script>-->

Here the parser sees an ending noscript tag with an attribute whose value are the characters which begin a comment. The thing to know here is that HTML parsers allow beginning comment sequences inside attribute values. This is the clever (twisted) part I eluded to earlier.

Now, it should be apparent why there was the “> characters immediately after the beginning comment character sequence: <!–. It is there to terminate the dynamically written ending noscript tag. This tag “eats” the beginning comment token. Yummy.

This allows the parser to parse and display the alternative content. Now, all we need to do is deal with the remaining ending comment token! This is done by the last part of the script:

<script>document.write('<'+'!'+'-'+'-')</script>

Which injects a beginning comment token which is terminated by the remaining ending comment token, statically present in the page. Without this document.write, the “–>” would appear in the page when this alternative content was chosen for the visitor.

This is how each alternative variation is handled. Simply do the above for each alternative section. Each one will have the server generated content of the variation. Each script will have the number of the variation encoded in it. 1 for the first alternative, 2 for the second, etc.

You can repeat this sequence of scripts for a section as many times on your page(s) as you want to hide/show the default/alternative content for that section.

Setting Up the Variations in GWO

Even though this technique requires you generate all your alternative content into the page, you will still need to create section variations in Step 3 of the GWO user interface for each section in your test. The only difference is that you do not supply any content for these variations. The reason for this is that GWO still needs to know how many variations each server-side dynamic section has for the purposes of choosing which variation visitors will see and reporting results. For example:

Shows the section named “Section1” with two (2) variations created for it. I give each variation a name for reporting purposes, but I do not need to give it any content.

After Doing this, all that is left to do is preview the experiment to make sure the scripts are working and launch the experiment!

---

 

Test non-contiguous pieces of your page with Fragmented Sections

The default setup for a multi-variate experiment asks you to place what are called “Section Tags” on your test page. For example consider a header for a fictitious pet food web site:

<script>utmx_section('Heading')</script>
World’s best pet food!
</noscript>

The purpose of these tags is to identify a contiguous span of HTML on your test page with which you would like to experiment. In the GWO online tool, you would enter the alternative variations for this section. For example:

 

This allows you to specify an alternative which will replace the original content on your test page. In fact, everywhere this pet food website mentions the phrase “World’s best pet food!”, you could instrument that phrase with the scripts above to have a visitor to your site experience every instance of the phrase on the site with the same alternative variation.

But, what if you want to vary multiple parts of a page (or pages) on your site in concert with each other? For example, let’s say that our fictitious pet food web site shows a letter to visitors, like so:

 

Then let’s say that you want to have multiple variations of the letter, each with a different tone in the salutation and signature. For example, an informal tone:

 

Or, a formal tone:

 

Now, you could implement this in the same manner as the section shown above. However, because the salutation and signature are separated by the body of the letter, you would have to include an entire copy of the body in each variation of the section, where the different variations differ only by the salutation at the beginning and the corresponding signature at the end.

Now, in this simple example the body is not that large, but the redundancy runs the risk of introducing different bodies which would foil the experiment. And, in the case where the body is not small, you would not want to replicate the body. Furthermore, it might be the case that the two parts of your site you want to vary in concert with each other are not on the same page. The standard section tagging technique breaks down entirely in this case.

The technique I am about to explain will allow you to experiment with your site in such a way as to only require you to alter the actual pieces of the page you want to change, but allow you to have those pieces change together. This is what I call Fragmented Sections. First, a look at what you would enter into the GWO online tool for a variation of our letter’s Tone section:

 

What I’ve done here is to place what I call Fragments of a single section variation surrounded by special %% tokens which identify the fragments with monotonically increasing numbers starting with 1 (fragments cannot have %% sequences in them, or a different token will need to be chosen). Thus, the salutation (the first fragment) of the Formal variation of the Tone section is represented by:

%%Frag 1%%Dear Sir/Madam%%

and the signature (the second fragment) is represented by:

%%Frag 2%%Sincerely%%

The value for the informal variation of the section would look like:

This is a single section with multiple parts to it. Now, how does one use these multiple parts in the actual web page? Here is what the letter part of our pet food web site would look like:

<p><script>write_frag('Tone', 1)</script>Hello</noscript>,
<p>
We’re so sure your pet will flip out over this food, we
offer a double your money back guarantee! If your pet
is not satisfied in 30 days of purchase, just return the
unused portion of the food and a notorized letter from
your pet explaining why the food was less than perfect.
<p>
<script>write_frag(‘Tone’, 2)</script>Thanks</noscript>,<br>
The Pet Food Company

I’ve highlighted the two section fragments. They are very similar to the standard tags one would use, but instead of calling the utmx_section function, they call a function called write_frag. Also notice that the default version of the section fragments are encoded in the page, surrounded by the function call and a </noscript> tag – just like standard section tagging.

Now, the definition of the write_frag function:

<!-- utmx section name="Tone" -->
<script>
function write_frag(section, frag_num) {
var content = utmx('variation_content', section);
if (content) {
var token = '%%Frag ' + frag_num + '%%';
var start = content.indexOf(token) + token.length;
var finish = content.indexOf('%%', start);
document.write(content.substring(start, finish));
document.write('<no' + 'script>');
}
}
</script>

The first line of this block of HTML is a special comment which declares the presence of the Tone section to GWO. GWO normally detects the section of a multi-variate experiment by looking for the standard section tags. But, because those are not present, this comment is an alternative way of declaring the section.

First, the write_frag function uses functionality that is defined only after the Control Script has executed on the page. The write_frag function takes two arguments: a section name and a fragment number. What the function does is acquire the value of the the section’s variation as it was entered into GWO:

This call’s the utmx function which is detailed in another article. This call returns one of the %%’ed variations defined for the specified section which was chosen by GWO for this visitor to see. If an alternative variation is not returned, then the function does nothing else, and the default content is displayed. However, if an alternative variation is returned, then the function searches that variation for a block of text surrounded by the special %% tokens. The start token takes the form %%Frag #%% where # is replaced with the number of the fragment. In this example, there are two fragments, but you could have as many as you want.

Then, after isolating the value of the fragment, it document.write‘s this along with a </noscript> tag. This is exactly what the utmx_section does for you in the standard version of section tags. This causes the browser’s parser to encounter and display the fragment’s value while removing the original’s value.

Thus, with this technique, you can define sections which need not be contiguous. Please note that although this example shows how you can have a fragmented section influence a single page, the technique works just as well across multiple pages. Be sure to include the Control Script at the top of each page which contains a section or a fragment of a section.

I have a web page illustrating this very technique.

 

---

Advanced Test Page Functionality

Recently, I added functionality to pages which contain the Control Script (these are usually test pages). This new functionality allows you to obtain more information about the variations and combination chosen for the visitor to a experiment, allowing you more flexibility in developing customized tests. I will elaborate on testing techniques which use these features in other articles. In this article, I want to simply document the new functionality in detail.

The utmx function

All the new functionality are accessed via the utmx function which is defined as a consequence of including the Control Script on a page. The utmx function is designed to be the single entry point for most current and all future functionality provided to test pages. Its signature is:

utmx( feature, arg1, arg2, ... argn )

The first argument is a string which describes the desired feature requested. The second, third, etc, arguments are dependent on the requested feature.

The value that the utmx function returns is dependent on the requested functionality. It may be a string, a number or other value. However, no matter what feature is requested, the utmx function may return undefined. The undefined return value may indicate that the utmx function was not redefined by the Control Script, and that any GWO related functionality on the page should show default (original) content or take default behavior. To illustrate this point, consider what the beginning of the Control Script looks like:

<script>
function utmx_section(){}function utmx(){}
(function(){var k='3923492669',d=document,l=d.location,c=d.cookie;function f(n){
.....

Notice that the utmx function is initially defined to have an empty body. When a function like this is called in JavaScript, the return value will be undefined. If, for whatever reason, the Control Script is unable to load siteopt.js, which redefines the utmx function, this original definition will remain and return undefined for anyone who calls it. In order to have pages not break under these circumstances, it is important to check the return from utmx for undefined and take the appropriate actions.

Variation Information

The following two features allow you to obtain information about what variation was chosen for a given section:

utmx( "variation_number", section_name )

and,

utmx( "variation_content", section_name )

In each case, the section name is the name (a string) of the section for which you want the information. This is the same value you would pass to the utmx_section function for a multi-variate experiment. In the case of an A/B experiment, GWO creates a single section called “A/B” which can be used here as well.

The “variation_number” feature returns either undefined or an integer number between 0 and N-1 where N is the number of variations defined for the given section, including the original. If 0 or undefined is returned, this indicates that the original content or behavior for the given section was chosen for this visitor. Values 1 through N-1 indicate that a non-original alternative for the given section was chosen for this visitor. In this case, the appropriate alternative action should take place.

The “variation_content” feature returns either undefined or a string. If undefined is returned, this indicates that the original content or behavior for the given section was chosen for this visitor. Otherwise, a string is returned, indicating that a non-original alternative for the given section was chosen for this visitor. The value of this string is exactly what was entered in the GWO user interface as the value of the variation chosen for the visitor. In the case of an A/B experiment, the value returned is the alternative URL entered in GWO user interface, exactly as it was entered.

Both of these features can indicate non-original alternatives for the given section for both “preview” and “live” page requests and should be used to alter the visuals or behavior of the page. A “live” request is a test page viewed by a visitor while the test is running, as opposed to a “preview” request which is one performed by the GWO preview window.

Combination Information

The following two features allow you to obtain information about what combination was chosen for a “live” visitor. Note that under “preview” requests, no combination information is available, undefined will be returned. These features apply only to “live” requests. Because of this, these features should not be used for altering the appearance or behavior of a test page. They can only be used to indicate what combination was chosen for a visitor to a running experiment.

utmx( "combination" )

and,

utmx( "combination_string" )

The “combination” feature returns either undefined or an integer between 0 and M-1 where M is the total number of combinations defined for the experiment, including the original. If undefined is returned, this indicates that this test page request was not a live request. If 0 is returned, this indicates that the original combination was chosen for the visitor. Otherwise, 1 through M-1 indicate that a non-original alternative was chosen for the visitor. Note that M is the product of the variation sizes of all the sections defined for the experiment. So, if you have an experiment with two sections, say, headline and image, and the headline has 3 alternatives and the image has 4 alternatives (each including the original), then M will be 12.

The “combination_string” feature has similar semantics as the “combination” feature. It returns undefined under the same conditions. However, the return value is a string with the variation numbers for each section separated by dashes. For example a 3 section multi-variate experiment may return “3-0-2” where 3 is the variation number for the first section, 0 for the second and 2 for the third. In this example, “0-0-0” would indicate that the original combination was chosen for the visitor. Again, undefined indicates that this was not a “live” request.

For A/B experiments, the combination features behave like a multivariate experiment where there is only one variable.

An example of using the combination information can be found in this article: Poor Man’s GWO/Analytics Integration.

Declaring Multivariate Sections

When using the above functionality for implementing tests, you will probably no longer use the standard multi-variate section script. For example:

<script>utmx_section("Button")<script>
<input type=button" value="Click Me">
</noscript>

The standard section script does two things. First, it declares the section named by the argument to the utmx_section function (Button, in this case). Secondly, it implements the actual replacement of the default content should a visitor been chosen to see an alternative variation.

When implementing the more advanced techniques for experiments, you may frequently no longer use the utmx_section function. However, you will still need to declare a section so that GWO will know the schema of your experiment. To declare a section without impacting your test page, you can use a special HTML comment. For example:

<!-- utmx section name="Section1" -->
<!-- utmx section name="Section2" -->

Declares two sections, but otherwise, has no impact on the page in which it is present (because they are comments). This way, when you validate your test page in the GWO UI, GWO will see the two sections you intend to declare. Then, the implementation of those sections on your page is under your, separate, control.

---

 

Advanced A/B Experiments

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.

Test (A) Page (inactive)

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:

Test (A) Page (active)

 

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:

https://www.gwotricks.com/abadvanced/slinky/b-page

Happy redirecting!

---

 

Where does the Control Script belong?

I frequently see test pages in which the control script is not placed in a good location. In this article, I want to talk about the things to consider when placing the control script into your test pages.

 

Latency

The presence of the control script in your page will introduce latency into the total load time of the page. When the control script executes, it generates a request for a Google resource called siteopt.js. The latency is attributed to the time it takes for siteopt.js to load. To demonstrate this, with Firefox, you can load siteopt.js in the presence of the Firebug add-on that can measure the amount of time that it takes the page to fetch various resources. For me, inside the Google corporate network, it takes on average about 20 milliseconds to load siteopt.js:

When I do the same thing from my home, it takes a little more time, about 36 milliseconds (I use a microwave based ISP, which adds a little bit of latency to everything):

In order to minimize this latency, Google distributes the servers that respond to siteopt.js requests all over the globe. This way, visitors from Mongolia to your test page don’t have to load siteopt.js from a faraway server in the United States, they will probably get siteopt.js from a server in Asia, or Northern Europe.

 

Redirection

If you are running an A/B experiment, the control script may cause a redirection to happen if Google decides that this particular visitor should see a page other than the A page. This means that all the processing that the browser is doing when the redirect takes place will be aborted when the new page is loaded.

Other Resources

Given these aspects of the control script, it is very important that the control script appear before any references to external resources. These include CSS, script, image, objects, and the like. The reason for this is that if the control script decides to perform a redirect, all the time and work involved in loading these resources will be wasted and, most likely, performed again in the target of the redirect. This leads to increasing the total latency that the visitor experiences.

Displayable Content

Because the control script loads alternative content used in the display of the page, it needs to appear before the points in the page that potentially use this alternative content. Additionally, it is very important that the control script appear before any content in the page that is displayed to the user.

The reason for this is, again, latency. If the control script were to appear after, say, the first paragraph of the page, the user would see that paragraph, experience a very brief latency, and then the rest of the page would display. However, if the control script were to appear before this paragraph, then the window remains blank during the small latency, and then the page would render as a whole. This is a better experience for the user.

Also, a browser may spend less time laying out the page because there is no interruption of the display of the page.

Document Type Declaration

Many pages have a document type declaration. It may look something like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">

Browsers will change the way they parse an HTML file based on this declaration. In order to determine the type of a page, browsers will “sniff” for this declaration at the very beginning of the page. If they find a well formed declaration, then the parser for that document type will be instantiated.

It is very important that the control script appear after any document type declaration. The reason for this is that browsers will only look so far into an HTML document when sniffing for these declarations. The presence of the control script before the declaration may cause the browser to not find the declaration and to choose the wrong parser. This can have devastating effects on a page, potentially rendering it unusable.

Conclusion

So, in a well formed HTML document, the control script should be:

• After any document type declaration
• Before any other resources (CSS, scripts, etc)
• Before any displayable content (text, tables, etc)

In a well formed document, these restrictions are usually accommodated by placing the control script as the very first element of the head element, just after the beginning <HEAD> tag.