Optimizely＆amp; Visual Website Optimizer处理可视DOM编辑？

Question

优化＆amp; Visual Website Optimizer是两个很酷的站点，允许用户执行简单的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 Editor在iframe中加载http://www.mypage.com并使用window.postMessage与页面进行通信。如果该页面上已有一个类似上面的代码段，则此仅有效。如果不是这种情况，编辑器将在等待来自iframe页面的消息时超时，并将通过实际将代码段插入页面的代理再次加载。这个加载过程允许编辑器使用a的页面。包含一个帐户代码段b。不包含帐户代码段或c。坐在防火墙后面（c。需要摘录。）

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

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

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

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

在页面加载过程中，有更多的逻辑用于分析访问者并尽快执行这些更改，但这应作为基本概述！

皮特