javascript - How does Optimizely & Visual Website Optimizer handle visual DOM editing?

Question

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?

Answer 1

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