使用广告指标衡量 Core Web Vitals 实测数据

1. 准备工作

在此 Codelab 中，您将学习如何使用预构建的 Google 跟踪代码管理器 (GTM) 代码模板衡量 Core Web Vitals，以及如何将数据发送到 Google Analytics 4 (GA4) 媒体资源。您还将学习如何从 Google Ad Manager 和 Google AdSense 中提取数据到 GA4，以便使用预构建的 Looker Studio 信息中心将 Core Web Vitals 实测数据和广告效果指标相关联。

您将执行的操作

  • 将代码导入并设置到 Google 跟踪代码管理器容器中。
  • 在 GA4 中衡量网页的 Core Web Vitals。
  • 在 Google 跟踪代码管理器中设置 GA4 事件代码。
  • 探索 dataLayer 中的网页指标数据以及 GA4 报告中的网页指标数据。
  • 将您的 GA4 媒体资源与 Google Ad Manager 和 Google AdSense 相关联。
  • 通过 Looker Studio 信息中心将 Core Web Vitals 与广告收入相关联。

所需条件

  • 拥有 Google Analytics（分析）账号和 GA4 网站媒体资源，并且具有编辑权限。
  • 拥有 Google 跟踪代码管理器账号和网络容器，并且具有发布权限。
  • 拥有 Google Ad Manager 广告资源网和/或 Google AdSense 账号，并且具有管理员访问权限。
  • 拥有 Looker Studio 账号。

2. 将代码模板从 GitHub 添加到 GTM

通过 GTM 代码模板衡量 Core Web Vitals 基于 web-vitals 库。首先，我们将下载 GTM 代码模板。

  1. 打开 template.tpl 文件
  2. 在您的计算机上下载该文件

现在，前往您的 Google 跟踪代码管理器账号。

  1. 打开您的网络容器。
  2. 创建一个新工作区并输入名称（例如“Core Web Vitals 衡量”）
  3. 前往“模板”。
  4. 在“代码模板”部分，点击“新建”按钮。

添加 Google 跟踪代码管理器代码模板。

  1. 点击“更多操作”菜单，然后选择“导入”。

导入 Google 跟踪代码管理器代码模板。

  1. 从您的计算机中选择之前下载的 TPL 文件。
  2. 点击“保存”按钮。

保存 Google 跟踪代码管理器代码模板。

您已将代码模板添加到 Google 跟踪代码管理器容器中。

3. 设置 Web Vitals 代码

  1. 在 Google 跟踪代码管理器工作区中，前往“代码”。
  2. 点击“新建”，然后点击“代码配置”，并从“自定义”部分选择“Web Vitals”代码，以添加 Web Vitals 代码。
  3. 下一步是配置不同的设置。GitHub 代码库中介绍了所有设置。对于此 Codelab，以下设置足以让最终信息中心正常运行。

代码的配置。

  1. 应用其中一个网页浏览触发器，例如“所有网页”触发器。
  2. 如果需要，还可以添加触发器例外情况。
  3. 将代码命名为“Core Web Vitals - 所有网页”，然后保存。

Web Vitals 代码的自定义触发器。

4. 探索 dataLayer 中的 Web Vitals 数据

如需查看代码的实际效果，请切换到 Google 跟踪代码管理器的预览模式。Tag Assistant 将打开，并要求您提供网址以预览和调试设置。提供已实现 Google 跟踪代码管理器容器的网页的网址，然后点击“关联”。系统将打开一个单独的标签页，其中包含您提供的网址。

  1. 通过滚动和点击元素或空白区域与网页互动。
  2. 然后，切换回包含 Tag Assistant 和 Google 跟踪代码管理器预览模式的标签页。
  3. 在左侧，您将看到推送到 dataLayer 中的不同事件。
  4. 首先，您应检查 Web Vitals 代码是否在您选择的网页浏览量触发器上触发。

检查 Web Vitals 代码是否触发。

  1. 您还应看到三个“web_vitals”事件，其中每个事件代表一个核心网页指标：LCP、INP 和 CLS。

dataLayer 中的三个 Web Vitals 事件。

  1. 点击第一个事件，然后在右侧打开“API 调用”标签页，您将在其中看到从代码模板推送到 dataLayer 中的数据。

由代码推送至 dataLayer 的数据。

  1. 另请检查“web_vitals”事件的其他条目。使用 web-vitals.js 文档 作为不同数据类型的参考。

5. 将 Web Vitals 数据发送到 GA4

如需从 dataLayer 中提取 Core Web Vitals 数据并将其发送到 GA4，您必须执行以下操作：

  • 为 GA4 代码创建触发器
  • 创建变量以从 dataLayer 中提取数据
  • 创建 GA4 事件代码

创建触发器

  1. 在 Google 跟踪代码管理器工作区中，前往“触发器”。
  2. 点击“新建”，然后点击“触发器配置”，并从“其他”部分选择“自定义事件”，以添加新触发器。
  3. 在“事件名称”字段中设置“web_vitals”，为触发器命名并保存。

GA4 代码的触发器配置。

创建 dataLayer 变量

  1. 在 Google 跟踪代码管理器工作区中，前往“变量”。
  2. 创建一个类型为“数据层变量”的新用户定义的变量。
  3. 在“数据层变量名称”字段中设置“webVitalsData.name”，为变量命名（例如“DLV - webVitalsData.name”）并保存。

第一个数据层变量的配置。

  1. 对其他四个必需的数据层变量重复执行这些步骤。创建“webVitalsData.value”。

第二个 dataLayer 变量的配置。

  1. 创建另一个变量，其名称字段为“webVitalsData.id”。

第三个 dataLayer 变量的配置。

  1. 创建“webVitalsData.rating”。

第四个 dataLayer 变量的配置。

  1. 创建“webVitalsData.delta”。

第五个数据层变量的配置。

  1. 您最终应得到以下用户定义的 dataLayer 变量：

所有 dataLayer 变量的概览。

创建 GA4 事件代码

在创建 GA4 事件代码之前，请确保您已设置 Google 代码。

  1. 在 Google 跟踪代码管理器工作区中，前往“代码”。
  2. 点击“新建”，然后点击“代码配置”，并从“Google Analytics”部分选择“Google Analytics：GA4 事件”代码，以添加 GA4 事件代码。
  3. 在相应字段中输入您的衡量 ID。

GA4 衡量 ID 的字段。

  1. 对于“事件名称”输入字段，请从之前创建的步骤中选择 dataLayer 变量“DLV - webVitalsData.name”。

用于指定 GA4 事件名称的字段。

  1. 如屏幕截图所示，将其他 dataLayer 变量添加为事件参数。另请务必添加参数“event_category”，其值类似于“Web Vitals”，以便对 Core Web Vitals 事件进行分组。

在 GA4 代码中配置事件参数。

  1. 在 GA4 界面中将这些事件参数注册为自定义维度。
  2. 根据您的 GA4 设置要求应用其他设置。
  3. 将“web_vitals”自定义事件设置为 GA4 代码的触发器。
  4. 如果需要，还可以添加触发器例外情况。

GA4 代码的触发器配置。

6. 检查 GA4 中的数据

如需验证到 GA4 的数据传输，请再次切换到 Google 跟踪代码管理器的预览模式。向 Tag Assistant 提供网址，然后点击“关联”。

  1. 通过滚动和点击元素或空白区域与网页互动。
  2. 然后，切换回包含 Tag Assistant 和 Google 跟踪代码管理器预览模式的标签页。
  3. 在左侧，点击每个“web_vitals”条目，并确认 GA4 Core Web Vitals 代码已触发。

检查 GA4 代码是否触发。

  1. 点击卡片以打开 GA4 代码进行验证，确认数据已从 dataLayer 中正确提取。请务必将变量显示为值。

通过 GA4 代码发送的数据。

  1. 现在，切换到您的 GA4 媒体资源并打开“实时报告”。
  2. 在“按事件名称统计的事件数”卡片中，您可以验证核心网页指标事件是否已成功收集。

在 GA4 实时报告中检查传入的数据。

  1. 如果实时报告中处理大量数据，则可能无法轻松识别事件。在这种情况下，请使用 debugview 报告，该报告可让您查看特定设备的数据。

在 GA4 调试视图报告中检查传入的数据。

7. 发布设置

成功测试设置后，就可以发布工作区了。

  1. 打开 Google 跟踪代码管理器工作区。
  2. 在界面右上角，点击“提交”。
  3. 提供版本名称和版本说明，然后点击“发布”以将设置推送到正式版。

8. 将 GA4 与 Google Ad Manager 或 Google AdSense 相关联

在 GA4 中收集 Core Web Vitals 数据后，GA4 中还需要提供与广告相关的指标，信息中心才能正常运行。将 Google Ad Manager 和 Google AdSense 与 GA4 相关联，或者仅关联其中一个广告解决方案。请注意，您必须拥有 GA4 中的编辑者（或更高级别）权限，以及 Google Ad Manager 和 Google AdSense 中的管理员权限，才能进行关联。

将 GA4 与 Google Ad Manager 相关联

  1. 前往您的 Google Ad Manager 广告资源网。
  2. 依次点击“管理”->“全局设置”->“投放网络设置”。
  3. 在“报告设置”部分，启用“Ad Manager 报告中的 Google Analytics 4 媒体资源报告”。

在 Ad Manager 报告中启用 GA4 媒体资源报告。

  1. 查看条款及条件，然后点击“确认”。
  2. 保存更新。
  3. 依次点击“管理”->“关联的账号”->“Google Analytics 4”。
  4. 点击“新建 Google Analytics 4 媒体资源关联”。
  5. 找到并选择要关联的 GA4 媒体资源。
  6. 点击“保存”，然后就完成了。

将 GA4 媒体资源与 Ad Manager 相关联。

将 GA4 与 Google AdSense 相关联

  1. 前往您的 Google AdSense 账号。
  2. 依次点击“账号”->“访问与授权”->“Google Analytics 集成”。
  3. 点击“+新建关联”。

将 GA4 媒体资源与 AdSense 相关联。

  1. 找到并选择要关联的 GA4 媒体资源。
  2. 点击“创建关联”。

9. 使用 Looker Studio 直观呈现数据

如需直观呈现 Core Web Vitals 数据以及广告指标，此步骤涉及设置 Looker Studio 信息中心。请按照以下步骤将 Core Web Vitals 与广告收入相关联。

  1. 打开此 Looker Studio 信息中心模板
  2. 复制信息中心。
  3. 从下拉列表中选择您的 GA4 媒体资源，以更新数据源。
  4. 完成

请注意，为了让信息中心正常运行并正确显示数据，数据依赖于此 Codelab 中的语法和命名惯例。

信息中心的第一页将显示 Core Web Vitals 效果的历史记录：

Core Web Vitals 信息中心的第一页。

在第二页上，您可以将 Core Web Vitals 与 Google Ad Manager 和/或 Google AdSense 的广告收入相关联：

Core Web Vitals 信息中心的第 2 页。

第三页可让您在网页路径级别分析 Core Web Vitals 效果以及与广告相关的指标：

Core Web Vitals 信息中心的第 3 页。

10. 总结

恭喜！您已了解如何使用 GA4 衡量核心网页指标并生成报告，以及如何使用 Google Ad Manager 和 Google AdSense 衡量广告效果指标并生成报告。

了解详情