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

1. 准备工作

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

您将执行的操作

  • 向 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. 依次点击“新建”和“代码配置”，以添加网页指标代码然后选择“网页指标”“自定义”部分。
  3. 下一步是配置不同的设置。GitHub 代码库中介绍了所有设置。对于此 Codelab 和最终信息中心，进行以下设置就足够了。

代码配置。

  1. 应用某个网页浏览触发器，例如“所有页面”触发。
  2. 如果需要，还要添加触发器异常。
  3. 将该代码命名为“核心网页指标 - 所有网页”然后保存

网页指标代码的自定义触发器。

4. 探索 dataLayer 中的网页指标数据

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

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

检查网页指标代码是否会触发。

  1. 你应该还会看到三个“web_vitals”事件，其中每个指标代表一项 Core Web Vitals：LCP、INP 和 CLS。

dataLayer 中的三个网页指标事件。

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

代码推送到 dataLayer 的数据。

  1. 还要检查“web_vitals”事件。如需了解不同的数据类型，请参阅 web-vitals.js 文档。

5. 向 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”），然后保存。

第一个 dataLayer 变量的配置。

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

第二个 dataLayer 变量的配置。

  1. 使用名称字段“webVitalsData.id”创建另一个变量。

第三个 dataLayer 变量的配置。

  1. 创建“webVitalsData.rating”。

第四个 dataLayer 变量的配置。

  1. 创建“webVitalsData.delta”。

第五个 dataLayer 变量的配置。

  1. 最终，您应该会看到以下用户定义的 dataLayer 变量：

所有 dataLayer 变量概览。

创建 GA4 事件代码

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

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

GA4 衡量 ID 字段。

  1. 对于“事件名称”输入字段中，选择 dataLayer 变量“DLV - webVitalsData.name”创建 Deployment

GA4 事件名称的字段。

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

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

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

配置 GA4 代码的触发器。

6. 查看 GA4 中的数据

要验证数据流向 GA4，请再次切换到 Google 跟踪代码管理器的预览模式。提供一个指向 Tag Assistant 的网址，然后点击“Connect”（连接）。

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

检查 GA4 代码是否会触发。

  1. 点击相应卡片打开 GA4 代码，以验证数据是否已从 dataLayer 正确提取。确保将变量显示为值。

通过 GA4 代码发送数据。

  1. 现在，切换到您的 GA4 媒体资源并打开实时报告。
  2. 在“按事件名称统计的事件数”中则可以验证是否成功收集了 Core Web Vitals 事件。

在 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 信息中心的第 1 页。

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

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

借助第三页，您可以在网页路径级别分析核心网页指标的效果以及广告相关指标：

Core Web Vitals 信息中心第 3 页。

10. 总结

恭喜！您已通过 Google Ad Manager 和 Google AdSense 学习了如何使用 GA4 来衡量和报告核心网页指标以及广告效果指标。

了解详情