How To Install Optimizely on WordPress

If you’ve spent any time working in digital marketing or analytics, you’re already familiar with the power of A/B testing.  A/B testing (and it’s more complicated brother multivariate testing) allows site owners to find out optimal combinations of site design and content for their visitors without having to directly ask/inconvenience the user.  All it takes to improve a website is forming a hypothesis of something that could work better, creating multiple versions of a page (or other content), setting up the experiment…and the money flows in faster than you can count it.  At least, that’s the hope!

At the enterprise level, there are plenty of testing tools such as Omniture Test & Target, SiteSpect, WebTrends Optimize, and Monetate, but these tools are cost-prohibitive to all but the largest websites.  Google provides Google Website Optimizer (for free!), but that has often been viewed as difficult to manage, especially for dynamically created websites.  That’s where Optimizely comes in.

Optimizely’s tagline is “A/B testing software you’ll actually use”, a reference to complication (and I think indirectly, the expense) of other testing tools in the marketplace.  Optimizely claims is that you can start testing after adding a single line of JavaScript code…and here’s how you do it.

Getting Started – Sign up

The first step to installing Optimizely is to sign up (obviously).  A 30-day trial is provided, but you do need to put in a credit card to activate the free trial.

After doing so, when you click on the “Implementation” button, a pop-up shows you your customized “single line of code” to implement.

Clicking on the “Implementation” link gives you your JavaScript code

Installing Optimizely code snippet in WordPress Header

When you click on the ‘Implementation’ link, you’ll get code that looks like the following:

<script src="//cdn.optimizely.com/js/38######.js"></script>

What we want to do is install this code in our WordPress header, pretty much after the first <head> tag.  By placing the code as high as possible in the WordPress header, this gives Optimizely the ability to affect your website as soon as the page starts loading, and assures that your site visitors don’t notice anything happening before their eyes!

The only consideration you need to make when installing the code snippet is whether your site is already running jQuery or not.  You can determine this by looking in the header of your WordPress site to see if there are any scripts that say something like jquery-162.js.  If you don’t see any jQuery references in the header, you don’t need to do anything:  Optimizely already includes jQuery!  If you already have jQuery installed, be sure to place the Optimizely code snippet after the WordPress jQuery reference.  Then, go to the Optimizely website, click on the  “My Experiments” -> “View All Experiments” – > “Project Code” menu to change the jQuery settings to “Do not include”.

After you place the code snippet line in the header and hit save, that’s it!  You’ll be able to start using Optimizely to create experiments.

Integrating Optimizely with Google Analytics

In order to track your Optimizely experiments within Google Analytics, no code changes need to be made.  The only thing you need to do is make sure you have the asynchronous version of the Google Analytics code installed and a free custom variable slot.  Then, within the Optimizely interface, you can choose which custom variable to write your data to and you’re done.

%d bloggers like this: