如何优化&视觉网站优化器处理视觉DOM编辑？ [英] How does Optimizely & Visual Website Optimizer handle visual DOM editing?

问题描述

优化&视觉网站优化器是两个很酷的网站，允许用户执行简单的A / B测试。

他们最酷的事情之一是可视化DOM编辑。您可以在视觉上操纵网页并将更改保存到离线状态。然后，通过JS加载在随机访问者页面视图中应用更改。

视觉编辑器如何工作？

解决方案

我的名字是Pete Koomen，我是Optimizely的联合创始人之一，所以我可以说出一些事情在我们身边。假设您要在 http://www.mypage.com 上创建实验。

1. 您可以（这是可选的），首先将优化帐户代码片段添加到该页面，这样就可以，并且永远不会更改：

   
   
   

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




2. 优化编辑器加载 http ：//www.mypage.com 内的iframe，并使用window.postMessage与页面通信。如果该页面上已经有一个像上面那样的代码段，那么这个仅可以起作用。如果不是这种情况，编辑器将在等待iframe的页面上的消息时超时，并将通过一个代理将其再次加载，该代理实际将该片段插入页面。这个加载过程允许编辑器使用一个页面。包含帐户代码段b。不包含帐户代码段，或c。坐在防火墙后面（c。需要片段。）




3. 此时我们的用户可以更改页面，如修改文本，交换图片，或移动元素周围。使用编辑器进行的每个更改都将编码为一行JavaScript，如下所示：

   
   
   

   $ j（img＃hplogo ）.css（{width：254，height：112}）;

| __IDENTIFIER__ || ____________ ACTION ______________ |




4. 所以，您可以将页面的变体视为一组JavaScript语句，当在该页面上执行时，会导致所需的变化出现。如果您好奇，您可以通过点击优化编辑器右下角的编辑代码直接查看和编辑此代码。




5. 现在，当您将帐户代码段添加到此页面并开始实验时，您的帐户代码段指向的JS文件将自动对每个传入访问者进行存储，然后在页面加载时执行相应的JavaScript。

在页面加载期间，有更多的逻辑可以快速访问访问者并执行这些更改，但这应该是一个基本的概述！

Pete

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?

解决方案

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

这篇关于如何优化&视觉网站优化器处理视觉DOM编辑？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！