衡量单页应用

本文档适用于希望使用 Google Analytics 衡量其单页应用中的网页浏览量的开发者。

单页应用 (SPA) 是指仅加载一次 HTML 文档，并使用 JavaScript API 提取任何其他内容的网站。

示例：假设您有一个用于获取潜在客户的表单。该表单包含三个屏幕：> * 第一个屏幕用于获取客户信息。* 第二个界面，客户在此界面中表明对某些服务的兴趣。* 第三个屏幕 页面，用于注册与客户兴趣相关的在线讲座。

正确衡量 SPA 网页浏览量的关键在于，统计用户互动的每个屏幕的网页浏览量，并正确获取网页引荐来源网址，以便正确跟踪用户体验历程。

准备工作

本页面假定您已具备：

实现单页应用衡量

如需实现准确的 SPA 衡量，请使用以下方法之一触发新的虚拟网页浏览：

  • 浏览器历史记录更改（推荐）：如果您的 SPA 使用 History API（特别是 pushState() 和 replaceState() 方法）来更新屏幕，请使用此选项。

  • 自定义事件：如果您的网站使用 DocumentFragment 对象来呈现不同的屏幕，请使用此选项。

浏览器历史记录更改实现

如果您的 SPA 使用 History API，您可以在 Google Analytics 中启用增强型衡量功能，以便根据浏览器浏览记录事件自动跟踪网页浏览量。

在 Google Analytics 中启用增强型衡量功能

如需根据浏览器历史记录自动衡量page_views，请执行以下操作：

  1. 打开 Google Analytics

  2. 在管理界面中，点击“数据收集和修改”下方的数据流 > 网站。

  3. 在“增强型衡量功能”下，将开关滑动到开启，以启用所有选项。

  4. 点击即可修改各个选项。在网页浏览下，点击显示高级设置。请务必同时启用网页加载和根据浏览器浏览记录事件判断的页面更改。

    显示网页浏览量设置的图片

  5. 保存更改。

验证衡量设置

如需验证单页应用是否正确衡量网页浏览，请执行以下操作：

  1. 为 SPA 衡量设置中的每个代码启用调试模式。了解如何在 DebugView 中监控事件。

  2. 点击单页应用。当您点击进入新的虚拟屏幕时，应该会在 DebugView 中看到新的 page_view 事件。将 page_view 事件参数与前面的 page_view 事件进行比较，检查引荐来源网址和网页位置是否已正确更新。

单页应用的其他注意事项

除了发送 page_view 事件之外，还应考虑以下其他方面，以便与 Google Analytics 实现稳健的 SPA 集成，并提供更好的用户体验：

管理滚动位置

当用户在 SPA 中的视图之间导航时，浏览器通常会保留当前的滚动位置。这可能意味着用户看不到新虚拟网页的顶部，并且可能会影响滚动深度跟踪。

建议：在每次虚拟页面转换后，以编程方式将滚动位置重置为页面顶部或主内容容器。

// Example: Reset window scroll position on a route change in your SPA
window.scrollTo(0, 0);

// Or, if your content is within a specific element:
// document.getElementById('main-content').scrollTo(0, 0);

做出此项更改后，用户将从新内容的顶部开始浏览，这样 Google Analytics 滚动跟踪功能就可以准确衡量新虚拟网页上的互动情况。

确保内容可供浏览器功能访问

如果用户报告在虚拟网页加载后，浏览器功能（例如网页内搜索 [Ctrl+F]）无法正常运行，这可能表明 SPA 更新 DOM 的方式存在问题。

建议：确保您的 SPA 框架和路由逻辑使用新页面的内容完整且同步地更新 DOM 的相关部分。延迟渲染或从主 DOM 树中隐藏的内容可能无法立即被浏览器的搜索功能编入索引。在虚拟导航后测试页内搜索，以确认内容可访问性。

对自动事件的影响

如果您在 SPA 中正确实现了虚拟网页浏览衡量，Google Analytics 将会适当地处理其他自动事件。如果系统未针对屏幕变化记录虚拟网页浏览，Google Analytics 会将 SPA 视为单个网页，从而导致指标出现偏差。

例如，user_engagement 事件会衡量用户在网页上积极互动的时间。如果没有虚拟网页浏览，所有互动时长都会归因于初始网页加载，从而无法分析用户在各个屏幕上停留的时间。

正确实现虚拟网页浏览衡量后：

  • 当用户从一个虚拟网页导航到另一个虚拟网页时，系统会发送 user_engagement 事件。
  • 系统会计算上一个虚拟网页的互动时间，并将其与 user_engagement 事件一起发送，通常是在处理新虚拟网页的 page_view 事件之前。
  • 其他事件（例如点击或滚动）则与用户当前正在查看的虚拟网页的 page_location 相关联。

这样，您就可以分析 SPA 中各个屏幕或部分的用户互动度和其他指标，从而更准确地了解用户转化历程。

上一页
衡量会话和用户互动度
下一页
使用跟踪代码管理器衡量 SPA