您如何为单页应用程序设置 Optimizely 测试？答案

【问题标题】：How do you set up an Optimizely test for a single-page app?您如何为单页应用程序设置 Optimizely 测试？
【发布时间】：2012-06-26 01:15:07
【问题描述】：

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

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

浏览器永远不会离开页面，所以它只会得到一个window.load 事件。它的 DOM 并没有被废弃或重新生成，而只是通过display: none 或block 随时切换可见的页面元素，所以我试图弄清楚的部分实际上主要是关于我采取什么方式Optimizely 测试设置本身 - 如果一次应用所有编辑，这很好（并且可能是必要的）。

不幸的是，这个东西必须在 IE9 中工作，所以我不能使用 history.pushState 为每个步骤获取相当离散的 url。

【问题讨论】：

标签： ab-testing single-page-application optimizely

【解决方案1】：

实际上，您可以通过多种方式来执行此操作，您选择哪种方式在很大程度上取决于对您来说最简单的方式以及您计划如何分析数据。

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

我建议创建一个实验，该实验将在不同时间激活大量其他实验。激活实验将针对每个人，并在他们到达您的向导时立即运行。其他实验将使用manual activation 设置并由该实验触发。

激活实验的代码如下：

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', xxxxxxxxx]);直接从您网站的代码中获取，而不是创建激活实验并监听 hashchange。

如果您想使用第三方分析工具，例如 Google Analytics：

您可以使用与上述类似的代码在一个实验中完成所有这些操作，但在每个“if”部分中，您可以运行变体代码来更改向导并将特殊跟踪信息发送到您的分析，而不是激活实验甜蜜的以后报告。你必须为这个方法做你自己的statistical significance calculation（因为 Optimizely 的数据不会是“干净的”），但如果配置得当，这个方法实际上效果更好。

您也可以使用上述方法，但仍尝试使用 Optimizely 分析仪表板，方法是在您的实验中创建 custom events 并使用诸如 window.optimizely.push(["trackEvent", "eventName"]); 之类的调用将数据发送给他们

This article may also be helpful to you.

【讨论】：

【解决方案2】：

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

【讨论】：