Options. That’s one of the beauties of using WordPress to build your websites. All the different options you have for shaping and styling your website means you have a veritable artist’s pallet of design choices you can make. All those options can make a satisfying decision between those many choices difficult though, too.
Finding that perfect balance between aesthetically pleasing and efficient can be a real conundrum. Should my navigation menu be here or there, should my contact form be above the fold or below? Sometimes hiring someone with a professional sense of design to help is the right decision. Often though, with the right tools, you can make very educated decisions about what works best for your website on your own.
For the next few minutes we’ll be talking about one of those tools: Optimizely. It’s what we use for A/B testing here at WP Ninjas, and we feel like it’s the best in class for our needs. If you’re not familiar with A/B testing and would like to know how it’s done and how it can benefit you, take a moment to hop over to ninjaforms.com and read up on it. For those ready for a walkthrough of Optimizely’s A/B testing process and what it offers, read on.
Note that while Optimizely does have a WordPress plugin, it is for headline testing only. This walkthrough will address their full suite of testing via a free account hosted on their website. Let’s get started.
First you need to head over to Optimizely and make an account.
You’ll be presented with a choice of web, iOS, or Android project immediately after. Select web and click on through. You’ll be prompted to enter the url of the website you want to run tests on next. Enter the url and you’re taken to a webpage with Optimizely’s taskbar superimposed over a fully functioning front-end mockup of your website (If your browser prompts you to “stay on page” or “leave page”, stay; it’s a tarp.)
You’ll be offered a guided tour here. If you enjoy that sort of thing, go for it. We’ll break down the taskbar for you in more detail next.
The taskbar forms the upper border of the page. There’s a lot of empty space in the middle we don’t care about. The features we’re working with are on the left and right sides.
On the left you have 3 tabs to begin with: Original, Variation #1, and Add Variation. Clicking on Original shows you your website with no Optimizely modifications. Variation #1 is a clone of the original that you can make changes to. Add Variation allows you to add additional clones to modify. We strongly recommend that you make only 1 change per variation. Multiple changes per variation compromise the integrity of your test, a fact we spoke to in our A/B testing article at ninjaforms.com (see the I’m Ready to Go! What’s the Best Way to Start Testing? section).
On the right you have even more options. Let’s start with the ones on the bottom and work up. Editing Mode and Interactive Mode are pretty intuitive; in Editing Mode you can make changes and in Interactive you can see them as a guest would. Options opens up a whole world of features, some available to you for free and others visible but accessible only with their Enterprise plans. There’s everything here from diagnostic tools to extra features to tutorials; way too much to cover now but something you definitely want to keep in mind.
Above that you’ll see where you can save any changes you’ve made (sort of important) and then we have 3 more buttons on the next row up. From left to right you have Audience Targeting, Set Up Goals, and Start Experiment. Audience targeting allows you to dictate what group of people are funneled into a specific variation. For example, you could serve all OSX users to Variation #1 and all Windows 10 users to Variation #2 (yes, this could be a really fun way to mess with people!). Create Goals lets you track and log data on three categories: Clicks (how frequently different elements on a page are interacted with), Pageviews, and Custom Events.
Beginning the Experiment
Once you’ve designed an experiment, save your variation (right hand side) and click Start Experiment. You’ll be prompted to sign up for their free starter plan. Just a few clicks later you’ll receive a prompt that looks like this:
Note the single line of code there. That line has to be entered into your website’s backend. With that entered, Optimizely can push your experimental variations live to your website and start funneling traffic to them.
Entering this is easy. All you’ll need is a simple text editor. Head into your WordPress installation and navigate to your theme folder. While not mandatory, we recommend making any and all theme edits in a child theme. If you’ve not set one up already we have a simple walkthrough written up for you already.
Open up your header.php with your text editor. If header.php isn’t in your child theme folder yet, just copy/paste the full header.php file over from your parent theme. You want to enter the Optimizely code snippet at the very end of the HTML document head; that’s the section towards the top of the header.php file that’s enclosed by <head> </head> tags. Just paste the code snippet one line above </head>, like so:
Your experiment is now live. You can view data and manage running experiments directly from your Optimizely account!
Now that you’re setup to run experiments, the sky’s the limit on what you can test. We have a growing body of articles over at ninjaforms.com that deal with form conversion. If you’re looking for more contacts, leads, or anything to do with form conversion in general, that’s a great resource to get ideas to start testing.
Before I close I’d like to mention that within 24 hours of setting up a dummy account to get the screenshots for this article, I was contacted by an Optimizely representative offering to help with testing goals and implementation. It’s hard to go wrong with support like that. Kudos to Caroline. Get onboard, get testing, and may the traffic be with you!