Upcoming LunaMetrics Seminars
Washington DC, Dec 1-5 Los Angeles - Anaheim, Dec 8-12 Pittsburgh, Jan 12-16 Boston, Jan 12-16

Content Experiments JavaScript API

Caution - Test in ProgressGoogle 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 Relative option, 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?

Jim Gianoglio

About Jim Gianoglio

Jim Gianoglio is a Senior Digital Analyst at LunaMetrics. He works with implementation and analysis of Google Analytics, and spearheads the LunaMetrics Google Analytics seminars across the country. Want to see him in action? He'll be leading some of our upcomingGoogle Analytics trainings. Before succumbing to the siren song of analytics, he led the SEO campaigns of Fortune 500 companies in the insurance, retail and CPG industries. Things you didn’t know about Jim: he has biked from Pittsburgh to Washington DC, photographs weddings, and roasts his own coffee beans.

http://www.lunametrics.com/blog/2013/05/02/content-experiments-javascript-api/

11 Responses to “Content Experiments JavaScript API”

Hi Jim,

Thank you so much for your article. I tried everything with the experimentation on a dynamic site and nothing worked until I used the custom experimentation JavaScript API. Thanks again for this article!

Mikhail

Johan says:

Hi, and thanks for the article.
I tried this new way of using content experiement becuase i didnt want to change the url at all, instead just show different content (image right now).

It works for me but what i dont understand is the how i will now which alternative in the GA content experiment test that is related to the alternatives in in the this script code.

Also, right now the page loads first, and then it takes a halv a second until the alterntive image is loaded, is there a way around this? Will using css in the script work better?

Thanks if you could give me an idea.
Regards
Johan

Hi Jim,

I have an update. I used your JS code snippet and it gave me a great jumpstart. However some things are still had to be taken care of. First – do you want to show this snippet both on original and variant pages.

When I tried to show it on original and variant – the variant page entered the endless loop of redirecting to itself.

Then I showed the JS only on the original page. The GA report started showing incorrect data – for variant pages it was showing only 1 or 2 hits (though Real Time GA module was showing that redirection was done properly).

Eventually, after several trials and errors I ended up with the following code that works perfectly. Please note that it has some JSP/JSTL code that does redirect ONLY from original page. On a variant page it calls cxApi.chooseVariation() (and this is important – that’s where the hits and bounces are captured by GA) but does not do the redirect. Here is the code:

cxApi.setDomainName(‘internetpolyglot.com’);
var page_variations = [
‘lesson’, //original page, example internetpolyglot.com/lesson-2502101080
‘lesson?var=large_h1′ //variation large_h1, example internetpolyglot.com/lesson-2502101080?var=large_h1
// note that you need to form the proper url dynamically
]
// 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
// but do it only on the original page, i.e. if request parameter var is empty

if (variation != 0) {
window.location.replace(page_variations[variation]);
}

Thanks again for your great article!

Mikhail

Hmmm, after I posted it I see that your blog removed all JSP/JSTL lines. So I guess I can either send you the actual code via email or just remove my previous post because the code there is incorrect.

Mikhail

V Hassam says:

This is a great article, and the A/B testing is awesome. One thing that should also be noted here is that if you are using an additional analytics package you may experience an increase in leads marked as direct traffic. So, if you’re an SEO, you might want to inform your clients of that before implementing these tests, or keep away from doing variants on the homepage.

@V Hassam – running Content Experiments in Google Analytics (whether you use the interface to set up the experiment or the API) will not cause the visitor’s source information to be overwritten as Direct. You can safely implement these tests – on the homepage or any other page, and visitors who come from organic search will still show up as coming from organic search.

@Mikhail – it sounds like you found something that is working for you. You should be able to include this snippet on multiple “original” pages, in the example of a sitewide test. The var variation = cxApi.chooseVariation(); line should keep track of which variation a visitor is in, and should prevent the endless redirect loop you were experiencing. It’s hard to say exactly what was happening for you, but it looks like you were able to work around it.

Vhassam says:

Jim, this is actually a bug on the vendor’s end. We use another analytic platform in addition to GA. The experiment passes the correct source attribution in the headers, but the package fails to identify it when sourcing visits. :( I haven’t yet tried with KM or SiteCatalyst pages.

Forest Parks says:

Ok, here is my predicament.

I simply want to change the background of one element site wide and run as a test with 8 variations.

Any idea how to achieve this with the javascript api? I got it to work on one page but not across the site!

Chip Oglesby says:

Jim,

I’m looking a running a series of A/B tests on multiple product pages. There are 26 pages and we would like to include all of the pages in one content experiment. Do you think the solution in this post would work for a test like this?

@Chip -
Yes – you just need to include the content experiment code on all 26 product pages (just the original pages, not the variations).

A/B testing process certainly helps to find out which is the best places to show advertisement. Google working to improve on that . But whether the above changes are effective or not , that we will come to know in near future . Java script Api usage increases the load time . Hope they take care of that too.