在单页应用程序 (SPA) 上运行 A/B 测试的最佳实践

本文是单页应用程序 A/B 测试系列的第 2 部分。

在第 1 部分中，我们介绍了单页应用程序 (SPA) 的概念，展示了它越来越受欢迎的原因，并研究了您可以在单页应用程序上使用的 10 个最佳 A/B 测试平台。

但是由于它们的运作方式，在 SPA 上运行 A/B 测试可能会有点棘手。 在本文中，我们将为您提供有关如何在 SPA 上运行实验的实用建议以及一些可遵循的最佳实践。

SPA 框架的演变

SPA 并不是一个新概念。

2002 年的一项专利描述了一种类似于现代版 SPA 的技术。

然而，自 2006 年以来一直作为网络标准使用的 AJAX 技术使其实施变得更加容易。 它是一组使用各种客户端技术创建异步 Web 应用程序的策略。 由于AJAX，软件可以在后台从服务器发送和接收数据，而不会改变页面的当前状态或内容显示模式，因此不会干扰用户的体验。

另一方面，AJAX 的引入并不是采用 SPA 的分水岭。

近年来，前端的快速增长和 UX 的相关性日益增强，推动了 SPA 的普及，这是更大趋势的一部分。

SPA 最初是使用 Java 小程序或 Flash 程序以及“纯”JavaScript 或 jQuery 库创建的。

然而，Angular.js、React.js 和 Vue.js 等前端框架——所有这些都是相对较新的 JavaScript 框架——帮助了它们的开发。

SPA 架构背后的技术是什么？

SPA 本质上是一个支持 HTML5 和 CSS3 的 JavaScript 框架。

然而，使用这些组件，一些不同的库和框架已经出现并在开发世界中被采用：

1. 角度

Angular 由 Google 开发，是 3 个框架中最成熟、最古老的一个，拥有详细的文档可供使用，但学习曲线陡峭。

它嵌入了原始模型视图控制器 (MVC) 架构，但主要使用 MVVM (Model-View-ViewModel)，允许多个开发人员在同一个应用程序部分上单独工作。 更新到新版本可能会出现一些迁移问题，但 Angular 在扩展时确实具有最高的可靠性，并且非常适合大型、复杂的项目。

由于 TypeScript，Angular 是大型开发团队的绝佳选择，一些公司已经在他们的其他产品中采用了这项技术。

在 GitHub 上，它是一个成熟的框架，拥有大量的贡献者。

Google 及其产品（例如 Google Drive 和 Gmail）以及 Wix 是 Angular for SPA 的用户之一。

2. React.js

React 由 Facebook 开发并开源。 它主要用于创建用户界面（Facebook、WhatsApp 和 Instagram）。

由于其轻量级的代码大小以及与其他框架无缝集成的能力，它非常受欢迎。 它还有一种在版本之间迁移的简单方法。 （通常是一键迁移）。

它经常与 Redux 结合使用来管理应用程序组件的状态。 Uber 还在其产品中使用了 React.js 技术。

React 非常适合刚开始使用 JavaScript 前端框架的人，以及初创企业和敏捷开发人员。 此外，这个 JavaScript 库提供了与各种其他框架和技术的有价值的集成选项，这在处理具有大型环境的项目时非常有用。 在所有 SPA 框架中，React 在 GitHub 上的贡献最多，它可以帮助开发人员解决潜在问题。

它具有 3 个框架中最简单的学习曲线，最适合用于需要大量可扩展性的期限短的项目。

3.Vue.js

Vue.js 不属于 Facebook 或 Google 等大公司，但它仍然在加快新用户的步伐，尤其是在亚洲。 它是上述 SPA 框架中最新的一个，由前 Google 员工 Evan You 于 2014 年创立。 很多文档通常是中文的，但仍然有培训资源。

该框架非常轻巧，可用于简单地创建高性能应用程序。

对于大多数开发人员来说，在任何这些框架中创建都没有大问题，决定实际上取决于每个框架的主要特性。

Vue.js 现在被百度、GitLab 和阿里巴巴等企业用于满足他们的需求。

单页应用程序的工作原理

SPA 的设计简单明了。 使用客户端和服务器端渲染技术。

在非 SPA 网站上，当您在浏览器中输入 URL 时，浏览器会将请求发送到服务器并接收 HTML 页面作为响应。

在 SPA 网站上，服务器仅在初始请求中传递 HTML 文档，在后续请求中传递 JSON 数据。 这表明 SPA 将重写当前页面的内容，而不是重新加载整个网站。

简而言之，SPA 的功能如下：

1. 客户端首先与服务器建立连接并获取页面内容，该页面内容主要由 HTML 代码、CSS 和一个 JavaScript 包组成，其中包含运行应用程序逻辑所需的所有脚本。
2. 用户的操作激活相关 JavaScript 的执行，然后向服务器发出 AJAX 请求。 数据通常是 JSON 格式，不需要完整的网页刷新。

与浏览器启动全新页面的常规技术不同，单页面应用程序通过使用来自 Web 服务器的新数据强制修改现有网页来与用户交互。 浏览器检索必要的 HTML、JavaScript 和 CSS 代码或其他适当的资源，并根据需要将它们添加到页面中。

虽然 HTML5 历史 API 或位置哈希可用于提供 Web 应用程序中不同逻辑页面的可导航性和感知性，但在此过程中页面不会随时重新加载，也不会将控制权转移到另一个页面。

如果您想查看实际中的单页应用程序示例，请转到此链接并单击主页、最新课程列表和顶部菜单。 当你这样做时，你会注意到页面并没有完全重新加载，当用户在整个应用程序中移动时，只有新数据通过网络发送。

这是 SPA 的一个示例。

谁最适合SPA？

由于 SPA 的优势，它们现在是许多情况下的首选解决方案。

他们在涉及各种网络技术的项目中表现出色，在这些项目中，性能和令人愉悦的用户体验比内容更重要。

有许多使用 SPA 的大玩家。 Facebook、Gmail、谷歌地图、Netflix 和 Paypal 是这类技术的一些最突出的例子（见下文）。

为什么在 SPA 上进行 A/B 测试很困难？

所有三个框架——React.js、Angular.js 和 Vue.js——在 JavaScript 开发人员中都非常流行，因为它们允许开发复杂的用户界面，从而创造更好的用户体验和更高的转化率。

它们非常受开发人员欢迎，因为

• 不需要刷新页面
• 页面加载速度更快
• 互动丰富而流畅
• 数据传输减少
• 可重复使用的部件允许更快的开发
• 开发者社区非常完善

它们也是开始新 SPA 的任何人的首选资源。

但是，有一个主要缺点：由于这些框架的工作方式，客户端 A/B 测试工具难以正常工作。

当有人在 SPA 上浏览网页时，该页面（包括 URL）不会刷新。 页面的状态因每次用户交互而异（例如，屏幕上可见的不同元素）。

由于 A/B 测试工具通常只在初始页面加载期间进行一次调整，因此这些后续交互不会被考虑在内。

以下是两种常见的情况：

1. 如果您在 SPA 上启用了综合浏览量，那么当有人访问某个 URL 时，您会收到一次综合浏览量，但如果他们浏览启用了综合浏览量的其他页面，则不会收到第二次浏览量。 这是因为材料正在加载到当前页面而不是新页面。
2. 如果您尝试将事件限制为特定 URL ，您将遇到同样的问题。 A/B 测试工具会“相信”它停留在第一次加载的页面上，即使用户认为他们在不同的页面上。 由于片段被移入和移出站点，因此可能难以监控点击或其他事件。

为了呈现体验，客户端 A/B 测试软件和个性化平台依赖于完整的页面加载。

由于在使用 React、Angular 或 Vue 等 SPA 框架时不存在这个概念，因此确定页面中是否添加了新内容或现有内容的状态是否发生了变化——更重要的是，何时注入定制内容变得更加困难。

因此，A/B 测试工具必须能够识别访问者的上下文，例如他们是否已到达产品列表、详细信息或购物车页面，以及何时应提供新鲜材料。

这意味着技术团队需要不断掌握模块化 React SPA 或 Angular SPA 组件的变化，并实时更新影响这些组件的体验。

例如，React.js 中的每次用户交互都会导致一个或多个 UI 元素刷新，从而删除 A/B 测试解决方案所做的任何更改。

SPA 上的客户端测试与服务器端测试

在 SPA 上进行 A/B 测试时，有两种选择：

1. 隔离您要测试的应用程序的各种“状态”，然后对其进行设置，以便在显示每个“状态”时调用 API 进行适当的更改。 这称为条件激活，它是在客户端完成的。

“状态”的一些示例包括显示订阅表单、加载搜索结果列表等。

2. 在服务器端对修改进行硬编码，或者为每个新体验进行自定义部署。

这两个选项都受到正在使用的 SPA 框架的影响。 因此，正如您可能已经猜到的那样，它们需要技术团队和营销人员之间的大量合作才能保持良好的工作状态。

现在，让我们回顾一下这两个选项，看看团队必须做什么才能取得成功。

客户端的条件激活

如果您仍然需要对 SPA 应用程序执行客户端测试，则有一种解决方法。

为了确保仅在应用程序达到所需状态时执行测试脚本，Web 开发人员可以使用称为条件激活模式的功能。

如果你不熟悉条件激活，这是一个很容易掌握的概念。

实质上，条件激活使您能够定义何时应该激活实验，而不是通过其在页面刷新时这样做的标准方法。

这可以通过编写一些 JavaScript 来完成。 有两种方法可以做到这一点。

1.轮询功能

轮询函数是使用条件激活的最基本方式。 该函数每 50 毫秒扫描一次页面，直到出现指定的元素——这可能是模式、div 甚至整个页面。

当元素出现时，实验开始。

A/B 测试平台会生成几行 JavaScript 供您修改，具体取决于您希望轮询函数查找的元素。

一旦函数评估为TRUE ，实验就会被激活。

2.回调函数

回调函数的执行与轮询函数类似，但增加了一些灵活性。

这个函数允许你输入任何你想要的 JavaScript 条件，如果它的计算结果为TRUE ，则​​开始实验。

虽然轮询函数不断地 ping 页面以查看指定元素是否存在，但回调函数更加被动并且依赖于事件处理程序。

服务器端测试

当您执行服务器端测试时，不会在浏览器级别进行任何更改。 相反，实验变体参数（“用户 1 看到变体 A”）是在服务器级别确定的，并通过服务提供商直接连接到 JavaScript 应用程序，从而更容易测试更复杂、超出静态范围的动态内容网站的用户界面。

例如，主要是 SPA 的社交媒体应用程序。 虽然可以使用前端客户端测试来试验这些，但由于涉及动态内容，它要复杂得多，因此切换到服务器端测试会使过程更加容易。

SPA 上的 A/B 测试示例

您可能会遇到在单页应用程序上进行 A/B 测试的实际实例有哪些？

更改登录页面上的图像

假设您需要在 SPA 上设置一个实验，以向 50% 的访问特定页面的受众展示动态图像。 此示例中使用的 SPA 框架是 React.js，这意味着页面正在更改并且图像正在定期更换。

如果显示变体图像，可能会出现闪烁问题，这意味着将观察到原始图像-变体图像-原始图像的序列。

通过在特定登录页面加载时触发轮询可以完全避免此问题。

在 CTA 下测试附加副本

在使用 Angular.js 构建的 SPA 网站上进行的另一项实验可能涉及在主要 CTA 下方向 30% 的目标受众显示额外的副本行。

在此示例中，版本 A 将在主要 CTA 下方显示额外的副本行，而版本 B 不会。 我们会将 30% 的流量发送到版本 A，将 70% 的流量发送到版本 B，然后比较结果以查看转化率是否存在显着差异。

由于该网站是使用 Angular.js 构建的，因此元素会定期更改。 这里的回调事件可以帮助我们显示对变量的更改。

显示礼券

在此示例中，假设当用户将高级品牌的产品添加到他们的购物篮时，我们希望显示一张专属礼券。 条件是当用户从购物篮中取出优质产品时，优惠券会从页面上滑出。

1. 这里需要发生的是，当用户执行所需的操作时，应该发送手动激活事件。 实验将作为该事件的结果而被激活。
2. 当用户从购物篮中取出优质产品时，应触发激活事件，从而停用实验。
3. 如果消费者再次添加，则需要重新启动实验以显示优质产品。

在“立即购买”CTA 下方显示标语

如果您想在“立即购买”CTA 按钮下方显示独特的标语，则可以通过在历史更改上推送激活事件来激活实验。

这是因为包含“立即购买”CTA 按钮的页面一开始不会加载。

Convert 如何绕过 SPA 上的测试问题

SPA 上的实验需要与其他实验不同的处理方式。 由于转换脚本无法读取网站访问者正在导航的 URL，因此它无法使用标准方法触发实验。

所以这就是它的完成方式。

首先按照本文所述安装转换跟踪代码。

然后，应用以下 3 种方法之一：

1.触发轮询

如前所述，轮询是测试体验条件以确定是否应该触发所述体验的过程。

这包括监控访问者 URL、受众条件或 JavaScript 条件以运行测试。

轮询通常在加载新页面时由 Convert 触发。 在 SPA 上，通常不会在 Web 应用程序上加载新页面。

在这种情况下，您将需要以下代码来启动轮询：

 window._conv_q = _conv_q || [];
window._conv_q.push(["run","true"]);

您应该确定 SPA 上触发上述代码的最佳事件。 应在项目设置 > 全局项目 JavaScript 部分添加的示例代码。

 console.log('SPA/Convert Code in Global Project Javascript 执行');
如果（！window.globalExecutedTs）{
window.globalExecutedTs = true;
var oldPushState = window.history.pushState;
window.history.pushState = 函数（数据）{
尝试 {
设置超时（函数（）{
返回 oldPushState.apply(this, arguments);
console.log('从 pushstate 转换激活');
window._conv_q = _conv_q || [];
window._conv_q.push(["run", "true"]);
}, 0);
} 抓住 (e) {
控制台.log(e);
}
};
window.onpopstate = 函数（事件）{
设置超时（函数（）{
console.log('从弹出状态转换激活');
window._conv_q = _conv_q || [];
window._conv_q.push(["run", "true"]);
}, 0);
};
}

2. 在站点区域使用 JavaScript 条件

由于转换脚本无法读取 SPA 中的 URL 更改，因此您应该使用 JavaScript 条件而不是 URL 匹配条件来触发实验。

在以下文章中找到有关如何执行此操作的深入说明。

3. 手动激活实验

在确定某个流程发生后，您可以手动触发实验。 使用此方法，在使用代码触发轮询后，仍将测试站点区域和受众条件。 查看本文以获取有关手动激活实验的更多详细信息。

使用上述 3 种方法，您应该能够在 SPA 应用程序中适时触发实验。

Convert 是否会增加 SPA 上闪烁的风险？

简短的回答，不。

所有 SPA 框架都与 Convert 的防闪烁技术兼容。 Convert 在幕后利用 SmartInsert ^TM技术确保在您的 SPA 的适当时间应用或重新应用实验修改，即使在动态页面重新加载期间也是如此。

我们建议阅读我们关于闪烁效果的白皮书，以了解有关它的更多信息以及为什么要不惜一切代价避免它。

在单页应用程序站点上进行 A/B 测试时的常见问题

如您所见，在 SPA 站点上运行测试时需要牢记一些事项。 一旦您了解了所使用的框架、工具测试方法和触发事件，那么主要问题通常是在浏览器上显示新页面或视图时测试元素没有重新加载。

这可能是由几件事引起的：

1. 测试出现在首页视图上但不出现在后续页面上的更改

有时，您要显示的更改仅显示在您在浏览器上加载的第一页上，而不会显示在后续视图中。 这是因为在访问站点的新视图或“页面”时，不会运行评估实验并激活它们的转换脚本部分。

2. 出现在可视化编辑器上的更改在外部预览时不会出现

有时可能会发生使用可视化编辑器所做的更改不会显示在编辑器预览之外的情况。

大多数 SPA 框架不使用 DOM API，而是使用自己的方法在页面上部署更改。 这会导致 DOM 在被 SPA 更新时不同步。 这在 React 和 Angular 中很常见，导致在 Jquery 代码中找到的 CSS 选择器不起作用。

3. 变化不断出现在后续的“视图”中

在这种情况下，实验更改会显示在正确的（页面）视图中。 但是，当访问新的（页面）视图时，变化并没有消失。 发生这种情况是因为在 SPA 网站上，重新加载新页面时不会删除更改。

当实验条件与调用轮询时部署更改的后续视图不匹配时，Convert 脚本将删除添加的代码。 但是，这还不够，因为即使删除页面的实验代码，jquery 更改也不会消失。

您将需要执行代码来还原实验带来的更改。

轮到你了：在优化 SPA 时避免这些错误

由于信息处理和提供方式的进步，SPA 可能会更普遍地被接受，但重要的是要注意，这种新技术在与优化和实验平台集成时存在问题，这些平台通常适用于更经典的设置。

我们希望本文涵盖了 SPA 的各个组成部分以及一些解决方案，以克服您寻求为访问者提供更快、更直观和个性化的数字体验的这些障碍。

但是，您最好与可以为 SPA 提供无缝支持的解决方案提供商合作，例如无需修改源代码即可检测 UI 组件和页面类型的更改以进行动态定制的能力。 就像下面框中的那个。