When you set up an AB Experiment through Google Website Optimizer, it expects you to have a few separate pages:
- The Control Page
- The Variant Pages
- The Conversion Page
For most websites this isn’t a problem, but what if you’re unique? What if you don’t have a typical conversion page to thank the user?
Don’t fret – we’ll show you how to trigger that conversion script if your end goal is a download, redirect, or something else non-standard. You can even use these techniques to confirm your visitors are actually reading your copy.
Triggering On Click
If your goal is to have your visitors download a file or submit a form external to your site, triggering the conversion code on click is your solution. Let’s first look at the standard conversion script given by Google:
<!-- Google Website Optimizer Conversion Script -->
<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 gwoTracker=_gat._getTracker("UA-XXXXXXXX-X");
gwoTracker._trackPageview("/XXXXXXXXXX/goal");
}catch(err){}</script>
<!-- End of Google Website Optimizer Conversion Script -->
It’s important to know that only the code in the try-catch block actually triggers the conversion, the prior code is just setup. If we load the setup code normally, but only trigger the conversion code on a specific event then we have a powerful mechanism. Here’s an example:
Put this in the head:
<!-- Google Website Optimizer Conversion Script -->
<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>
<!-- End of Google Website Optimizer Conversion Script -->
<!--Create our own function that only reports the conversion when we call it -->
<script type="text/javascript">
function reportConversion() {
try {
var gwoTracker=_gat._getTracker("UA-XXXXXXXX-X");
gwoTracker._trackPageview("/XXXXXXXXXX/goal");
}catch(err){}
} return true;
</script>
Set an event handler:
<input onClick="return reportConversion()" type="button" />
Note that you can use this for events other than onClick, such as onMouseOver, onSubmit, etc. Make sure to have the event handler return true, otherwise the action following it (the download, the form submission, etc) will not execute.
Triggering On Redirect
What if your goal is to have your visitors visit another site, or go to a page that you don’t have code access to? Simple – create a redirection page that will trigger the conversion script, then redirect. Change your links to point to this redirection page. Use the following code as an example:
Redirection Page:
<html>
<head></head>
<body>
<!-- Track the conversion...(this code not modified from Google) -->
<!-- Google Website Optimizer Conversion Script -->
<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 gwoTracker=_gat._getTracker("UA-XXXXXXXX-X");
gwoTracker._trackPageview("/XXXXXXXXXX/goal");
}catch(err){}</script>
<!-- End of Google Website Optimizer Conversion Script -->
<!-- Now javascript redirect them out -->
<script type="text/javascript">window.location='https://www.paypal.com/…';</script>
</body>
</html>
Some people rely on using a meta-refresh redirect, but the above method is more reliable and it gets recognized by Google’s verification process when making sure you have the code installed properly.
Triggering On Delay
Many of you know that a one second visit to one of your pages probably isn’t productive. That’s why it can be useful to track if the visitor stayed on your page for at least a specific amount of time. Using the same approach as our ‘On Click’ technique above, we can do just that. Use the same block of code in the head, but instead of calling the reportConversion() function on an event, just set a delay:
<script type="text/javascript">
setTimeout('reportConversion()', 5000);
</script>
The time is measured in milliseconds, so 5000 equals 5 seconds. This will show you that your traffic is actually reading through your site, as opposed to just quickly scanning and leaving.
More applications
I know you’re thinking – “Well great for A/B testing, but I run multivariate experiments.” No worries! You may have noticed that the Conversion Page scripts use the same code (except for the unique ID’s), so feel free to use these same techniques.
Happy converting! And don’t forget to TEST, TEST, TEST!
Shane,
Thanks for this – I’m trying to set up my first multivariate test using GWO – your tutorial makes more sense than most of what I have found for tracking onClick. However, I’m still a bit confused.
I find that most of the instructions I’m coming across assume far more knowledge of scripts and customizing them than I have – and I’m pretty technical.
How exactly would I use this to track a click on a PayPal button, since I don’t have a conversion page to put the code on? Which page does this go on?
When you say “Set an event handler” where does that go? Is any of this supposed to be inserted into the form code that PayPal gives us for a purchase button?
Thanks in advance for your time.
Hi Cynthia –
Glad to hear it! If you wanted to track a click on a Paypal button, go ahead and try copying the first example above – loading the google optimizer code and then creating the reportConversion() function. The code would go on the page that your paypal button is on.
Setting an event handler is done by this line of code: onClick=”return reportConversion()”
The “event” is ‘onClick’, and the “handler” is the ‘reportConversion’ function that’s being called.
This should be on the submit button that Paypal gives you.
Hope that helps – please don’t hesitate to let me know if you need further assistance!
Thanks so much for this! If you want to test multiple things like
the time spent on the page
an actual conversion page
etc
do i need to create different test for each different thing I want to test? Or is there a way to test them all at once??
Thanks, Shane – Naomi Niles pointed me to your tutorial as well and helped me understand where in the PayPal button code I should set the event handler.
Not everything is validating in GWO, but I’m going to give it a shot anyway. I’m using the Google Website Optimizer for WordPress plugin.
Great to hear – Yeah, it probably won’t validate in GWO since we altered their code a tiny bit. Just be sure to give it a test when you’re done. Good luck with everything!
Hey Christina – Happy you enjoyed it! Unfortunately, I’m not quite sure what you’re asking.
The time spent on a page isn’t exactly something to test, it’s simply the trigger that marks a conversion. And the conversion page isn’t being tested either, it’s the page that normally has the code on it that reports a conversion. What is being tested is the page that inspires the user to make your desired goal.
Does that clear things up? If not, let me know!
Thanks, this is just what I was looking for. Shame Google can’t write guides as good as this!
hello, thanks for your tips,
i wonder, what code should i put in this row : gwoTracker._trackPageview(“/XXXXXXXXXX/goal”);
what code should i put into XXXXXXXXX ?
thank you
Hi Rio –
When you get your code from google optimizer there are 2 IDs that it uses to track your pages. Check that code and replace the XXXXXX with those values.
If you’d like feel free to post your code and I’ll point out what it should be.
Thanks
These tips are great and I wanted to use them, however google has altered the code.
Is it possible to update the scripts on this page?
/* */
Hi,
Is it possible for me to create two versions of my home page to test? I currently have a high bounce rate on the index.asp and would like to change layout and content on this and save it as a different version.
I just want to test if my bounce rate changes and not the converstion rate
Hi Rene –
I just created a new test with Google Website Optimizer and the code appears the same. Can you post the code you’re seeing, minus any id’s?
Thanks!
Lee –
Excellent question. I would suggest creating two home page variants and setting them up in Google Website Optimizer so that it splits the traffic (don’t worry about a conversion page). Then you can monitor the bounce rate using Google Analytics (just make sure your analytics code is after the optimizer code on the baseline). If that doesn’t work, the next approach to try (although cumbersome) would be to use the onClick method described in this post on every link.
Good luck!
Thanks very much Shane from your instruction,
I have similar situation as Lee, I wasn’t sure if I should measure the bounce rate or the click conversion on homepage.
When you said don’t worry about conversion page, what the URL that we put into the conversion page filed? It’s a dummy URL page?
And If I decide to use the onClick method for links on homepage. The conversion page will contain just the Conversion Script, isn’t ? no actual content in there. Sorry if these are stupid questions, I’m quite new to this.
Hey Sammy –
Yes, Google asks for you conversion URL just to verify that you installed code correctly – after the setup process it isn’t used anymore. Go ahead and put in a dummy URL. It will tell you there were problems, but if you continue anyway there will be no side-effects.
Hi Shane,
I used your article to set up a test on two pages and compare bounce rates
I then did google a some keyword to make sure Google would show me one page with one browser and the variation with another browser, so, it’s working.
My concern is: what about duplicate content ?
Will the original page be penalized because it has the same content then the variation ?
Hi Giu –
Great point. Yes, you can have duplicate content issues, but there are steps you can take to avoid this.
See this link for more details:
https://www.google.com/support/forum/p/websiteoptimizer/thread?tid=3b02c74edaeaab25&hl=en
Thanks!
HI Shane,
Great post! Google changed the conversion code a bit. An updated conversion without “conversion page” would be most appreciated.
New Code Below
/* */
Oops! I see this is for Google Optimizer conversion and not AdWords conversion. Still a great post!
Thanks Shane
Hi Shane,
Excellent, excellent article.
So, what would you do if you had a page with multiple click items as conversion events, but you want each of them tracked separately just like pages in an A/B test?
Or, if you have multiple conversion pages and each should be counted separately just like pages in an A/B test?
Many, many thanks, Shane.
Thanks for the comments, Eric!
Good question – To my knowledge, you aren’t able to track multiple goals for GWO. Someone proposed a workaround for this, but it doesn’t seem to be very successful: https://tech.groups.yahoo.com/group/webanalytics/message/23401
You may want to consider tracking this in Google Analytics. I know you can set up multiple goals in there, and further your analysis by reporting within funnels. That’s beyond the scope of this post, but you may be able to mimic some of the same concepts here, but calling the tracking function on an action instead of on load.
Hope that helps!
I see how this works with a form, adding the onlick to the input line, but I’m not quite getting how to do the onclick function on a link.
Where does the onclick code go in the
Thanks!
Sorry about the above, i put in href code and it converted me into html! I meant to say where does it go in an href ?
I did find how to do the link on a google page https://www.google.com/support/websiteoptimizer/bin/answer.py?hl=en&answer=93181
But they are saying the modified code has to be on every page you are linking to, not just the A and B pages with the links. Is that correct? That is a lot more work obviously.
I think I’m close on this but you are showing this as the onClick code:
onClick=”return reportConversion()”
and google help is showing:
onClick=”doGoal(this);return false;”
Anybody know the difference?
Also, just to be totally clear, you make a dummy page to get past the google error checking, put the code in that dummy page, but it doesn’t do anything. Right?
Well I saw you guys were naming things differently so I tried it one time with exactly their code as they say to do it on that page mentioned, and another time with your code exactly as you show above, and both time I can’t get past the error checking.
(Originally I was doing a combination of the two and I got past the error checking but no conversions were being tracked. I notice that you are calling it conversion scripts and google is calling it tracking script and I don’t know what the difference is.)
Hi Cindi – That google link gives good info. You don’t have to modify code for every page, just wherever the link is that you want tracked.
The doGoal and the reportConversion do exactly the same thing…google just has a different name for it. Just pick one and it should work.
You don’t even need to make a dummy page to get past the google error checking. You can just choose to ignore the warning and proceed anyway.
Hope that helps!
Unfortunately it does not allow you to go to the next step if you don’t pass error checking. Unless you can tell me a way to do it.
This is making me crazy because I tried the code exactly as you have it here, it didn’t work. Then I tried the code all the way it showed on that google page, it didn’t work. Lastly I took the code that is generated in my account and inserted the code they said needed to be inserted, and that didn’t work either.
But it’s almost impossible to debug because their error checking isn’t consistent. One time it will tell me the code works and then I will run it again with the very same code and it will tell me it doesn’t validate. Is there some type of delay, you have to wait a certain amount of time after changing a page? It’s maddening.
Hey Cindi – How frustrating. I don’t think there is a delay. In the past, Google would give you an error message saying that the code isn’t installed correctly, but there was still a way to ignore the warning and continue to starting the test anyway. If they have changed this, then I’d suggest following up with them, especially since that link you provided told us to do just that. Good luck!
Validation is very frustrating. I agree. I believe you can just feed them any page to validate with the proper code on it (just save a blank HTML page with your tracking code in the head). This will allow you to start the test. Hope this helps, nice article.
I supplied a dummy page with valid html for my conversion page which validated fine.
However, having now checked the report results a few days later, its logging visitors but no conversions even though my contact form was filled in (which was the conversion). I suspect this is because i supplied a dummy URL as the conversion page, which doesnt match where the GAQ data is being pushed from.
Any ideas on what URL i should be supplying as the conversion page since im using javascript events as the conversion?
Or do you think perhaps the problem im experiencing is related to something else?
Hi Khuram – My hunch is that the problem is related to something else. Google just uses the conversion url as a way to double check you installed the code, and shouldn’t be using it to count conversions.
Most people have this problem when their pages are on different domains. If that is the case, make sure you’re using the cross domain google optimizer scripts.
Good luck!
Hi Shane,
Just wanted to thank you for putting this together, helped me a lot!
I used your “On Redirect” method, I’m using an external checkout page.
I also wanted to add that I’m using WordPress and as far as adding different tracking codes to the header of each variation, WordPress has one universal header for every page/post. But if you search for “Google Optimizer for WordPress”, you’ll find a plugin that adds the proper fields to your page or post editing screens and you can add the specific tracking codes to your pages.
It worked great for me and combined with your redirect method, everything worked out perfectly and validated. 🙂
Cheers,
Colton
Hi Shane, thanks a lot for putting this together. We really appreciate it.
I am trying to run a multivariate test on a same page to test my two variation of social icons to see which versions are getting more clicks.
I followed up your tutorial but I am still confused about two things.
First, it looks like Google changed the code. It only provides me one snippet and it’s this one :
!– –>
function utmx_section(){}function utmx(){}(function(){var
k=’xxxxxx-x’,d=document,l=d.location,c=d.cookie;
if(l.search.indexOf(‘utm_expid=’+k)>0)return;
function f(n){if(c){var i=c.indexOf(n+’=’);if(i>-1){var j=c.
indexOf(‘;’,i);return escape(c.substring(i+n.length+1,j<0?c.
length:j))}}}var x=f('__utmx'),xx=f('__utmxx'),h=l.hash;d.write(
'’)})();
utmx(‘url’,’A/B’);
Based on https://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/websiteoptimizer/techieguide.pdf
I am not sure what portion of the code to separate and wrap in a function to call from the on click event.
Second, I am considering just presenting two different styles of social icons. I uploaded them to the server but I am clueless how to make google serve one or another and only place the onclick event on the one that I think conversion happens. (Only one variety should call the conversion method)
Am I completely off the track about this? I would appreciate any response when you have time.
All the best.
Hi ilteris!
Thanks for the kind words. You’ve noticed that Google has changed quite a bit since this article was written. In fact, they don’t even call it ‘Google Website Optimizer’ anymore (now ‘Content Experiments’).
I have not had the chance to test this out with the new code, but we’ll try and examine it sometime soon and post a follow-up article.
Testing two different styles of social icons is a great idea. I’d suggest posting to a forum site that may be able to give you specific help on your current situation. Here’s a site that may help: https://stackoverflow.com/questions/tagged/google-experiments
Good luck!