衡量单页应用

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

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

示例：假设您有一个用于获取潜在客户的表单。该表单包含三个界面：

  • 用于采集客户信息的第一个界面。
  • 第二个界面，客户可在其中表明对特定服务的兴趣。
  • 第三个屏幕页面，用于订阅与客户兴趣相关的在线讲座。

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

准备工作

本页面假定您已具备以下条件：

实现单页应用衡量

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

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

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

浏览器历史记录更改实现

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

在 GA4 中启用增强型衡量功能

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

  1. 打开 Google Analytics

  2. 在管理界面中，依次点击数据收集和修改 > 数据流 > 网站。

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

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

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

  5. 保存所做的更改。

注意：如果为“基于浏览器历史记录事件的网页更改”启用了增强型衡量功能，Google Analytics 会自动监听历史记录事件（例如在 SPA 中使用的事件）并发送 page_view 事件。为了向 GA4 发送网页浏览，您无需在 Google 跟踪代码管理器中配置特定的历史记录变量或触发器。

使用 Google 跟踪代码管理器触发器来处理历史记录事件

如果您需要在 Google 跟踪代码管理器中根据浏览器历史记录更改触发其他类型的代码（例如向其他营销平台发送数据），可以使用“历史记录更改”触发器类型。

在配置代码或变量以使用“历史记录更改”触发器时，请务必使用 Google 跟踪代码管理器提供的正确内置变量：

  • History New URL Fragment：历史记录事件发生后的网址片段。
  • History Old URL Fragment：历史记录事件发生之前的网址片段。
  • History New State：新的历史记录状态对象。
  • History Old State：旧的历史记录状态对象。
  • History Source：历史记录事件的来源（例如 popstate、pushState、replaceState）。

这些内置变量可能需要先在 Google 跟踪代码管理器中启用，具体方法是依次选择变量 > 配置。

如需详细了解此触发器，请参阅历史记录更改触发器。

验证效果衡量设置

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

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

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

对自动事件的影响

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

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

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

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

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

上一页
衡量网页浏览
下一页
设置购买事件