如何为单页应用设置 Optimizely 测试



我有一个单页网络应用程序,它提供了一个多步骤的照片管理"向导",通过标签条分为几个离散的步骤(照片上传、样式、注释、发布)。在切换步骤时,我将 URL 哈希设置为 #publishing-step(或任何激活的步骤)。

如何将 Optimizely 测试设置为在向导的各个离散步骤上运行?

浏览器永远不会离开页面,因此它只会获得一个window.load事件。它的 DOM 不会被废弃或重新生成,而只是通过 display: noneblock 随时切换可见的页面元素,所以我试图弄清楚的部分实际上主要是关于我如何进行 Optimizely 测试设置本身 - 如果一次应用所有编辑,这很好(并且可能是必要的)。

不幸的是,这个东西必须在IE9中工作,所以我不能使用history.pushState来获取每个步骤的非常离散的URL。

实际上有几种方法可以做到这一点,你选择哪个选项在很大程度上取决于你最容易做什么以及你计划如何分析数据。

如果您想使用Optimizely的分析仪表板:

我建议创建一个实验,它将在不同的时间激活一堆其他实验。激活实验将面向所有人,并在他们到达向导时立即运行。其他实验将使用手动激活进行设置,并由此实验触发。

激活实验将具有如下代码:

window.optimizely = window.optimizely || [];
function hashChanged() {
  if(location.hash === 'publishing-step') {
    window.optimizely.push(['activate', 0000000000]);
  }
  if(location.hash === 'checkout-step') {
    window.optimizely.push(['activate', 1111111111]);
  }
}
window.addEventListener('hashchange', hashChanged, false);

或者你可以直接从你网站的代码调用window.optimizely.push(['activate', xxxxxx];而不是创建一个激活实验并监听哈希变化。

如果您想使用第三方分析工具,如谷歌分析:

您可以使用类似于上述代码在一个实验中完成所有这些操作,但是在每个"if"部分中,您可以运行变体代码,而不是激活实验,该代码对向导进行更改,并将特殊的跟踪信息发送到您的分析中,以供以后报告。您必须对此方法进行自己的统计显著性计算(因为 Optimizely 的数据不会"干净"),但如果配置正确,此方法通常效果更好。

或者,您可以使用上述方法,但仍尝试使用 Optimizely 分析仪表板,方法是在实验上创建自定义事件并使用window.optimizely.push(["trackEvent", "eventName"]);

本文也可能对您有所帮助。

您可能需要自己执行此操作,使用 Optimizely 的 JS API 触发操作并告诉它您的用户做了什么: https://www.optimizely.com/docs/api

最新更新