如何为 Universal Analytics 媒体资源和 Google Analytics(分析)4 媒体资源添加电子商务代码

本文将适用于 Universal Analytics (UA) 媒体资源的电子商务代码与适用于 Google Analytics(分析)4 (GA4) 媒体资源的等效代码进行比较。要植入两种代码(即同时填充 UA 媒体资源和 GA4 媒体资源),请包含适用于 UA 媒体资源和 GA4 媒体资源的代码

要使电子商务代码发挥作用,需使用基本的页面代码

查看您的现有检测设置

查看您的现有电子商务检测设置,该设置可能基于以下三种情况之一:

  • 搭配使用 analytics.js 与标准电子商务
  • 搭配使用 analytics.js 与增强型电子商务
  • 搭配使用 gtag.js 与标准电子商务或增强型电子商务

如果您搭配使用 analytics.js 与标准电子商务

以下 analytics.js 代码展示了标准(非增强型电子商务)交易的硬编码图示。如果您在自己的 UA 媒体资源中搭配使用 analytics.js 与非增强型电子商务,则现有交易的代码将类似于以下代码。

// Start Google Analytics analytics.js ecommerce transaction
ga('ecommerce:addTransaction', {
  'id': '1234',    // Note: In gtag.js below, ‘id’ maps to “transaction_id”
  'affiliation': 'Google online store',
  'revenue': '23.07',
  'shipping': '0',
  'tax': '1.24'
});
ga('ecommerce:addItem', {
  'id': '1234',    // Note: In gtag.js below, “items”:[{“id”}] is the item SKU, not the transaction ID
  'name': 'Android Warhol T-Shirt',
  'sku': 'P12345', // In gtag.js below, ‘sku’ maps to “items”:[{“id”}]
  'category': 'Apparel/T-Shirts',
  'price': '2.0',
  'quantity': '2'
});
ga('ecommerce:addItem', {
  'id': '1234',
  'name': 'Flame challenge TShirt',
  'sku': 'P67890',
  'category': 'Apparel/T-Shirts',
  'price': '3.0',
  'quantity': '1'
});
ga('ecommerce:send');

如果您搭配使用 analytics.js 与增强型电子商务

以下 analytics.js 代码展示了增强型电子商务交易的硬编码图示。如果您在自己的 UA 媒体资源中搭配使用 analytics.js 与增强型电子商务,则现有交易的代码将类似于以下代码。

   ga('create', 'UA-XXXXX-Y', 'auto');
   ga('require', 'ec');
   ga('ec:addProduct', {
     'id': 'P12345',                   // SKU
     'name': 'Android Warhol T-Shirt',
     'category': 'Apparel/T-Shirts',
     'quantity': 2,
     'price': 2,
   });
    ga('ec:addProduct', {
      'id': 'P67890',                  // SKU
      'name': 'Flame Challenge TShirt',
      'category': 'Apparel/T-Shirts',
      'quantity': 1,
      'price': 3,
    });
     ga('ec:setAction', 'purchase', {
       'id': 'T12345',                  // Transaction id
      'affiliation': 'Google Store - Online',
      'revenue': 23.07,
       'tax': 1.24,
       'shipping': '0',
     });
     ga('send', 'pageview');

如果您使用 gtag.js

如果您在自己的 UA 媒体资源中使用 gtag.js,则无需添加其他代码。您的现有电子商务衡量代码仍适用于 GA4 媒体资源。要同时针对 UA 和 GA4 为您的网站添加代码,请将 GA4 媒体资源添加到您现有的 gtag.js 配置:

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y">
</script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-XXXXX-Y');
  gtag('config', 'G-XXXXX'); // Added Google Analytics 4 ID
</script>

适用于 Google Analytics(分析)4 的等效电子商务衡量代码

以下部分介绍了适用于 GA4 媒体资源的等效电子商务衡量代码(gtag.js 和 Google 跟踪代码管理器)

针对等效 Google Analytics(分析)4 交易使用 gtag.js

上述 analytics.js 代码(针对标准电子商务和增强型电子商务)与以下适用于 GA4 媒体资源的 gtag.js 衡量代码相对应。

 gtag('event', 'purchase', {
  "transaction_id": "1234",
  "affiliation": "Google online store",
  "value": 23.07,
  "currency": "USD",
  "shipping": 0,
   "tax": 1.24,
  "items": [
    {
      "id": "P12345", // Note that this is the SKU, not the transaction ID
      "name": "Android Warhol T-Shirt",
      "category": "Apparel/T-Shirts",
      "quantity": 2,
      "price": '2.0'
    },
    {
      "id": "P67890", // Note that this is the SKU, not the transaction ID
      "name": "Flame challenge TShirt",
      "category": "Apparel/T-Shirts",
      "quantity": 1,
      "price": '3.0'
    }
  ]
});

如需详细了解电子商务衡量代码,请参阅针对 gtag.js 的 GA4 电子商务开发者指南

如果您使用 Google 跟踪代码管理器

如果您在 UA 媒体资源中使用 Google 跟踪代码管理器,请添加 Google Analytics(分析)GA4 事件代码,并将其配置为发送电子商务事件数据。

  1. 依次点击代码 > 新建
  2. 点击代码配置
  3. 选择 Google Analytics(分析):GA4 事件
  4. 对于配置代码,请选择相应的配置代码。
  5. 对于事件名称,请输入 purchase
  6. 展开事件参数部分,并添加上述 gtag.js 示例中列出的每个参数的参数名称和值。在大多数情况下,您需要使用跟踪代码管理器变量来填充这些值。
  7. 点击触发条件,然后选择可触发电子商务事件的适当事件。
  8. 保存代码配置并发布您的容器。

如需详细了解电子商务衡量代码,请参阅针对 Google 跟踪代码管理器的 GA4 电子商务开发者指南