Optimizely 是如何实现的？可视化网站优化工具可以处理可视化 DOM 编辑吗？
优化& Visual Website Optimizer 是两个很酷的网站，允许用户执行简单的 A/B 测试。
他们所做的最酷的事情之一是可视化 DOM 编辑。您可以直观地操作网页并离线保存更改。然后，通过 JS 加载在随机访问者页面视图期间应用更改。
可视化编辑器如何工作？
Optimizely & Visual Website Optimizer are two cool sites that allow users to perform simple A/B Testing.
One of the coolest things they do is visual DOM editing. You can visually manipulate a webpage and save the changes offline. The changes are then applied during a random visitor page view via a JS load.
How do the visual editors work?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我叫 Pete Koomen，是 Optimizely 的联合创始人之一，所以我可以谈谈我们这边的运作方式。假设您要在 http://www.mypage.com 上创建实验。
您可以（这是可选的）首先将您的 Optimizely 帐户代码段添加到该页面，它看起来像这样并且永远不会改变：
Optimizely 编辑器在 iframe 内加载 http://www.mypage.com 并使用 window.postMessage与页面进行通信。 仅当该页面已经有像上面这样的代码片段时才有效。如果不是这种情况，编辑器将在等待来自 iframe 页面的消息时超时，并通过实际将代码片段插入到页面上的代理再次加载它。此加载过程允许编辑器处理以下页面：包含帐户片段 b.不包含帐户片段，或 c.位于防火墙后面（c. 需要代码片段。）
此时我们的用户可以对页面进行更改，例如修改文本、交换图像或移动元素。使用编辑器进行的每个更改都会被编码为一行 JavaScript，如下所示：
$j("img#hplogo").css({"宽度":254, "高度":112});|__IDENTIFIER__||____________ACTION______________|因此，您可以将页面的“变体”视为一组 JavaScript 语句，当在该页面上执行这些语句时，会导致出现所需的变体。如果您好奇，您实际上可以通过单击 Optimizely 编辑器右下角的“编辑代码”来直接查看和编辑此代码。
现在，当您将帐户代码段添加到此页面并开始实验时，您的帐户代码段指向的 JS 文件将自动对每个传入访问者进行存储，然后在页面加载时执行相应的 JavaScript。
还有更多的逻辑用于在页面加载期间对访问者进行存储并尽快执行这些更改，但这应该作为基本概述！
皮特
My name is Pete Koomen, and I'm one of the co-founders of Optimizely, so I can speak for how things work on our side. Let's say you want to create an experiment on http://www.mypage.com.
You might (this is optional) start by adding your Optimizely account snippet to that page, which looks like this and never changes:
<script src="//cdn.optimizely.com/js/XXXXXX.js"></script>The Optimizely Editor loads http://www.mypage.com inside an iframe and uses window.postMessage to communicate with the page. This only works if that page already has a snippet like the one above on it. If that's not the case, the editor will timeout while waiting for a message from the iframe'd page, and will load it again via a proxy that actually inserts the snippet onto the page. This loading process allows the editor to work with pages that a. contain an account snippet b. do not contain an account snippet, or c. sit behind a firewall (c. requires the snippet.)
Our user at this point can make changes to the page, like modifying text, swapping out images, or moving elements around. Each change that is made with the editor is encoded as a line of JavaScript that looks something like the following:
$j("img#hplogo").css({"width":254, "height":112});|__IDENTIFIER__||____________ACTION______________|So, you can think of a "variation" of a page as a set of JavaScript statements that, when executed on that page, cause the desired variation to appear. If you're curious, you can actually view and edit this code directly by clicking on "Edit Code" in the bottom right-hand corner of the Optimizely Editor.
Now, when you've added your account snippet to this page and started your experiment, the JS file pointed to by your account snippet will automatically bucket each incoming visitor and will then execute the corresponding JavaScript as the page is loading.
There's a lot more logic that goes into bucketing the visitor and executing these changes as quickly as possible during page load, but this should serve as a basic overview!
Pete