使用 Google 跟踪代码管理器衡量单页应用

本教程介绍如何使用 Google 跟踪代码管理器为单页应用 (SPA) 设置 Google Analytics 衡量。您将了解如何配置 Google Analytics 媒体资源、启用必要的 GTM 变量，以及创建在历史记录更改时触发的代码。

准备工作

本教程假定您已具备以下条件：

• Google Analytics 账号和 媒体资源。
• 已在 Google 跟踪代码管理器 容器 安装到您的 SPA。
• 同时拥有 Google Analytics 和 Google 跟踪代码管理器的“编辑者”（或更高级别）角色。

第 1 步：准备 GA4 数据流

如需在 SPA 中手动跟踪 page_view 事件，您必须先在 GA4 中停用基于历史记录的自动网页浏览，以避免重复统计。

1. 打开 Google Analytics。
2. 在管理 界面中，点击 数据收集和修改 下的数据 流 。
3. 选择您的网站数据流。
4. 在增强型衡量下，点击设置图标 。
5. 在网页浏览 > 显示高级设置 下，取消选中根据浏览器历史记录事件判断的页面更改 。
6. 点击保存 。

第 2 步：在跟踪代码管理器中启用内置的历史记录变量

如需在 GTM 中使用基于历史记录的触发器或变量，您必须先启用内置的历史记录变量。

1. 打开 Google 跟踪代码管理器。
2. 在您的工作区中，前往变量 。
3. 在内置变量 下，点击配置 。
4. 在历史记录 部分，启用以下变量：
   • History New URL Fragment
   • History Old URL Fragment
   • History New State
   • History Old State
   • History Source
5. 关闭配置面板。

注意： 这些变量并非基本网页浏览量设置的必要条件。只有在您想要过滤触发器或实现自定义逻辑时，才会使用这些变量， 例如本页末尾备注中提及的上一页逻辑。

注意： 一些较旧的文档可能会提及 Old History URL 或 New History URL。这些不是标准的内置变量。请改用列出的变量。

第 3 步：创建“历史记录更改”触发器

接下来，创建一个触发器，以便在 SPA 中发生历史记录更改事件（例如 pushState 或 replaceState）时触发。

1. 在跟踪代码管理器工作区中，前往触发器 菜单。
2. 点击新建 。
3. 在触发器配置中，选择历史记录更改触发器。
4. （可选）如果您只想跟踪某些屏幕更改，请更新触发器以在某些历史记录更改 时触发。
5. 为触发器命名（例如“历史记录更改”），然后点击保存 。

第 4 步：创建 Google 代码

现在，创建一个 Google 代码，以便在发生历史记录更改时更新 page_location 参数。

1. 在代码 菜单中，点击新建 。
2. 在代码配置 中，选择 Google 代码 。
3. 输入您的代码 ID （与初始 Google 代码使用的 ID 相同）。

4. 在配置设置下，添加以下参数：

   • page_location：{{Page URL}}
   • page_title：{{Page Title}}
   • update：true
   注意： update 参数会将配置值合并到 现有代码配置中，并禁止立即重复触发 page_view 事件。page_referrer 此处未包含，因为 Google Analytics 会在初始网页加载时自动跟踪原始外部引荐来源，而省略该参数可让 Google Analytics 自动将之前的虚拟网页网址填充为报告中导航路径的引荐来源。

5. 为代码命名（例如“Google 代码 - SPA 更新”），然后点击保存 。

   注意 ：请勿在此 Google 代码的触发条件部分中添加触发器。它将作为设置代码在第 5 步中使用代码触发顺序触发。

第 5 步：发送虚拟 page_view 事件

最后，创建一个 GA4 事件代码，以便为每个虚拟网页加载发送实际的 page_view 事件。

1. 在代码 菜单中，点击新建 。
2. 在代码配置 中，选择 Google Analytics：GA4 事件 。
3. 输入您的衡量 ID 。
4. 将事件名称 设置为 page_view。
5. 在高级设置 > 代码触发顺序 下，选择在 GA4 事件 - 虚拟网页浏览触发之前触发代码 ，然后选择您在第 4 步中创建的 Google 代码 - SPA 更新 代码。
6. 在触发条件下，选择您在第 3 步中创建的历史记录更改触发器。
7. 为代码命名（例如“GA4 事件 - 虚拟网页浏览”），然后点击保存 。

第 6 步：验证设置

如需确保系统正确记录虚拟网页浏览，请执行以下操作：

1. 在跟踪代码管理器中，点击预览以进入预览 模式。
2. 在 SPA 中导航。
3. 在 Google Analytics DebugView 中，验证每次屏幕更改时是否都会显示新的 page_view 事件。
4. 检查 page_location 值是否符合您的预期。

注意： 使用标准 {{Referrer}} 可捕获将用户引导至您网站的初始 来源。如需将 SPA 中的 上一个虚拟网页 作为引荐来源进行跟踪，您需要实现自定义 GTM 变量来存储上一个网页的位置。