Optimizely和Visual Website Optimizer如何处理可视化DOM编辑？

Question

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

他们做的最酷的事情之一是可视化DOM编辑。您可以直观地操作网页并将更改保存为离线。然后通过JS加载在随机访问者页面视图中应用更改。

视觉编辑器如何工作？

Answer 1

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

1. 你可能会（可选的）通过添加Optimizely帐户段到该页面，它看起来像这样开始并不会改变：

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

2. 的Optimizely编辑器加载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语句会导致出现所需的变体。如果您好奇，您可以直接点击Optimizely Editor右下角的“编辑代码”查看和编辑此代码。

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

在页面加载过程中尽可能快地执行这些更改的逻辑有很多，但这应该作为基本概述！

皮特