Website Optimizer Asynchronous Integration with Google Analytics

Best practices for running a testing experiment is always to integrate the test data into your web analytics tool for further analysis.

Below you find my code examples for a multivariate test where the different Website Optimizer variations are tracked as Custom Variables in Google Analytics.

This method is a rewritten version of An Update to the Erik Vasilik's "Poor Man's GWO/Analytics Integration": Using Custom Variables. Codes for A/B testing is different, and that is also explained in the article.

Although I have used this code successfully in testing, I really recommend that you Test your test first to see if there are something wrong with the codes or the implementation.

Test Page Code

Below you find the scripts for the test page. The Google Website Optimizer Control script isn't changed from the original script, but the Google Website Optimizer Tracking script is different. Because of this the validation within Website Optimizer will fail. Just ignore the errors shown there.

Replace XXX with your GWO and GA ID codes/numbers.

Remove formatting from Code

  1. <!-- Google Website Optimizer Control Script -->
  2. <script>
  3. function utmx_section(){}function utmx(){}
  4. (function(){var k='XXXXXXXX',d=document,l=d.location,c=d.cookie;function f(n){
  5. if(c){var i=c.indexOf(n+'=');if(i>-1){var j=c.indexOf(';',i);return escape(c.substring(i+n.
  6. length+1,j<0?c.length:j))}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;
  7. d.write('<sc'+'ript src="'+
  8. 'http'+(l.protocol=='https:'?'s://ssl':'://www')+'.google-analytics.com'
    +'/siteopt.js?v=1&utmxkey='+k+'&utmx='+(x?x:'')+'&utmxx='+(xx?xx:'')+'&utmxtime='
  9. +new Date().valueOf()+(h?'&utmxhash='+escape(h.substr(1)):'')+
  10. '" type="text/javascript" charset="utf-8"></sc'+'ript>')})();
  11. </script>
  12. <!-- End of Google Website Optimizer Control Script -->
  13. <script type="text/javascript">
  14. var _gaq = _gaq || [];
  15. _gaq.push(['_setAccount', 'UA-XXXXX-1']);
  16. // GWO code
  17. _gaq.push(['gwo._setAccount', 'UA-XXXXX-2']);
  18. _gaq.push(['gwo._trackPageview', '/XXXXXXXX/test']);
  19. // End GWO code

  20. var gwoVar = utmx("combination_string");
  21. if (!gwoVar) {
  22. gwoVar = "inactive";
  23. }
  24. _gaq.push(['_setCustomVar',1,'GWO_Test-Name', gwoVar, 1]); // Track GWO as Custom Variables in GA
  25. _gaq.push(['_trackPageview']);
  26. </script>
  27. <script type="text/javascript">
  28. (function() {
  29. var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  30. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  31. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  32. })();
  33. </script>
  34. <!-- End GWO + GA Script -->

Conversion Page Code

Remove formatting from Code

  1. <!-- Google Website Optimizer and Google Analytics for the Goal page -->
  2. <script type="text/javascript">
  3. var _gaq = _gaq || [];
  4. _gaq.push(['_setAccount', 'UA-XXXXX-1']);
  5. _gaq.push(['_trackPageview']);
  6. // GWO Conversion code
  7. _gaq.push(['gwo._setAccount', 'UA-XXXXX-2']);
  8. _gaq.push(['gwo._trackPageview', '/XXXXXXXX/goal']);
  9. // End GWO conversion code
  10. </script>
  11. <script type="text/javascript">
  12. (function() {
  13. var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  14. ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  15. var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  16. })();
  17. </script>
  18. <!-- End GA + GWO Script -->

Page Sections

The Page Sections script in Website Optimizer is not changed. Below you see an example of this script.

  1. <script>utmx_section("Headline")</script>
  2. <h1>Buy This Product!</h1>
  3. </noscript>

Successfull Web Site Testing Practices

The technical implementation and running the test isn't difficult. But that is also a reason for failing in testing, processes and hypothesis are missing. If you haven't done so before, I highly recommend to establish testing processes. Eric T. Peterson's 10 tips for successful testing shown below is a good start.


Du kan følge kommentarer til denne posten med RSS. Du må ha javascript aktivert for å kunne kommentere. Tilbaketråkk er deaktivert.

Tags : , , , ,

I have updated the code to the version I'm using now.

Happy testing, optimizing and analyzing.
  • toni
  • 28.06.2011 14:44:20
hi,
where do you place the code? <head>, <body>, before </body>?
is the order important?

You are calling 1 x

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

google suggest 2 times. Where is the difference?
Hi Toni.

Place the code between <head> and </head>.

I'm only calling ga.js once because - well - you only need to call the script once. ga.js is also aggressively cached so it will not be loaded twice even if you call ga.js twice as the official script from Google do. In fact, it will typically not even be loaded once, because in most cases it has already been loaded earlier by some other page.

So why do Google call ga.js twice? I can only speculate, but many of the example scripts from Google is designed to be independent and easy to deploy. The script from Google is easier to deploy than mine, but it hasn't integrated Google Website Optimizer data into Google Analytics.

Eivind

XClick to move the comment field