Google Website Optimizer is absolutely incredible. If you do any split testing at all, you can recognize the absolute gem that is the optimizer platform offers. Setting it up to work with WordPress does take a little bit of work but once you establish this framework, subsequent efforts will become very easy.

Incidentally, you can’t use this to split test Adsense because Adsense won’t let you track clicks in this way. To split test Adsense, using a simple rand() function and an if clause is sufficient.

There are three steps to the process:

  • Post Modifications: This section will explain what you need to do on individual posts to get tracking enabled.
  • Header Modifications: For the Optimization code to work, there is a javascript snippet you need to add to the header of each post. This snippet is custom to each test, so we need to pass some variable around to set the test number variable.
  • Footer Modifications: Much like the header code, there is footer code that serves the same function.

Post Modifications

In the Custom Fields I create two new variables:

  • showOptimizer – This will be set to 1 whenever I want the optimizer code to be included for a post. By default, when it’s not set, it’s a 0.
  • GWOtestNumber – This is the Google Website Optimizer test variable number. When you setup your test, one of the steps will include all the code you need to put on your site. Look in the Conversion Script (the last block of code) for something that says _trackPageview(“/XXXXXXXXX/goal”); – that’s the number you set here.

These variables will tell other code snippets in your header.php and footer.php how to create the Control Script (header) and Tracking Script (footer).

Tracking User Actions: In the post itself, you need to add
onClick="javascript: pageTracker._trackPageview('/XXXXXXXXX/goal');"
to each click you want to track (without the carriage return/line wrap, it should be one line). Replace XXXXXXXXX with the GWOtestNumber.

For example, on a link the link will now look like this:
<a href="http://www.google.com" onClick="javascript: pageTracker._trackPageview('/XXXXXXXXX/goal');">Google.com</a>

Identify Split Test page Sections: Finally, throw this code around the section(s) you’re going to be split testing. This goes in the beginning:
<script>utmx_section("Test Section A")</script>
And this goes after it:
</noscript>

Change the text (Test Section A) to something that makes sense to you.

Later, through the GWO system, you can create the other versions.

Header Modifications

The header is getting a modified version of the Control Script, with the underlined section of the original replaced with an echo of a post Custom Field. Confirm the code is correct with the code you get from Google Website Optimizer, they may have made some changes. You’re replacing the K test number value with the one you set as a Custom field, then adding some conditional code around it to only display this code if you are running optimizations on it.

<?php
$showOpt = get_post_custom_values('showOptimizer');
if ($showOpt) {
$GWOTestNumber = get_post_custom_values('GWOtestNumber');
?>
<script>
function utmx_section(){}function utmx(){}
(function(){var k='<?php echo $GWOTestNumber[0];?> ',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>
<? } ?>

Footer Modifications

The footer is getting a modified version of the Tracking Script, with the bolded section of the original replaced with an echo of a post Custom Field. Again, confirm the code is correct with the code you get from Google Website Optimizer, they may have made some changes.

<?php
$showOpt = get_post_custom_values('showOptimizer');
if ($showOpt){
$GWOTestNumber = get_post_custom_values('GWOtestNumber');
?>
<script type="text/javascript">
if(typeof(_gat)!='object')document.write('<sc'+'ript src="http'+
(document.location.protocol=='https:'?'s://ssl':'://www')+
'.google-analytics.com/ga.js"></sc'+'ript>')</script>
<script type="text/javascript">
try {
var pageTracker=_gat._getTracker("UA-4422524-4");
pageTracker._trackPageview("/<?php echo $GWOTestNumber[0];?> /test");
}catch(err){}</script>
<?php } ?>

It sounds complicated but if you walk through it step by step, it should work. Now, whenever you want to do some GWO testing on a particular page, add/set showOptimizer to 1, add the GWOtestNumber, and set the brackets around your test area and you should be ready to go.

Let me know if you run into any problems or see an error in the code snippets.

RSS Subscribe Like this article? Get all the latest articles sent to your email for free every day. Just click "Subscribe" and enter your email. Your email will only be used for this daily subscription and you can unsubscribe anytime.

6 Responses to “Tutorial: Integrating Google Website Optimizer and WordPress”

  1. Jeremy Says:

    This is fantastic. I searched the web for nearly an hour and couldn’t find any good explanation as to how to do this with WordPress other than a basic plugin that didn’t really accomplish what I was hoping.

  2. DR Says:

    Jim, excellent tutorial on a difficult subject. I’ve used GWO with WordPress, but it’s always been a big pain. I’ll definitely try your suggestions. One question I have is whether you can use your approach to test changes in the sidebar? That’s always stumped me because the sidebars generally are not page specific. Maybe it’s as simple as using some conditional php to insert the utmx script into the sidebar.php, but things start to get complicated.

  3. DR Says:

    Jim, for reasons unknown, when I add the around the sections of the post I want to change, WordPress won’t save the post correctly. Have you experienced this?

  4. jim Says:

    Are you using the Rich text editor or the HTML one? I am using the raw HTML one, perhaps that’s it?

  5. DR Says:

    Jim, good thought, but I use raw html, too. I think it has something to do with Media Temple, as I can get it to work on my sites hosted elsewhere. I’ve contacted MT. They first suggested it was php safe mode, but that turned out not to be correct. Interestingly, I can use the script directly in php files, which works fine for the sidebar. But putting the script directly in posts is still causing the problem. I’ll let you know if I find a solution.

  6. jim Says:

    There shouldn’t be any PHP in the post itself, it’s all javascript there (recording the click and then the script around the content you want to swap), perhaps that’s the problem?

Leave a Reply