Content Experiments JavaScript API

Google Analytics Content Experiments are a great way to quickly and easily set up simple A/B tests for your website. And for most people, setting up these experiments can be done using the interface in Google Analytics.

However, there are some who desire a little more control over the variation pages, that just can’t be done through the setup wizard.

For example, when you’re choosing you’re variation pages, you can specify full (exact) URLs for the variations, or relative URLs. If you choose to specify the variations by the full URL, you’d end up with something like:

Original Page:

http://www.example.com/original.html

Variation 1:

http://www.example.com/variation1.html

Variation 2:

http://www.example.com/variation2.html

If you choose relative URLs, you can take advantage of query parameters to specify your variations. This makes it possible to do site-wide tests, by placing the Content Experiment code on every “original” page of the site. Then, for your variation URLs, you’d have:

Variation 1:

?var=1

Variation 2:

?var=2

and on up to variation 9 (the maximum number of variations).

Doing it this way makes the variation URL relative to whatever page the Content Experiments code is on (regardless of what you specify as your original page in in the setup wizard). So if you have the Content Experiment code on www.example.com/original.html, and Google decides to send you to a variation, it will redirect you to www.example.com/original.html?var=1 (or ?var=2, ?var=3, etc.).

The problem

If you don’t use query parameters for your variations, but instead have them as separate pages, this poses a problem if you want to do a site-wide test. For example, let’s say you have a set of original pages that have the following URL structure:

www.example.com/page1/original/index.html

www.example.com/page2/original/index.html

www.example.com/page3/original/index/html

etc.

And your variation pages:

www.example.com/page1/variation/index.html

www.example.com/page2/variation/index.html

www.example.com/page3/variation/index.html

Wouldn’t it be great if you could just use the same trick as above, and specify the variation pages using the Relativeoption, and /variation/index.html as the variation page?

That would be great. But it doesn’t work. If you try (like I did) you find out that if you don’t specify a query parameter for the relative URL, then it makes the variation URL relative to the hostname. So your variation URLs end up being www.example.com/variation/index.html instead of www.example.com/page1/variation.html.

Still with me?

The Solution: Content Experiments JavaScript API

I stumbled across this little gem a couple weeks ago. It looks like this documentation was just added recently (April 4th). With a simple little script, you can define your variation URLs however you want. For example, the following code will define the original and variation pages, use the Content Experiments API to choose which version a user should see, and then either redirect to the variation or keep them on the original.

<!-- 1. Load the Content Experiments JavaScript Client -->
<script src="//www.google-analytics.com/cx/api.js?experiment=L9UZaiJzTn2z9Ud9XDya0g"></script>

<script>
var page_variations = [
'http://www.example.com/page1/original/index.html', //original page
'http://www.example.com/page1/variation/index.html' //variation 1
]

// 2. Choose the Variation for the Visitor
var variation = cxApi.chooseVariation(); //chooses a variation, or keeps them in same variation

// 3. Send visitor to the correct version
if (variation != 0) {
window.location.replace(page_variations[variation]);
}

</script>

Some important notes

This code is just a sample – you’ll obviously want to test it out for yourself to make sure it works for your site. Also keep in mind the following points:

• The code above completely replaces the Content Experiment code that you get from the setup wizard.
• You still have to set up the experiment in Google Analytics. Notice in the second line of the code above, you include the Experiment ID as a query parameter when you reference the Content Experiments JavaScript library.
• If you use _setDomainName in your Google Analytics tracking code, you’ll also need to specify the same domain name for content experiments with cxApi.setDomainName(‘example.com’); in the script

But wait, there’s more!

The Content Experiments feature reference includes information for even more advanced customizations and configurations. For example, did you know you can use the Management API to create new experiments, update existing experiments, retrieve a list of experiments, get the details of a single experiment, and delete experiments?