在单页应用程序 (SPA) 上运行实验时，VWO 如何创建无摩擦的访客体验

深入了解 VWO 对动态网站的原生支持如何让您在为访问者构建无缝体验时轻松进行实验。

许多网站都是作为单页应用程序 (SPA) 构建的，因为它们与传统静态网站相比几乎没有关键优势：动态网站快速、紧凑且响应迅速。 此类网站使您能够优化用户看到的内容，以创造引人入胜的独特体验。 如果您从开发团队听说您的网站是使用 React、Vue、AngularJS、Ember 或 Backbone 构建的，那么您可能正在使用 SPA，而本文与您相关。

在本文中，我们将讨论在 VWO，我们如何通过对 SPA 测试的内置支持使动态网站的实验变得有效和容易，这样您就只专注于您的网站体验优化工作，而不是其他任何事情。

但首先，让我们谈谈最初将您带到这里的问题。

在动态网站上运行实验的挑战

您可能在这里，因为当您在 SPA 上运行实验时，您对着陆页所做的更改对最终用户是不可见的。 结果，您无法随心所欲地测试和验证您的想法，这让您感到沮丧。

首先，让我们了解 SPA 与传统网站不同。 每次有人访问传统网站时都会加载整个网页。 但是，在 SPA 中，仅更新页面的某些部分。 这是因为，在 SPA 中，构建网页外观的 HTML、CSS、脚本等资源只加载一次。

根据用户与网页不同部分的交互方式，您在页面的特定部分看到的内容会随着用户的操作而动态变化。 比如说，如果用户单击一个按钮，则会打开一个弹出窗口。 此弹出窗口是框架根据用户交互进行的动态更改，而不影响性能。 SPA 上存在动态变化的更多示例如下：

• 搜索结果列表中可以展开以查看其详细信息的项目。
• 在表单中，某些字段仅在访问者从下拉列表中选择预定义值时才会出现在页面上。
• 该网站使用一些组件，如日历、颜色选择器等，每次用户需要使用它们时都会重新加载。

虽然这有利于用户体验，但在您的网页上对任何这些动态元素（如搜索结果列表、下拉列表、小部件、弹出窗口、横幅等）进行更改后运行测试活动变得困难。 这是因为每次网站上发生动态变化时，都需要应用对组件所做的修改。

可以这样想——你正在网页上运行测试。 每次网页加载（通过用户访问页面）或页面创建如上所述的动态元素时，SPA 框架都会显示原始状态（与您希望在测试中显示的变体不同）。

您需要的是一个实验平台，确保您的测试变体替换原始视图，以便用户看到您希望他们看到的变体。 因此，在 SPA 上设置测试时（假设您正在测试弹出框中的内容），您会期望测试控制和变体如下所示：

但是，在没有 SPA 支持的情况下，对变体所做的更改将恢复为控制，使两者看起来相同。 很像这样：

这只是正在发生的事情的简化版本。 如果您有兴趣从技术上了解屏幕背后发生的事情，请继续阅读，否则您可以跳到本文的下一部分。

一些网站框架，如 GatsbyJS、Next.js、ReactJS 等，使用服务器端渲染并存储原始网页的快照，因为它应该加载。 因此，当您出于测试目的修改页面上的元素时，框架会将更改检测为“问题”，并将页面恢复为其在存储快照中显示的原始状态。 这反过来又会阻碍您的 A/B 测试。

其次，最新的框架如 React、Gatsby、Next.js、Vue.js、Angular 等，都使用了基于状态渲染的概念。 例如，在 React 中，每当由于 A/B 测试变化而在其中一种状态中实现更改时，网站的界面都会自动重新加载到其原始形式，因此用户永远不会看到变化。 这为网站访问者创造了次优体验。

VWO 如何轻松地对单页应用程序进行实验

既然我们已经讨论了问题，让我们来谈谈解决方案。 VWO 在其可视化编辑器中的高级原生 SPA 支持是 VWO 测试的一部分，可确保在实验中所做的修改应用于 SPA，以确保活动的可靠性并为您的访问者提供顺畅的体验。

1.测试您网站上的动态元素

虽然在上一节中已经定义了动态元素，但让我们通过一个具体的例子仔细看看它们。 假设您有一个电子商务网站。 单击“购物车页面”上的“X”（关闭）按钮后，会弹出警报。 现在，您想测试操作框上的副本更改，以查看可操作的消息和行动号召是否可以阻止人们关闭购物车页面。 警告框最初并不存在于网站代码中，但当访问者单击“X”（关闭）按钮时，SPA 框架会添加该框。 在这里，打开您正在运行测试的弹出窗口的按钮称为目标元素。

VWO 确保您要测试的更改在加载后立即应用于弹出窗口。 您所要做的就是通过单击按钮启用设置。 您可以在我们的知识库文章中阅读有关此设置的更多信息。

VWO 如何确保正确应用更改？

简单的。

VWO 随时观察页面元素（视频、图像、表格、部分等）以了解对它们所做的更改。 因此，当目标元素（上例中的关闭“X”按钮）加载时，VWO 会检测到它并应用您在变体中所做的修改。 即使没有重新加载网页，但用户只是与网站上的某个部分进行交互，也会发生这种情况。

让我们获得一点技术知识并进一步探索。 如果技术细节不适合您，您可以轻松跳过此步骤并转到下一点。

在动态网站中，根据用户行为，添加、删除或修改元素。 DOM 树就像所有网站组件（按钮、横幅、弹出窗口、小部件等）的存储库，并保留网站当前状态的快照。

VWO 的库使用 Mutation Observer - 一个浏览器界面，允许 VWO 观察 SPA 的 DOM 树中的变化。 这有助于检测页面上添加、删除或修改的任何新元素。 在这种情况下，VWO 会自动将更改应用于元素。 因此，每当元素动态加载时，都会在向访问者显示之前应用更改。 这提高了活动的可靠性，确保完全应用变化中的变化。

VWO 如何管理受框架渲染阻碍的更改？

在框架渲染完成之前，VWO 会隐藏 CTA 按钮。 VWO 反复检查渲染是否完成。 框架渲染完成后，VWO 活动开始执行。

您可以在我们的知识库文章中阅读有关这些设置的更多信息。

2.测试您网站上的任何其他页面元素

当页面加载时，现代 SPA 框架会在每次网站加载时将修改后的元素恢复为其原始状态。 因此，如果您正在测试页面，您的所有修改都将恢复为原始状态。 不仅是动态元素，而且对于页面上的所有元素，VWO 都会跟踪您为应对 SPA 框架测试挑战所做的更改。 在将这些更改应用到您的网页时，VWO 会通过测试检测页面上所做的所有更改（插入、删除和修改 DOM 节点）并重新应用它们以确保用户体验的规律性。

不需要明确的行动来实现对 VWO 的改进。 这是一个内置功能，可用于使用可视化编辑器构建的所有 VWO 活动，无论您的网站构建在何种框架上。

让我们看一些 VWO 可视化编辑器处理的更改的用例示例。

1. 假设您已从您的电子商务网站中删除了辅助 CTA 按钮（例如“添加到愿望清单”），以测试此更改是否会影响主要 CTA 上的点击次数（例如“添加到购物车”）。 这是一个测试用例，您可以在其中删除网站上的元素。 即使您删除了按钮，它仍然存在于由 React 等框架创建的虚拟 DOM 中，并且会在网站加载时引发错误。

2. 现在假设您的电子商务网站有一个注册流程，除了“立即提交”按钮外，还显示一个文本输入框来捕获访问者的电子邮件地址。 当您更改文本输入框的外观时，与之关联的网站样式组件也会发生变化。 VWO 的可视化编辑器确保用户看到的是最新应用的更改。 观察如何更改 SPA 中的表单字段，并确保为变体抽样的访问者看到这些更改而不是看到控制。

如何将 VWO 用于您的单页应用程序？

要将 VWO 用于您的 SPA，您只需在网站的 head 部分添加 VWO SmartCode，即可享受对 SPA 网站的默认支持。

通过如此简单的集成，您可以立即开始。 注册免费试用，探索 VWO 的功能，或向我们的产品专家请求演示。 您还可以了解有关我们最新、令人兴奋的产品更新的更多信息。