I do a lot of multivariate testing on high-traffic websites with Optimizely, a powerful and easy-to-use web application.

This video explains how to use Optimizely to create a basic multivariate test (relying on javascript to push events and create variants). Some of that code is also posted below.

Tracking Events

I fire off a tracking event for anything I want to track on the page. My primary use for this is to measure clicks, and to see my variants have any effect on this (e.g. measuring clicks on a conversion module).

Here’s some of the example code I used on WP Theming to measure clicks on the different sections of the page. I put this code under “Options -> Global Javascript” in the Optimizely editor:

window.optimizely = window.optimizely || [];

$("#masthead a").live("mousedown touchstart", function() {
     window.optimizely.push(['trackEvent', 'masthead']);
});

$(".hentry a").live("mousedown touchstart", function() {
     window.optimizely.push(['trackEvent', 'hentry']);
});

$("#comments a").live("mousedown touchstart", function() {
     window.optimizely.push(['trackEvent', 'comments']);
});

$("#colophon a").live("mousedown touchstart", function() {
     window.optimizely.push(['trackEvent', 'footer']);
});

In this example I am tracking any clicks on any link in the #masthead, .hentry, #comments, and #colophon. You’ll also need to add a goal for each of these track events if you want to see it in the results dashboard.

To set up a new goal, click “Set Up Goals” in the Optimizely editor, then “Add a Goal”, then “Create a New Goal”. Under “What to Track”, select “Custom Event”. You can name your goal whatever like, but make sure the “Custom Event to track” matches trackEvent you’re pushing in the javascrip (e.g. masthead, hentry, comments, footer).

Create a Variant

To create a new variant, just click “Add Variation” from the Optimizely editor and name it. Then click the “Edit Code” tab at the bottom of the screen, and put in whatever jQuery you want to alter the appearance of the variant. In the WordPress.com example, I used:

$('#home-signup h4').text('Free Account');

Using Optimizely with WordPress

Optimizely has their own plugin to embed the code, but as I mentioned in the screencast, it’s a bit of a blunt instrument.

If you’re comfortable editing code, I’d probably just enqueue it yourself and only load it on the pages you need:

function prefix_optimizely() {
	if ( !is_single() ) {
		wp_enqueue_script( 'optimizely', 'http://cdn.optimizely.com/js/xxxxxxx.js', array( 'jquery' ), false, true );
	}
}
add_action('wp_enqueue_scripts', 'prefix_optimizely');

This above code (for example) would just load the Optimizely snippet on single post pages.

Is Optimizely Worth It?

If you sell any sort of product and have a good amount of traffic to your site, I think it’s worth investigating how users interact with your site. If you could change the color of a link, move a button, or use a different image on your home page, and that led to a 5% increase in sales, would that be worth it?

Sidenote: If you need help setting up variants in Optimizely for your WordPress site, get in touch.