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

EN

我的名字是Pete Koomen，我是Optimizely的联合创始人之一，所以我可以代表我们这一边的工作方式。假设您想在http://www.mypage.com上创建一个实验。

1. 您可以(这是可选的)首先将您的Optimizely account代码段添加到该页面，它看起来像这样，并且永远不会更改：

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

• The优化编辑器在iframe中加载http://www.mypage.com，并使用window.postMessage与页面通信。只有当该页面上已经有一个类似上面的代码片段时，这才能起作用。如果不是这样，编辑器将在等待来自iframe的页面的消息时超时，并将通过实际将代码片段插入页面的代理再次加载它。此加载过程允许编辑器处理a。包含帐户代码段b。不包含帐户代码段或c。位于防火墙后面(c。需要代码段)的页面。

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

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

|__IDENTIFIER__||____________ACTION______________|

• So，您可以将页面的“变体”看作一组JavaScript语句，当在该页面上执行这些语句时，会导致所需的变体出现。如果您很好奇，您可以通过单击优化编辑器右下角的“编辑代码”直接查看和编辑此代码。

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

在页面加载过程中，对访问者进行分类并尽可能快地执行这些更改需要更多的逻辑，但这应该是一个基本的概述！

皮特