GA4 电子商务（跟踪代码管理器）：发送 GA4 事件

本指南介绍了如何更新现有的 Universal Analytics（跟踪代码管理器）电子商务实现方式以使用 Google Analytics（分析）4 电子商务事件。

如需获取其他迁移指南和资源，请访问开发者迁移中心。

结果

按照本指南中的说明操作后，您将取得以下结果：您的现有 Universal Analytics 实现方式将更新为使用 GA4 电子商务事件和参数。这一更新后的电子商务实现方式还将用于将电子商务数据发送到新的 GA4 媒体资源。系统将继续向您的 UA 电子商务报告填充数据，并且您将开始在新的 Google Analytics（分析）4 媒体资源中接收数据。

准备工作

使用电子商务迁移助手工具确认以下描述是否符合您当前的实现情况：
- 您使用的是 Universal Analytics 媒体资源
- 您的网站使用跟踪代码管理器且目前使用数据层发送电子商务事件
要了解每个选项的权衡因素，请查看适用于电子商务实现的迁移选项。确认您确实想要按照本指南中的说明，为现有的 Universal Analytics 实现方式使用 Google Analytics（分析）4 电子商务事件。
要了解 UA 事件在发送到 GA4 媒体资源时如何进行转换，请参阅事件兼容性参考。

权衡和考虑因素

查看并考虑以下信息，以全面了解将 Google Analytics（分析）4 电子商务事件用于现有的 Universal Analytics（跟踪代码管理器）电子商务实现方式的影响。

优点	缺点
让您在 GA4 报告和 Universal Analytics 报告中都能查看电子商务数据。使用 GA4 事件和参数可确保 GA4 电子商务报告全面完整。	您需要更改现有的电子商务事件。并非所有的 GA4 事件和参数在 Universal Analytics 中都有等效项。`shipping_tier`、`discount`、`currency`、`location_id`、`promotion_name` 和 `promotion_id` 参数没有等效的 Universal Analytics 参数，因此将不会显示在 Universal Analytics 报告中。

实现

一个关键的实现目标是从使用数据层转换为使用 gtag.js API。为确保进行此等转换时不会导致任何衡量中断，建议您按照下面的说明先完成所有的代码配置更新，然后再对数据层进行更新。

1. 创建和配置新的 GA4 媒体资源

如需创建和配置新的 Google Analytics（分析）4 媒体资源，请完成以下步骤：

创建新的 Google Analytics（分析）4 媒体资源。
- 使用 GA4 设置助理自动创建新的 GA4 媒体资源，并从您的 Universal Analytics 媒体资源中复制以下设置：“媒体资源名称”“网站网址”“时区”和“币种设置”。不过，请取消选中“使用现有代码实现数据收集”选项，以停用“已关联的网站代码”功能。或者，如果您不想从 Universal Analytics 媒体资源中复制任何设置，则可以在不使用 GA4 设置助理的情况下创建 Google Analytics（分析）4 媒体资源。
添加 Google 代码。
1. 打开用于现有 Universal Analytics 实现的 Google 跟踪代码管理器容器。
2. 依次点击代码 > 新建。
3. 点击代码配置，然后选择 Google 代码。
4. 输入 Google Analytics（分析）4 媒体资源的代码 ID。
5. 选择在所有页面（或您想衡量的那部分页面）上触发此代码。
6. 保存并发布您的代码配置。

2. 添加 GA4 事件代码配置以衡量电子商务事件

如需添加 GA4 事件代码以将电子商务事件和参数发送到 GA4 媒体资源，请完成以下步骤：

创建新的代码配置，然后选择 GA4 事件。
对于事件名称，使用内置变量。这将使用通过 gtag.js API 发送的 GA4 电子商务事件名称。
依次转到更多设置和电子商务下，然后选中发送电子商务数据。
对于数据源，选择数据层。
点击保存。触发器将在后续步骤中添加，因此您可以放心地忽略任何有关缺少触发器的警告。

3. 更新 UA 电子商务代码配置以使用 GA4 事件

对于每项 Universal Analytics 电子商务代码配置，您都需要添加针对等效的 GA4 电子商务事件触发的触发器，并启用读取 GA4 电子商务事件数据的选项。

将每个 Universal Analytics 电子商务事件更新为相应的 GA4 事件的一般步骤如下所示：

对于您要更新的 UA 电子商务事件，请使用 UA 事件与 GA4 事件之间的兼容性表格和 UA 和 GA4 的类似参数表格中提供的信息，以及/或者使用电子商务迁移助手找到相应的 GA4 事件名称。例如，如果您要更新事件来衡量产品获得的点击情况，GA4 事件名称将为 select_item。
更新事件的 Universal Analytics 代码配置：
1. 依次转到更多设置和电子商务下，然后选中使用 GA4 架构，以确保您的现有代码可以正确读取更新后的 GA4 电子商务事件。您可以在从数据层迁移到 gtag.js API 之前进行此项更改。
2. 在触发条件部分，添加新的自定义事件触发器，其中事件名称为上述 GA4 电子商务事件。完成此步骤后，您应该至少有 2 个触发器：已触发代码的原始触发器以及新添加的触发器（该触发器最终将在您完成向 GA4 事件的转换后触发）。这一额外的触发器是为了确保在从数据层转换为 gtag.js API 时不会导致任何数据中断，如本文档后面部分所述。
3. 保存更改。
向 GA4 事件代码添加新触发器：
1. 打开您之前配置的 GA4 事件代码，以将电子商务事件和参数发送到您的 GA4 媒体资源。
2. 在触发条件部分，添加在上文中创建的自定义事件触发器（例如 select_item），以确保在转换为 GA4 事件后，GA4 事件代码会针对相关联的电子商务活动触发。
3. 保存更改。
请针对每个 Universal Analytics 电子商务活动重复上述步骤。完成后，在跟踪代码管理器中发布更改。

4. 启用 gtag.js API

如需将电子商务实现方式从 UA 更新为 GA4，建议您从使用数据层转换为使用 gtag.js API，后者可与跟踪代码管理器协同发挥作用。

如需启用 gtag.js API，请将以下代码段添加到您网页的顶部，放置在跟踪代码管理器容器代码段上方：

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
</script>

5. 从使用数据层转换为使用 gtag.js

完成所有的代码配置更新并启用 gtag.js API 后，您就可以从使用数据层转换为使用 gtag.js API。

为了协助您进行更新，我们提供了以下资源供您使用：

电子商务 (GA4) 开发者指南，用于了解如何使用 gtag.js API 发送 GA4 电子商务事件以及如何在跟踪代码管理器中配置 GA4 事件代码和触发器。
UA 事件与 GA4 事件之间的兼容性表格，可帮助您查找 Universal Analytics 电子商务活动的相应 GA4 事件名称。例如，如果您要更新事件来衡量产品获得的展示情况，GA4 事件名称将为 view_item_list。
UA 和 GA4 的类似参数表格，可帮助您将 UA 电子商务参数名称映射到等效的 GA4 电子商务参数名称。
电子商务迁移助手，用于验证您是否已正确更新电子商务事件。

对于每个 Universal Analytics 电子商务事件，从使用 dataLayer.push() API（用于 UA 电子商务事件）转换为使用 gtag.js API（用于相应的 GA4 电子商务事件）的一般步骤如下所示：

使用相应的 GA4 事件名称更新自定义事件名称。例如，如果您要更新事件来衡量使用 productClick 自定义事件名称的产品获得的点击情况，更新后的 GA4 事件名称将为 select_item。GA4 事件名称必须与您之前配置的触发器的事件名称一致。

例如，以下使用数据层的产品点击事件
```
dataLayer.push({'event': 'productClick', 'ecommerce': {<ecommerce_parameters>}});
```
在转换为使用 gtag.js API 后如下所示：
```
gtag('event', 'select_item', {<ecommerce_parameters>});
```
更新电子商务参数，使其与 GA4 事件的预期参数一致。由于参数名称发生了变化，因此请务必参阅 UA 和 GA4 的类似参数。使用匹配的 UA 参数值填充 GA4 参数值。

示例：将 UA 事件更新为 GA4 事件

以下示例展示了如何为适用于 Universal Analytics 的跟踪代码管理器中实现的“产品点击”电子商务活动创建等效的 GA4 事件。

更新前：使用数据层发送 UA 事件

以下代码衡量的是 Universal Analytics 的产品点击事件（使用数据层实现）。自定义事件名称为 productClick。

<script>
/**
 * Call this function when a user clicks on a product link. This function uses the event
 * callback datalayer variable to handle navigation after the ecommerce data has been sent
 * to Google Analytics.
 * @param {Object} productObj An object representing a product.
 */
function(productObj) {
  dataLayer.push({
    'event': 'productClick',
    'ecommerce': {
      'click': {
        'actionField': {'list': 'Search Results'},      // Optional list property.
        'products': [{
          'name': productObj.name,                      // Name or ID is required.
          'id': productObj.id,
          'price': productObj.price,
          'brand': productObj.brand,
          'category': productObj.cat,
          'variant': productObj.variant,
          'position': productObj.position
         }]
       }
     },
     'eventCallback': function() {
       document.location = productObj.url
     }
  });
}
</script>

在跟踪代码管理器中，Universal Analytics 代码配置如下所示：

代码类型：Universal Analytics
跟踪类型：事件
事件类别：Ecommerce
事件操作：Product Click
启用增强型电子商务功能：true
使用数据层：true
触发器：event 等于 productClick

产品点击事件的 Universal Analytics 代码配置

触发器配置已设为在 productClick 事件被推送到数据层时触发代码：

productClick 自定义事件的触发器配置

更新后：使用 gtag.js 发送 GA4 事件

针对 UA 的代码配置更新

在跟踪代码管理器中，“产品点击”事件的 Universal Analytics 代码配置已更新为针对 GA4 事件名称触发，并且使用 GA4 架构选项已启用。该代码配置现如下所示：

代码类型：Universal Analytics
跟踪类型：事件
事件类别：Ecommerce
事件操作：Product Click
启用增强型电子商务功能：true
使用数据层：true
使用 GA4 架构：true
触发器 1：event 等于 productClick
触发器 2：event 等于 select_item

产品点击事件的 Universal Analytics 代码配置（使用的是 GA4）

新的自定义事件触发器的触发器配置已设置为针对 select_item 事件名称触发：

select_item 事件的触发器配置

针对 GA4 的代码配置更新

GA4 事件已配置为衡量使用 GA4 事件和参数实现的电子商务活动。代码使用内置事件变量将事件名称传递给 GA4。为 UA 代码创建的同一触发器（即 select_item）可用于触发 GA4 代码。

多个电子商务活动的 GA4 事件代码配置

从使用数据层转换为使用 gtag.js

以下代码展示了上述 UA 实现方式如何从使用 productClick 自定义事件（通过 dataLayer.push() API）转换为使用 GA4 select_item 事件（通过 gtag.js API）。已相应地设置 select_item 的参数值。

<script>
/**
 * Call this function when a user clicks on a product link.
 * @param {Object} productObj An object representing a product.
 */
function(productObj) {
  gtag('event', 'select_item', {
    'items': [{
      'item_id': productObj.id,
      'item_name': productObj.name,
      'index': productObj.position,
      'item_list_name': 'Search Results',
      'item_brand': productObj.brand,
      'item_category': productObj.cat,
      'item_variant': productObj.variant,
      'price': productObj.price
    }]
  });
}
</script>