Optimizely&Visual网站优化工具如何处理可视化DOM编辑？

Question

Optimizely&Visual网站优化工具是两个很酷的网站,允许用户执行简单的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右下角的"Edit Code"直接查看和编辑此代码.

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

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

皮特