SPA A/B 测试:单页应用程序入门指南和使用的 10 种最佳 SPA A/B 测试工具
已发表: 2022-02-15单页应用程序:它们是什么,它们是如何工作的,更重要的是,我们如何在它们上运行 A/B 测试?
在本指南中,我们将对其进行分解,并查看 10 个您可以使用的最佳 A/B 测试平台。
我们将介绍它们的定价、功能、是否允许试用,然后详细介绍它们使用哪些方法来允许您在单页应用程序上运行 A/B 测试。
这样您就可以准确地决定哪种工具最适合您和您的测试需求。
(如果您已经了解有关 SPA 测试的所有知识,请随时跳到此处的工具部分)。
- 什么是单页应用程序 (SPA)?
- 单页应用架构
- SPA(单页应用程序)与 MPA(多页应用程序)
- 单页应用网站的缺点
- 1. 初始页面加载缓慢
- 2. JavaScript 需要安装和工作
- 3. 更努力地构建和编辑(胖前端)
- 4. 分析测量和报告
- 5. 可能的 SEO 问题
- 6. 潜在的 A/B 测试问题
- 流行的单页应用程序框架。 选择什么:React、Angular 或 Vue?
- 单页应用程序站点示例
- 网飞
- 邮箱
- 单页应用网站的缺点
- 如何在单页应用程序 (SPA) 网站上进行 A/B 测试?
- 测试触发器
- SPA 框架
- 用于测试 SPA 的工具
- 已适应单页应用程序 (SPA) 站点的 10 大 A/B 测试工具
- #1:转换体验
- #2:Adobe 目标
- #3。 VWO
- #4。 喀麦隆
- #5:SiteSpect
- #6。 优化
- #7:谷歌优化/优化 360
- #8。 ABlyft
- #9。 AB 美味
- #10。 动态产量
- 简而言之:A/B 测试单页应用程序
什么是单页应用程序 (SPA)?
SPA 是一个网站或 Web 应用程序,旨在超快速和流畅地加载。 它的目标是复制精心设计的移动应用程序的体验及其构建方式。 您单击某些东西,它几乎立即加载。
然而,单页应用程序的名称对于非技术用户来说有点误导和混淆。 它不是指仅构建为单个网页的网站,而是指其编码方式。
单页应用架构
了解 SPA 工作原理的最佳方法是查看它的构建方式(网站架构)并将其与您可能使用的标准网站进行比较。
标准网站,也称为静态网站或“多页面应用程序”(MPA),是通过拥有多个 HTML 代码页面构建的,这些页面代表网站上的每个单独页面。 因此,您将有一个 HTML 页面用于主页,另一个用于关于页面,等等。
每次单击新链接时,网站都会向服务器请求加载该新页面的 HTML 代码,这会导致延迟。
实际上,您可以通过在 MPA 网站上预加载这些其他链接来加快页面加载速度,从而在一定程度上解决这个问题。 我们在本指南中讨论了它,以便在测试时让您的网站准备好满足 Core Web Vitals 的要求。
SPA(单页应用程序)与 MPA(多页应用程序)
SPA 和 MPA 之间的主要区别在于,SPA 对整个站点只有一页 HTML 代码,只需要加载一次,因此称为“单页”。
SPA 无需请求和加载多个 HTML 页面,而是在第一次点击时预加载所有内容,提前缓存其他网站内容,然后在有人点击链接时动态重新渲染和更新页面外观加载新的 HTML 文件。
它通过使用 JavaScript 和服务器端渲染来加载新内容或页面来实现这一点,而当前页面仍处于打开状态。 这提供了更流畅的用户体验外观,同时通常也比传统 MPA 加载速度更快,因为没有明显的停机时间或空白屏幕。
单页应用网站的缺点
作为测试人员,我们知道快速站点可以提供出色的用户体验,但是为您的站点使用 SPA 有哪些缺点?
1. 初始页面加载缓慢
因为 SPA 一次性预加载整个站点,这可能意味着初始页面加载可能比标准 MPA 慢。 但是,由于它的加载方式,对于用户来说,它仍然可以快速加载,因为初始视口通常会立即加载,从而呈现即时加载的外观。
2. JavaScript 需要安装和工作
如果用户的浏览器或设备没有启用 JavaScript,那么该站点将无法运行。 这种情况很少发生,并且会通知用户启用和下载它,但它可能会发生。
3. 更努力地构建和编辑(胖前端)
由于构建 SPA 站点的复杂性,他们有时可能需要更多时间来创建或花费更多精力来进行更改。
不仅如此,如果构建不正确,它们还可能导致用户体验问题。
例如,用户可以按下返回选项卡并离开站点,而不是返回到前一个“页面”。 同样,正确构建时非常罕见。
4. 分析测量和报告
SPA 也可能难以跟踪现场分析。 因为没有单独的页面,所以需要通过发生的动态变化而不是 URL 加载来跟踪操作。 这是有关如何使用 Google Analytics 4 和 GTM 执行此操作的指南。
5. 可能的 SEO 问题
这也会影响网站的 SEO,因为 Google 的网络蜘蛛很难抓取 SPA。 (尽管 Google 目前正在改进它以跟踪页面上的动态 JavaScript。)
6. 潜在的 A/B 测试问题
最后,在测试单页应用程序时,我们可能会遇到一些 A/B 测试问题,主要是由于页面加载方式和测试交付方式,但稍后我们将更详细地介绍这一点。
流行的单页应用程序框架。 选择什么:React、Angular 或 Vue?
开发人员可以使用多种框架来构建单页应用程序,例如:
- 角
- 反应
- 流星
- 骨干网
- 余烬
- 聚合物
- 淘汰赛
- 奥雷利亚
然而,最流行的是 Angular(在 GitHub 上有大量文档)、React(开源,在 GitHub 上有详细的文档)和 Vue.js(三者中的最新版本)。
单页应用程序站点示例
什么样的网站是建立在 SPA 框架上的?
由于其出色的加载速度,一些最大的网站被构建为 SPA:
- 网飞
- 邮箱
- YouTube
- 爱彼迎
大多数 SPA 都是使用 React 和 Angular 等框架构建的。
以下是一些著名的 SPA 示例:
网飞
流行的娱乐流媒体服务利用 React 框架允许其用户观看电视节目和电影而不会遇到任何延迟。
当您考虑在 Netflix 上传输了多少数据以及由多少人流式传输时,可以合理地得出结论,Netflix 的 SPA 方法充分利用了这种方法。
Facebook 的新闻提要是 SPA 的一个例子。
当您滚动浏览以前的视频或单击其他按钮时,特定部分的内容会加载到页面上。 要忍受这种体验,您无需离开页面。
邮箱
当您单击收件箱中的消息时,浏览器会停留在同一网页上。
如何在单页应用程序 (SPA) 网站上进行 A/B 测试?
与其详细介绍我们之前介绍过的针对 SPA 网站的特定 A/B 测试想法,我想介绍如何在 SPA 网站上实际运行测试。
为什么?
好吧,在 SPA 站点上运行测试与静态 MPA 不同,原因有以下三点:
- 导致测试触发的触发器,
- 建立 SPA 的框架,以及
- 您用来测试的工具。
所以让我解释一下基本原理……
测试触发器
通常,对于大多数 A/B 测试,我们会根据 URL 字符串触发实验。 如果有人访问了我们要测试的页面的特定 URL,并且他们符合我们设置的标准,那么他们就有机会为他们运行实验。
由于 SPA 没有特定的 URL 触发器并使用 JavaScript 重新呈现页面元素,因此我们需要使用其他触发器方法,例如:
- 轮询触发器,
- 在站点区域中使用 JavaScript 条件,以及
- 手动激活。
这样,我们可以确保测试被触发并在正确的条件下运行。
SPA 框架
不过,这不仅仅是设置新的触发器。 由于 3 个流行的框架运行和交付 SPA 站点的方式,您可能需要调整测试设置以使其正确交付,具体取决于您使用的框架。
我们有以下每一项的指南:
- 在 AngularJS 页面上运行实验
- 在 VueJS 页面上运行实验
- 在 ReactJS 页面上运行实验
用于测试 SPA 的工具
在 SPA 网站上设置测试时,您必须考虑的不仅仅是 JavaScript 框架。 您还需要查看您使用的实际工具如何在 SPA 站点上运行测试,因为它会影响您是否可以在特定框架上运行测试。
以下是我们使用转换体验在 SPA 网站上运行 A/B 测试的方式:
- 如果您是第一次使用该工具,请运行 A/A 测试以确保正确设置该工具。 (只需执行一次。)
- 使用数据层来保存 URL 部分和其他页面数据(因为 URL 本身不会改变)。
- 视口中的站点部分是一个重要的触发器,可用于调用变体。 当 URL 没有随着部分滚动而更新时,这是必要的。
- 确保您使用 CDN 或预取内容,以便快速加载更新的站点部分内容并且不会破坏 SPA 的流动/原生性质(其最大优势之一)。
- 确保正在轮询和收集触发的目标,即使页面没有刷新。
- 您也可以在服务器端进行基于 SPA 的 A/B 测试。
对于您可能使用的任何测试平台都是如此,因此当我们分解下面的不同 A/B 测试工具时,我们将介绍它们中的每一个如何在 SPA 上进行实际测试,以便您决定哪种最适合您。
已适应单页应用程序 (SPA) 站点的 10 大 A/B 测试工具
既然我们已经了解了 SPA 是什么以及在测试 SPA 站点时需要牢记的常见问题,那么让我们分解一下允许您对其运行测试的最流行的测试工具。
- 转换体验
- Adobe 目标
- VWO
- 喀麦隆
- SiteSpect
- 优化
- 谷歌优化
- ABlyft
- AB 美味
- 动态产量
#1:转换体验
定价:每月低至 699 美元,之后每 10 万访问者 199 美元。
计划类型:
他们提供免费试用吗? 是的,无需信用卡即可免费试用 14 天。
他们提供客户支持吗? 是的,从试用开始。 哪种类型? 实时聊天、博客和知识库,还有更多内容。
它如何适应处理 SPA? Convert 可以通过提供可在页面加载后的任何时间调用的 Convert Activation 函数(轮询)来处理 SPA。 允许特定触发,例如目标、JavaScript、手动激活等。 还允许您在每次视图更改时重新加载转换设置,并且可以在客户端或服务器端跟踪。
它有能力通过 JavaScript 触发实验吗? 是的。 你可以在这里读更多关于它的内容。
它是否在不依赖页面刷新的情况下轮询目标触发? 是的。 通过在 Project Settings > Global Project Javascript 上添加一些准备就绪的代码或通过与 SPA 框架的直接集成。
阅读有关在 SPA 上运行实验的更多信息。
信任半径评论:
主要客户:索尼、Jabra、联合国儿童基金会等。
他们关心隐私吗? 我们完全符合 GDPR。 我们甚至停止使用其他不符合 GDPR 的公司的工具进行内部工作,这对我们来说意义重大。
他们关心这个世界吗? 是的。 它在我们的 DNA 中。 我们种树、开展社区计划、从最初的申请开始支持多样性、向慈善机构捐款等等。 哎呀,我们是 15 倍碳负。
这个 A/B 测试平台在运行中的样子:
#2:Adobe 目标
定价:仅在预订电话后可用。 起步价约为每月 10,000 美元。
他们提供免费试用吗? 不。
计划类型:
他们提供客户支持吗? 是的,以知识库和视频培训计划的形式。
它如何适应处理 SPA? Adobe Target 可以通过可以在 SPA 代码中调用的 triggerView() 函数来处理 SPA。 您可以在此处阅读有关此内容的更多信息。
它有能力通过 JavaScript 触发实验吗? 是的。
它是否在不依赖页面刷新的情况下轮询目标触发? 是的。 但是,它需要与 SPA 框架直接集成。
信任半径评论:
主要客户: Nvidia、Sprint mobile、菲利普斯。
他们关心隐私吗? 是的,但具有讽刺意味的是,他们需要您的电子邮件和电话号码才能了解更多信息。 然而,他们在第一方数据方面做了大量工作以进行非侵入式跟踪。
他们关心这个世界吗? 非常如此。 他们倡导多样性,致力于 100% 可再生能源建筑,降低排放,开展社区行动计划等等。
这个测试工具的实际效果:
#3。 VWO
定价:起价 99 美元/月。 更多需要根据您的需求定制定价。 您必须联系 VWO 销售团队。
计划类型:
他们提供免费试用吗? 是的,您可以开始 30 天免费试用。
他们提供客户支持吗? 是的,您可以在需要帮助时给他们打电话。 或查阅他们的资源页面。
它如何适应处理 SPA? VWO 可以通过其标准跟踪代码自动处理 SPA,并提供触发页面更改的功能。
对于使用新内容加载更改 URL 字符串的 SPA,它适用于标准安装。 对于不更改 URL 的 SPA,您需要使用自定义 URL 设置虚拟页面。
它有能力通过 JavaScript 触发实验吗? 是的。 通过调用“applychanges”。
它是否在不依赖页面刷新的情况下轮询目标触发? 是的。 它将仅通过包含 VWO 跟踪代码来自动检测 URL 和浏览器历史记录的更改。
信任半径评论:
主要客户: Ubisoft、AMD、Penn Foster、Optimeria 和 IMB Bank。
他们关心隐私吗? 是的。 他们遵守主要的隐私法律和法规,但他们将一些访问者数据存储在其服务器上。
他们关心这个世界吗? Wingify(VWO 背后的品牌)的董事长 Paras Chopra 在推特上发布了他们对几项 COVID 救援计划的支持,包括在德里建立一个 10 床位的 COVID 护理设施。
这个 A/B 测试平台在运行中的样子:
#4。 喀麦隆
定价:根据您的要求定制。 您可以通过联系销售团队获得独特的价格。
计划类型:您需要联系他们的支持团队了解定价。 计划基于您的要求。
他们提供免费试用吗? 是的。
他们提供客户支持吗? 是的。 您甚至可以聘请专门的客户经理来协助您处理复杂的项目。
它如何适应处理 SPA? Kameleoon 有一个广泛的激活 API,能够在他们的平台上激活实验。 在此处阅读更多相关信息。
它有能力通过 JavaScript 触发实验吗? 是的。 通过 assignVariation() 函数。
它是否在不依赖页面刷新的情况下轮询目标触发? 它会自动检测 URL 更新。 但是,当没有发生 URL 更改时,应通过其 API 调用实验激活。
信任半径评论:
主要客户:雷克萨斯、Unity、Providence、丰田和乐天使用 Kameleoon。
他们关心隐私吗? 它们符合 HIPAA、GDPR 和 CCPA。 他们还具有灵活的同意管理功能,可以针对每个 A/B 测试调整您的隐私政策。
他们关心这个世界吗? 我找不到他们赞助的任何慈善机构或他们支持的环境事业的证据。 不过,有趣的是,他们在德国和法国的办公室里有两只活的变色龙。
这个 A/B 测试平台在运行中的样子:
#5:SiteSpect
定价:您必须联系 SiteSpect 以根据您的需要定制价格。
计划类型:通话前没有可用信息。
他们提供免费计划吗? 是的,他们提供免费试用。
他们提供客户支持吗? 可以通过电话和电子邮件获得免费和付费版本的客户支持。 他们的知识库中还提供了预先录制的网络研讨会。
它如何适应处理 SPA? SitesSpect 充当代理,所有网站元素都可以在从服务器下载时更改并交换为其他版本。
这意味着他们可以在组装页面之前修改任何元素,甚至在页面上下载 SPA 之前。 但是,您将需要技术专业知识才能确定需要交换哪些元素,而且绝对不像更改网站上的页面那么容易。
此外,任何预先组装在服务器上的组件都无法使用此解决方案重新组装。
它有能力通过 JavaScript 触发实验吗? 不,这一切都是在代理中完成的,类似于服务器端。
它是否在不依赖页面刷新的情况下轮询目标触发? 不,原因和之前一样。 这一切都在代理中完成,类似于服务器端。
信任半径评论:
主要客户: Staples、PetSmart、AmericanGirl 和 Urban Outfitters 使用 SiteSpect。
他们关心隐私吗? 他们是这样。 它们通过了 PCI DSS 3.2 认证; 符合 GDPR、CCPA 和隐私盾,并准备好 HIPAA。
他们关心这个世界吗? 自 2014 年以来,SiteSpect 一直赞助一些慈善项目。
这个 A/B 测试工具的实际效果:
#6。 优化
定价:他们使用自定义定价模型。 但Splitbase 预测它们每年至少要花费 36,000 美元。
计划类型:如果没有联系他们进行演示,我无法找到此信息。
他们提供免费试用吗? 不,他们在 2018 年停止了免费计划。
他们提供客户支持吗? 是的。 他们拥有大量资源来帮助用户摆脱困境,并提供电话号码以 24/7 全天候寻求帮助。
它如何适应处理 SPA? Optimizely 对 SPA 的支持可以通过选中一个复选框来激活。 这会检测 URL 何时更改或 DOM 何时更改,从而激活实验评估,以及激活访问者在当前页面上被存储的那些。
它有能力通过 JavaScript 触发实验吗? 是的。
它是否在不依赖页面刷新的情况下轮询目标触发? 是的。 它轮询 URL 更改和 DOM 更改。
信任半径评论:
主要客户:微软、IBM、惠普、eBay、雅马哈、必胜客和 Atlassian 都在使用它。
他们关心隐私吗? 他们考虑到新旧隐私法并将其集成到他们的产品中,这样您(用户)就不必担心合规性。
他们关心这个世界吗? 大多数新员工在第二天就被派往社区做志愿者。
这个 AB 测试软件在运行中的样子:
#7:谷歌优化/优化 360
定价:此工具有 2 个版本。 优化是免费的,但要获得高级功能,您必须选择 Google Optimize 360。
Optimize 360 的定价是定制的(尽管据传约为每年 150,000 美元)。 要获得每月价格,您必须填写表格以联系他们的销售团队。
计划类型:
他们提供免费试用吗? 是的。
他们提供客户支持吗? 他们有一个资源中心,其中包含提示、视频教程、帮助社区等。
它如何适应处理 SPA? Google 优化通过允许在 URL 或 DOM 更改时自动激活实验更改来提供 SPA 支持。
它还提供了一个激活事件,在该事件中可以使用代码激活实验更改。
它有能力通过 JavaScript 触发实验吗? 是的。 通过他们建议通过 GTM 插入的 optimize.activate。
它是否在不依赖页面刷新的情况下轮询目标触发? 是的。 它在启用连续激活时发生。
信任半径评论:
主要客户:阿迪达斯、Spotify、欧洲银行等。
他们关心隐私吗? 他们遵守使用其产品的国家/地区适用的客户数据保护法律。
他们还与第三方和数据保护机构合作,以确保用户数据的安全。
他们关心这个世界吗? 谷歌自 2007 年以来一直保持碳中和,并计划到 2030 年实现无碳排放。除此之外,他们还以承诺 10 亿美元的众多慈善姿态而闻名。
这个拆分测试平台在运行中的样子:
#8。 ABlyft
定价:可根据要求提供定价。 然而,我确实找到了一份较旧的文档,其中他们为 5k 用户免费提供有限的测试,然后每月 329 美元(如果每年支付 279 美元)。
计划类型:
他们提供免费试用吗? 是的,您可以开始 30 天免费试用,无需信用卡。
他们提供客户支持吗? 是的。 他们有基本的知识库和实时聊天选项。
它如何适应处理 SPA? ABlyft 还具有自动和程序化 AB 测试。 通过 URL、DOM 更改和编程 API 激活选项。
它有能力通过 JavaScript 触发实验吗? 是的,通过 API 函数。
它是否在不依赖页面刷新的情况下轮询目标触发? 是的,当 URL 和 DOM 发生变化时。
信任半径评论:
这个工具的 Trust Radius 上没有评论,所以我接受了 G2 的评论。
顶级客户Elle 杂志、Bazaar 和 Instyle。
他们关心隐私吗? 是的。 他们遵守主要的隐私法和 GDPR。
他们关心这个世界吗? 不是我能找到的。
这个 A/B 测试平台在运行中的样子:
#9。 AB 美味
定价:对于 Essentials 计划的 40 万月度测试访问者,起价为 1900 美元/月。 增长计划的费用为 3800 美元/月,而精英计划的起价为 5700 美元/月。
计划类型:需要联系他们的销售团队了解定价和计划类型。
他们提供免费试用吗? 不可以。您可以请求演示电话以查看他们的新功能。
他们提供客户支持吗? 是的。 他们有知识库和实时聊天。
它如何适应处理 SPA? AB Tasty 允许在满足特定条件时激活实验,可以在页面加载时或定期检查直到满足条件。 这些定期检查的条件可以是 URL 值、页面上基于 CSS 选择器的元素、返回 true 的 JS 条件或自定义代码,也可以是通过 javascript 承诺的编程激活。
它有能力通过 JavaScript 触发实验吗? 是的。 通过 Javascript 承诺或定期评估 JS 条件。
它是否在不依赖页面刷新的情况下轮询目标触发? 是的。 可以通过 CSS 选择器、JS 条件或 JS Promises 定期评估页面上的 URL 值、元素。
信任半径评论:
主要客户:迪士尼、欧莱雅、Kalviyo 等。
他们关心隐私吗? 是的。 用户 IP 地址用于创建 ID 代码,然后在进入工具之前立即删除。 ID 代码被匿名化,然后在 13 个月后被删除。
他们关心这个世界吗? 他们直接向非政府组织捐款,与社会行动团体合作,回收并赞助蜂箱。
这个 A/B 测试平台在运行中的样子:
#10。 动态产量
定价:我找不到任何关于定价的信息,只是它比其他提供个性化的工具平均高出 24%。
计划类型:同样,我找不到任何关于此的信息。
他们提供免费试用吗? 是的,但您必须先申请演示。
他们提供客户支持吗? 是的。 哪种类型? 他们提供电话和电子邮件支持,以及帮助安装的基本知识库,然后是教授测试的学院。
它如何适应处理 SPA? Dynamic Yield 通过利用称为MutationObserver的 Web API 来处理 SPA,该 API 提供了 DOM 突变的挂钩,并使该工具能够跟踪突变发生的时间。 API 的使用使该工具能够根据需要实时应用更改。
它有能力通过 JavaScript 触发实验吗? 是的。 他们确实警告说,一些较旧的 JavaScript 库可能不受支持。
它是否在不依赖页面刷新的情况下轮询目标触发? 需要在活动的高级设置中启用此功能,方法是选中在每个 SPA 事件上服务的选项。
信任半径评论:
主要客户: Urban Outfitters、宜家、丝芙兰等。
他们关心隐私吗? 动态收益完全符合 GDPR。
他们关心这个世界吗? 他们实际上做了一些非常酷的事情,那就是向符合特定标准的慈善机构免费使用他们的工具。 他们也在社区工作。
这个 A/B 测试平台在运行中的样子:
简而言之:A/B 测试单页应用程序
所以你有它。
我们的 A/B 测试单页应用程序的完整指南。 它们是什么、它们是如何工作的,以及您可以用来优化 SPA 网站或 Web 应用程序的 10 大平台。 我们为初学者提供了简单的知识,所以即使您的技能还没有与所有这些技术术语相匹配,我们希望您仍然能从中有所收获!
想了解有关每种工具的更多信息吗? 我们就他们认为未来 5 年最好的顶级工具(包括此列表中的工具)采访了一群 CRO 专家。 看看他们在这里要说什么。
请继续关注单页应用程序的 A/B 测试系列的第 2 部分,我们将在其中窥探事物的后端,并分享一些在单页应用程序上运行成功测试的更多技术提示和最佳实践。 过两天就出来了!