19

Optimizely 和 Visual Website Optimizer 是两个很酷的网站，允许用户执行简单的 A/B 测试。

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

可视化编辑器如何工作？

4

1 回答 1

63

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

  1. 您可以（这是可选的）首先将您的 Optimizely 帐户片段添加到该页面，该页面看起来像这样并且永远不会更改：

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

  2. Optimizely 编辑器在 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 编辑器右下角的“编辑代码”来直接查看和编辑此代码。

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

在页面加载期间，有更多的逻辑需要对访问者进行分桶并尽快执行这些更改，但这应该作为一个基本概述！

皮特

于 2011-03-09T00:55:32.980 回答