How to run Optimizely experiments without screwing up your website
tricks that will help you run pixel-perfect experiments
Optimizely is an absolutely amazing A/B testing and conversion optimization platform! If you are reading this post then you are most likely familiar with both A/B testing and Optimizely, but in a nutshell, the solution allows you to test different variation of a page (i.e. one with a call-to-action “Sign up for free” and another one with a call-to-action “Open your account now”) to determine, which version converts better.
A/B testing is nothing new, but what Optimizely brought to the table is the ability for marketers to run optimization tests without involving engineers. Instead of asking your engineering team to create multiple versions of a landing page that you want to test, Optimizely gives you an drag-and-drop interface to create multiple versions of the page and than handles traffic allocation and tracking.
However, the ease of use comes with a cost. Namely, irrespectively of how good drag-and-drop functionality is, it can totally ruin your website. Sign up forms that don’t submit, buttons that don’t work, distorted page layout, and so on.
Without going into much detail, Optimizely uses JQuery to create variations of your landing page. For instance, if I’d like to experiment with the “Follow” button on my Medium blog (to see if “Follow Jevgenijs on Medium” converts better), I’d select the “Follow” button and select “Edit Text”.
What happens under the hood, is that this change would be executed through a piece of JQuery code:
$(“.button—large”).html(“<span class=\”button-label follow-label\” data-suffix=\”ing\”>Follow Jevgenijs on Medium</span>”);
For those familiar with JQuery, it is clear from the code that Optimizely implements the change by replacing the html code of the .button-large element. The above example will run smoothly; however, if you try to adjust more complex elements on your landing page, such as sign up forms, it can result in a complete disaster.
Nevertheless, why I love Optimizely is because it gives you enough flexibility to be in total control of how your test variations are created!
Below, I list a few ways to run pixel-perfect experiments.
Copy/paste entire HTML blocks
The easiest way to run experiments involving complex changes to your landing page is to use “Edit HTML” feature. Instead of relying on Optimizely’s drag-and-drop functionality, write your own HTML code for the block that you want to change and then use “Edit HTML” to paste it into the experiment.
In the example above, I could write my own code for the header of my Medium blog, and replace the original with “Edit HTML”.
Why? Because then you are in total control of how this block will look and behave in the experiment, and moreover, this change would be executed through a single JQuery command.
Hint: you can always check how Optimizely executes the changes by expanding <edit code> section in the right bottom.
Hide, style, edit elements with CSS
An alternative to replacing HTML code of a block is to create experiment using pure CSS styling. For instance, if you want to understand if hiding menus and links on a landing page results in the better conversion, you can hide all unneeded page elements with something like:
<style> #menu { display: none; }
#footer-links { display: none; }
</style>
or if you want to change color and size of the “Sign up now” button, you can also do it with pure CSS (obviously, you need to use your own CSS selectors):
<style>
#sign-up-botton {
background-color: #003399;
width: 200px;
height: 50px;
}
</style>
If you can create a test variation with pure CSS, everything that’s left is to select any element in Optimizely interface (I usually select the smallest static element in the header) and paste your CSS code:
When you click “Done”, your experiment will include custom changes.
Not enough? JQuery should help!
If you can live with the above options that’s great, but in case you need more, you can always write your own JQuery code to create a landing page variation!
Remember that <edit code> button in the bottom right? Yeap, that exactly what we need to add our own JQuery code, just expand it and the sky will be your only limit.
As you can see, two lines of JQuery made my avatar bigger:
$(“.hero-avatar”).attr(“style”,”width:200px;height:200px;”);
$(“.avatar”).attr(“style”,”width:200px;height:200px;”);
Obviously, you don’t need to go into JQuery writing to do such simple things, but who knows what things you might want to test on your landing page. What if you have a button on your website that submits a form and you’d love to show an alert when someone clicks it (to test if warning on form submit causes a drop on conversion)? Jquery would be the only option in that case.
To illustrate, let’s show an alert when someone clicks on “Follow” on my Medium blog:
$( “.button—follow” ).click(function() { alert(“Are you sure you want to follow this dude?”);
});
That works and illustrates that with JQuery you can change not only the look and feel of the landing page, but the whole interaction with the user.
Hope this helps you run some nice experiments. As always, feel free to ping me on Twitter (@jevgenijs) if you have any questions!
