19

Optimizely & Visual Website Optimizer are two cool sites that allow users to perform simple A/B Testing.

One of the coolest things they do is visual DOM editing. You can visually manipulate a webpage and save the changes offline. The changes are then applied during a random visitor page view via a JS load.

How do the visual editors work?

Joel Coehoorn
  • 362,140
  • 107
  • 528
  • 764
MB.
  • 3,815
  • 8
  • 46
  • 71

1 Answers1

63

My name is Pete Koomen, and I'm one of the co-founders of Optimizely, so I can speak for how things work on our side. Let's say you want to create an experiment on http://www.mypage.com.

  1. You might (this is optional) start by adding your Optimizely account snippet to that page, which looks like this and never changes:

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

  2. The Optimizely Editor loads http://www.mypage.com inside an iframe and uses window.postMessage to communicate with the page. This only works if that page already has a snippet like the one above on it. If that's not the case, the editor will timeout while waiting for a message from the iframe'd page, and will load it again via a proxy that actually inserts the snippet onto the page. This loading process allows the editor to work with pages that a. contain an account snippet b. do not contain an account snippet, or c. sit behind a firewall (c. requires the snippet.)

  3. Our user at this point can make changes to the page, like modifying text, swapping out images, or moving elements around. Each change that is made with the editor is encoded as a line of JavaScript that looks something like the following:

    $j("img#hplogo").css({"width":254, "height":112});
    |__IDENTIFIER__||____________ACTION______________|

  4. So, you can think of a "variation" of a page as a set of JavaScript statements that, when executed on that page, cause the desired variation to appear. If you're curious, you can actually view and edit this code directly by clicking on "Edit Code" in the bottom right-hand corner of the Optimizely Editor.

  5. Now, when you've added your account snippet to this page and started your experiment, the JS file pointed to by your account snippet will automatically bucket each incoming visitor and will then execute the corresponding JavaScript as the page is loading.

There's a lot more logic that goes into bucketing the visitor and executing these changes as quickly as possible during page load, but this should serve as a basic overview!

Pete

Pete Koomen
  • 754
  • 6
  • 3
  • 1
    So how does Optimizely handle scripts that are already present on the page? Adding a snippet of code and adding jQuery statements that modify DOM elements, doesn't mean there isn't other code on that page that hasn't modified, isn't modifying, and won't be modifying in the future, the same elements that the A/B Testing user is now modifying. So how does Optimizely code handle those race conditions? Also, how does the switch from "editing mode" to "interactive mode" work? In other words, how does Optimizely's "snippet" code know which events to "turn off" vs which to keep "on" and vice versa? – RavenHursT Jan 28 '14 at 23:31
  • They're probably using closures like this `(function ($, ...) { ... })(customjQuery, ...);` to make sure it does not interfere. The dollar sign will then only work also, they have created their own 'jQuery' which is a lot lighter so the page load time will not be as long as it would have been with jQuery. – jeroenvisser101 May 03 '14 at 17:03