3

我正在尝试使用 Google Analytics 和 Contents Experiments 在我的网站上设置 A/B 测试,但我无法让它看起来无缝。

为了使用 google API,需要做一些事情。首先,我添加一个脚本标签以从 Google 加载 cxApi,并指定一个实验 ID。加载后,谷歌文档建议在窗口上放置一个侦听器以获取“加载”事件,之后您应该向谷歌询问您希望显示的内容的变体并给它一个回调。一旦它选择了一个变体,您就可以使用 javascript 来显示/隐藏相关内容。

但问题是我在页面加载时得到内容闪现;例如,如果我正在对 H2 进行 A/B 测试,我不想先看到原始版本,然后再看到它很快被替换。有没有人有任何提示?

到目前为止,我想出的最佳解决方案是添加一个样式标签来隐藏相关内容(例如,通过将文本颜色设置为透明,因此内容仍然在屏幕上占用相同数量的空间并且不会t 导致回流)但我正在寻求更好的解决方案,如果有人对如何优化这样做有任何见解,我会感兴趣吗?

干杯

4

2 回答 2

2

Optimizely 提供来自 CDN 的静态脚本,该脚本使用 jQuery 来更改页面上的元素。

Optimizely 解决方案与 Google Content Experiments 的不同之处在于,Optimizely 指导用户以同步方式设置代码段,而典型的 Google Analytics JS 是异步加载的。这意味着将在页面呈现之前下载并执行 Optimizely 脚本,特别是如果按照他们的建议,将代码段放在<head>. 如果您遵循典型的Google Analytics 设置,GA 脚本将在页面的其余部分加载后异步加载。

Optmizely 的文档进一步解释了:

我们鼓励这个特定位置的原因是因为 Optimizely 通过在加载网页时对其进行更改来工作。如果将代码片段添加到块的顶部,则脚本在加载页面所需的时间内可用,并且可以实时进行更改。

如果将代码段添加到页面上的任何其他位置,它仍然可以工作。问题是,如果页面已经加载了用户在 Optimizely 脚本执行之前看到的大量内容,那么您可能会遇到页面的原始版本加载然后由脚本转换为看起来像预期变体的情况. 在大多数情况下,代码执行得太快以至于无法看到,但为避免任何潜在问题,我们鼓励您尽早在执行路径中添加代码段。

来自:https ://help.optimizely.com/hc/en-us/articles/200040285

于 2013-11-21T21:44:02.673 回答
1

以下文章(截取屏幕截图)解释了 Optimizely 如何与 DOM 交互: https ://help.optimizely.com/hc/en-us/articles/200040335

在此处输入图像描述

于 2014-09-29T12:49:49.840 回答