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.

16 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. The Secret to Painless Google Website Optimizer:

    [...] Read more: The Secret to Painless Google Website Optimizer [...]

  7. Ole Gregersen:

    But you don’t really explain why? Why is it a secret, whats the difference using CSS/JS instead of HTML?
    What part of your original page do you but the GWO tags around? - just an empty one?

    /ole

  8. James Paden:

    Sorry Ole, you’re right. That wasn’t very clear.

    The main reason you want to do it, as I alluded to in the third paragraph, is to test the same section of your website across multiple pages. For example, you with CSS you can much more easily make changes across all your product pages than you could with HTML (depend, of course, on what you were trying to test).

    I also prefer CSS over HTML testing because with CSS I can still edit the HTML to fix small mistakes in my code, without redoing/restarting the whole test.

    And yes, I wrap the GWO tags around nothing, just emptiness. I typically put the GWO tags at the top of the page.

  9. Ole Gregersen:

    Thanks, that made it a lot clearer for me. I actually had the opposite problem, trying to test individual images shown in a generic template across the site. I ended up using a script that parsed the URL and making an IF clause to show the goal script. Not sure it really works :-)

  10. Web Design Garage | BUKU PDF:

    [...] The Secret to Painless Google Website Optimizer (xemion.com) [...]

  11. Super Fast Way to play with HTML, CSS, and JS Without Hosting « Simply Hobbyist:

    [...] The Secret to Painless Google Website Optimizer (xemion.com) [...]

  12. TBS Part 1 : Creating your main website « End of Line Magazine:

    [...] The Secret to Painless Google Website Optimizer (xemion.com) [...]

  13. Online Programming Assignment help BLOG Australia | Locus RAGS | Locus RAGS:

    [...] The Secret to Painless Google Website Optimizer (xemion.com) [...]

  14. What is Pinterest? « Jackie Paulson~Writer:

    [...] The Secret to Painless Google Website Optimizer (xemion.com) [...]

  15. What Do You Think?