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

您可能（这是可选的）首先将您的Optimizely帐户代码片段添加到该页面，该页面看起来像这样并且永不改变：

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

Optimizely编辑器在iframe中加载http://www.mypage.com，并使用window.postMessage与页面进行通信。 这只适用于该页面已经有一个像上面的代码片段。 如果情况并非如此，编辑器将在等待来自iframe页面的消息时超时，并将通过实际将片段插入页面的代理再次加载它。 这个加载过程允许编辑器使用一个页面。 包含一个账户片段b。 不包含帐户代码片段，或c。 坐在防火墙后面（c。需要片段）。

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

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

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

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