The Secret to Painless Google Website Optimizer

For me, Google Website Optimizer (GWO) has been the best new tool or service launched in the last three years. It has literally created tens of thousands if not hundreds of thousands of dollars in additional revenue for my company and my freelance clients. That said, I initially found GWO very difficult to implement. Essentially, GWO works through code such as this:

<script>utmx_section("Your First Test")</script>
<!-- YOUR HTML GOES HERE -->
</noscript>

Ignore the strange , that’s just the way GWO works. Once you’ve implemented the script, you then upload alternative versions of your HTML to the GWO website. GWO will insert the alternative versions of the HTML randomly to your visitors to test which versions perform better. You can test page layout, button color/sizes, ads, textual content, navigation structure or anything else you can imagine.

The problem occurs when you want to test dynamic pages or the same section of HTML across multiple pages. For example, I want to test a different product page layout across my site (because no single product gets enough traffic to reliably traffic). I cannot insert HTML into the GWO script because the HTML will be different on every page.

The secret (which many of you may have already figured out, but it took me a while so hopefully this post will help some of you) is to insert CSS or Javascript ONLY into your GWO script. View GWO as a rotating CSS/JS file, not as actual HTML. This may involve using CSS to hide or change various aspects of your page and I’ve even used GWO to alter the HTML structure via Javascript on pages I did not have full control over. Before, your code might have been:

<script>utmx_section("Your First Test")</script>
<h1>Large Product Title</h1>
<img src='bluebutton.gif'>
</noscript>

Now you can do the below and apply the same test to every product:

<script>utmx_section("Your First Test")</script>
<style type='text/css'>
.producttitle {
font-size: 24px;
}
</style>
<script type='text/javascript'>
document.getElementById('addtocartbutton').src = 'bluebutton.gif';
</script>
</noscript>

This is a very simple example, but the power of this concept is that you can now test large sections of your entire site. You can use CSS to move switch the positions of content sections or hide all the product prices for your category pages (early testing shows this actually improves the conversion rates on one of my sites…).

If you have any questions about GWO implementations, please ask in the comments and I’ll be happy to assist.

5 Responses:

  1. Website Optimization:

    Great article to make things easier for website optimization. Thanks!

  2. Extra Revenue Source #1: Conversion Optimization:

    [...] 64 Elements to Test, Test Length Calculator, 108 Ways to Boost Your Website’s Profit, The Secret to Painless Google Website Optimizer [...]

  3. MN Web design:

    Thank you very much, this article was very helpful in more fully understanding the GWO…

  4. st paul windows:

    This is actually a great tool. We have seen it work in our business and has brought us new revenue streams that were not there before. Cool stuff.

  5. Minneapolis Windows:

    Oh I forgot to mention that we have boosted on marketing dollar ROI by 45%

  6. What Do You Think?