Optimizely is an incredible optimization tool, but exactly how it works can be a mystery until you’ve had a chance to explore the mechanics.
If you don’t have a strong technical background, your eyes might glaze over when you hear something like “Optimizely allows you to perform A/B and multivariate testing using client-side JavaScript variation code so that you can compare different versions of an experience to determine which leads to a better user experience and more conversions.”
Okay, I heard “more conversion” and “better user experience”, but HOW?!
How Optimizely Works (in words you know!)
The following is intended to help you wrap your head around how Optimizely can test two versions of a webpage, without having to actually get your developer to create a separate clone of your original page. There is A LOT more that Optimizely can do, so this explanation only scratches the surface. Nonetheless, for most folks this should be an excellent primer.
So how does Optimizely work when running a simple A/B test? Let’s find out…using Kanye West.
Step 1: Add the Snippet
The Optimizely snippet gets added to the source code of a webpage (specifics here). There the snippet will live until it’s called into service. If no experiment is running, the snippet doesn’t do anything; it just sits and waits. If an experiment is running, then the magic will happen.
Step 2: User Requests the Page
Once the snippet is set up and a test is configured, nothing happens until a user requests the page. Then (if the various targeting conditions are met – more here), the user will either be grouped into the “test” group or the “control” group.
Step 3: Page Load Begins
The page starts to load and, if Optimizely is implemented correctly, it’s not long before the snippet loads up as well (again, more specifics here)
Step 4: Snippet Springs Into Action
The snippet springs into action as the page is loading. It doesn’t stop the page from loading; it works as the page is loading (i.e., it’s Asynchronous).
Step 5: jQuery Magic Happens
If the user is in the “test” group, the snippet works its magic and changes the HTML (i.e. the website code) on the fly using jQuery (a really cool version of JavaScript). The Optimizely snippets rewrites the page as necessary before it finishes loading and no one is the wiser.
Step 6: User Sees the Experiment Variation
The user will then see the experimental variation of the page.
Step 7: User Reacts to the New Variation
The users gets to use the site just like they normally would, except they see things a bit differently according to what’s been set up. Optimizely then records how that user (and all “test” users) react to the variation while simultaneously collecting the same data on the original or “control” version.
Once the test has been running for a while and you’ve collected enough data, you can evaluate which variation performed better. If you feel good about it, that’s when you can ask your development team to make a permanent change to the website.
That’s How Optimizely Works!
Admittedly, that’s only scratching the surface of what Optimizely can do but hopefully that gives you an idea of how:
- Optimizely delivers test variations using JavaScript
- You can test basic variations without having your website developers create multiple test pages
Any questions? Let me know in the comments!
