How to implement A/B tests in Optimizely and Visual Website Optimizer. Technical side

One of the areas, in which I help businesses around the world, is A/B testing. Full-cycle of A/B testing requires different areas of expertise. In this article I will write about approach my team uses to technically implement variations for A/B testing in Optimizely and Visual Website Optimizer.

Both services provide you with a good WYSIWYG interface to make changes to your pages to test them, but the real power is in their ability to change pages using custom JavaScript code. Here’s where you can see the power of jQuery. Using it you can not only make minor changes, but fully reorganize the page, change its design, leaving data (even if it is dynamic) intact.

However, to be able to use this power, you need not only know how to code in jQuery, but also follow a set of rules. Here’s the one we are using when implementing A/B tests.

How to implement A/B tests in Optimizely and Visual Website Optimizer. Technical side

First, you have to analyze the age you are working with. Which approach to HTML makeup is used. Is it blocks, tables, mesh or responsive? Which JS libraries are already in use? Which responsive CSS classes are used and how can we use them in our work? Knowing all this you can later use it while coding changes to the page. We are using Chrome DevTools to inspect the code.

After that you need to inspect the page behaviour. Are there any changes to the page being made while the user interacts with it? Any modal windows popping up?

After we know all of the above, we start the actual jQuery coding. When building new blocks on the page, we use prefixes for CSS classes, not to rewrite already existing ones by mistake.

If some of the blocks on page has to be fully changed, we are making sure all the functionality of the old block will work on the new one.

If there is no way to quickly upload new images to use them in new variation (especially small ones, like icons), we can encode them in base64 and put directly to the variation code.

Some of the page functionality may be active after the page has already been loaded. In this case we can use setTimeout (to show after some time) or setInterval (to check once in some time whether the element appeared; don’t forget to null the counter after the element has appeared).

While using Chrome DevTools we set-up workspaces to be able to write jQuery code right in the Sources tab.

And of course we are using the wonderful mode of emulating mobile devices to be sure the variation works perfectly there, if there is the need.

This is pretty much all we are using on an average project while implementing variation for A/B testing. If you are also using some similar set of rules, but have some rules we are not using, I will be glad to update this instruction.

If not, just feel free to use it. I hope it will help you avoid many of the mistakes and pitfalls while implementing tests in Optimizely and Visual Website Optimizer.

If you like my articles,