Google’s website optimizer and ajax

A couple of weeks ago Google launched their Website Optimizer product out of beta – it is now a fully fledged standalone product (previously you had to use it via an Adwords account). I was playing with it today because I wanted to make sure that we could test with dynamic content.

A typical A/B or multivariate test might take a page portion and then serve up several static variations. Sometimes static variations aren’t good enough though. Most eCommerce websites are database driven and use templates for product pages that are populated with information specific to that product. The template knows what product info to load in because the page might be accessed via a URL with identifiers in the query string: e.g. http://somesite.com/product.html?productid=1234

This product page knows that it has to load up the details for product 1234.

When you want to start doing more complex A/B tests, where the data for your variations also comes from the database, you have a slight problem in that the alternative content for the test is managed in the website optimizer interface – how do you get dynamic content out of your database for your test variations?

To get around this, you can use Ajax to grab the dynamic content relevant to that particular product page, and use the Website Optimizer to simply modify parameters in the Ajax call. This might be implemented by creating four server-side functions that are accessed by Ajax, each returning a variation on the original test content.

In Website Optimizer, when you declare which part of the page you are testing, rather than wrapping the content section, wrap the piece of Javascript that sets which function the Ajax request will call (or Javascript that sets an Ajax parameter):

<script>utmx_section(“AjaxSection”)</script>
<script>aj_fn = “variation1”;</script>
</noscript>

Then, when you proceed through the experiment designer to add new variations, just add:

<script>aj_fn = “variation2”;</script>

Where “variation2” is the name of the function the Ajax will call to return the “variation2” content.

Alternatively, as mentioned previously, instead of creating a function per content variation just alter an Ajax parameter so that the function returns different content.

This combination of Website Optimizer and Ajax makes for an extremely powerful technique. It’s pretty easy to implement too.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: