javascript - 如何从技术 Angular 优化他们的 A/B 测试?

标签 javascript html css google-analytics-api ab-testing

我正在尝试使用 Google Analytics(分析)和内容实验在我的网站上设置 A/B 测试,但我无法让它看起来无缝。

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

但问题是我在页面加载时看到内容闪烁;例如,如果我正在对 H2 进行 A/B 测试,我不想先查看原始版本,然后再快速更换它。有人有什么建议吗?

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

干杯

最佳答案

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

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

Optmizely 的文档进一步解释:

The reason we encourage this specific placement is because Optimizely works by making changes to the webpage as it loads. If the code snippet is added to the top of the block then the script is available for the duration of the time it takes to load the page and changes can be made in real time.

If the snippet is added anywhere else on the page it will still work. The problem is that if the page has already loaded a lot of content that the user sees before the Optimizely script executes then you could have a case where the original version of the page loads and is then transformed by the script to look like the intended variation. In most cases the code executes too quickly for this to be visible, but to avoid any potential problems we encourage you to add the snippet as early on in the execution path as possible.

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

关于javascript - 如何从技术 Angular 优化他们的 A/B 测试?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19314630/

相关文章:

javascript - 为什么我的 Facebook 应用程序询问我是否要访问他们的 friend 列表?

javascript - 与 div 之间可排序的问题

css - 最佳实践 - 只下载您需要的 CSS,还是使用缩小过程?

javascript - 谷歌分析外部链接跟踪

javascript - 使用触摸屏设备在 Canvas 上绘图

javascript - 更改 :hover on iPad So First Touch is Registered as onclick and :hover Functionailty Still Works

html - 具有相同 <td> 百分比的两个表中的不同输出

html - 如何使用文本的宽度百分比 (%)?

html - 如何创建具有矩形形状的圆形图像? CSS

css - 如何将 css 文件导入组件 .jsx 文件