Google Website Optimizer integration

The instructions on this page are intended for self service and online accounts.
Enterprise customers should contact their account managers for integration support.

ClickTale has two integration methods for Google Website Optimizer (GWO), please make sure you choose the correct integration method based on the type of test you are running.

Google Website Optimizer for Split testing (A/B testing)

Google Website Optimizer in Split test (A/B testing) mode, will redirect your entry page to a different page based on your configuration. While this is active you will not be able to play or do a report on your entry page in ClickTale.

With the following fix, you will be able to see the correct variation for each visitor and also aggregate each variation separately in Heatmaps or Form Analytics reports.

Instructions

If your current Google Website Optimizer code (on the "original" page) looks like this:

<script>
function utmx_section(){}function utmx(){}
(function(){var k='XXXXXXXXXX',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('<sc'+'ript src="'+
'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'
+'/siteopt.js?v=1&utmxkey='+k+'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='
+new Date().valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"></sc'+'ript>')})();
</script><script>utmx("url",'A/B');</script>

Change it to

<script>
var CTIsPlayback=true;
try
{
   if(!parent || !parent.WebPlayer) // if there is no WebPlayer or if the above frame is not accessible
      throw false;
} catch(e) { CTIsPlayback=false; }
</script>
<script>
function utmx_section(){}function utmx(){}
if(!CTIsPlayback)
{
(function(){var k='XXXXXXXXXX',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('<sc'+'ript src="'+
'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'
+'/siteopt.js?v=1&utmxkey='+k+'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='
+new Date().valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
'" type="text/javascript" charset="utf-8"></sc'+'ript>')})();
}
</script>
<script>
if(!CTIsPlayback)
   utmx("url",'A/B');
</script>

Note: The ID in the code varies per test and needs to be changed to the ID you have been provided by from Google Website Optimizer.
This will run Google Website Optimizer A/B testing in any normal use of the page and not run it when doing ClickTale playback.

Google Website Optimizer for Multivariate testing

When using GWO Multivariate testing and ClickTale without correct code customization, the playback of the recorded pages and aggregation reports will not be accurate and will probably not display the combination that the user saw.

With the following integration, you will be able to see the correct variation for each visitor and also aggregate each variation separately in Heatmaps or Form Analytics reports.

Introduction

Let's assume we are integrating with a page that has 3 sections and 2 variations for each section.

Finding your GWO experiment ID

The experiment ID is the alphanumeric string immediately following experiment=. For example, in the URL:

https://www.google.com/analytics/siteopt/mv_prepare_install?experiment=AgAAAIuElaplZk1wAusMbP0ZUYo&account=00000001
the experiment ID is AgAAAIuElaplZk1wAusMbP0ZUYo.

Accessing specific combinations by using special URL params

To view a specific combination you can append the following string to your test URL:

#utmxid=Experiment_ID;utmxpreview=Combination_number

Combination_number should look similar to this in our case: 1-0-1 (2nd variation in first section, 1st variation in second section and 2nd variation in third section)

For more information please see http://www.google.com/support/websiteoptimizer/bin/answer.py?hl=en&answer=63841

Adding customized code to you page

This is done to save the combination that the user sees on the page to be used later for playback.

There are two different scripts depending on whether you have one multivariate test running on your site, or multiple tests running simultaneously.

With one multivariate test on your site

Note: This script can be part of the bottom script that is injected to the page in case you are using a ClickTale integration module.

Add this JS code right after the ClickTale bottom part script: (replace the Experiment_ID with your experiment ID)

<!-- ClickTale-Recording integration start -->
<script type="text/javascript">
	 if (typeof ClickTaleField == 'function' && utmx("combination_string"))  {
   		ClickTaleField('CT.InitialLocationParams', "#utmxid=Experiment_ID;utmxpreview=" + utmx("combination_string"));
   		ClickTaleTag('GWO: ' + utmx("combination_string"));
   	}
</script>
<!-- End Clicktale-Recording Integration End -->

Note: It’s best to keep the experiment ID in a config file along with the unique identifier for the experiment that you can see in the control script (....var k='2376510756',d=....). This way you will not need to copy paste it from page to page and so it will be convenient to use the same code for more than one multivariate experiment running at the same time on different pages.

With multiple multivariate tests on your site

If you have more than one multivariate test on your site and you are using ClickTale integration module or if you don’t want to change the tracking code each time you create another test please use the method explained below:

By using the code below you can define all the experiment IDs for all the MVT testing in your site. You will not need to change the code on the page if this is populated for example from your config file.

Add this JS code at the top part of the page (best place is to put it next to the ClickTale top script):

<!-- ClickTale-MVT experiment ID declaration start -->
<script type="text/javascript">
var Id2ExperimentId={'k1':'ExperimentID1','k2':'ExperimentID2'};
</script>
<!-- ClickTale-MVT experiment ID declaration end -->

Add this JS code right after the ClickTale bottom part script:

Note: This script can be part of the bottom script that is injected to the page in case you are using integration module.

<!-- ClickTale-Recording integration start -->
<script type="text/javascript">
var detectk = "";
    try {
   	 for (var i=0; i<document.getElementsByTagName("script").length; i++) {
   		 var scr = document.getElementsByTagName("script")[i];
   		 var content = scr.innerHTML;
   		 if (content.indexOf("k='") > -1)  {
   			 var match = /\(function\(\){var k='(\d+)',d=document,l=d\.location,c=d\.cookie;/.exec(content);   
   			 if(match && match.length >= 2) {
   				 detectk = match[1];
   			 }
   		 }
   	 }
    }
    catch (e) { detectk = ""; }
    if (detectk != "") {
   	 if (typeof ClickTaleField == 'function' && utmx("combination_string"))  {
   		 ClickTaleField('CT.InitialLocationParams', "#utmxid=" + Id2ExperimentId[detectk] + ";utmxpreview="+utmx("combination_string"));
   		 ClickTaleTag('GWO: ' + utmx("combination_string"));
   	 }
    }</script>
<!-- End Clicktale-Recording Integration End -->