注意：此开发者网站正在向 developers.google.com/tag-platform 迁移，2021 年 9 月 30 日起系统会将您重定向到新的网址

电子商务 (GA4) 开发者指南

本指南介绍了如何使用 Google 跟踪代码管理器在网站上实现 Google Analytics（分析）4 (GA4) 电子商务功能。

通过 GA4 电子商务功能，您可以随多个建议的电子商务事件一起发送商品列表、展示、促销和销售数据。

您可以通过如下两种方法在网页界面的代码编辑器屏幕中启用电子商务功能：

使用数据层加以实现（推荐）
使用自定义 JavaScript 变量加以实现

接下来的各节将向您介绍如何使用数据层来衡量下列电子商务活动：

商品/商品列表浏览/展示
商品/商品列表点击
商品/商品详情浏览
向购物车中添加商品/从中移除商品
促销信息浏览/展示
促销信息点击
结帐
购买
退款

从旧版电子商务数据层对象迁移

如果您之前已为 Google Analytics（分析）网站媒体资源实现增强型电子商务且拥有 'impressions' 和 'products' 等数据层对象，那么您可以继续使用这些对象，而不是引用本文档中所示的 'items'。

清除电子商务对象

建议您先使用以下命令将电子商务对象清除，然后再将电子商务事件推送到数据层。清除该对象有助于防止网页上的多个电子商务事件相互影响。

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.

衡量商品/商品列表的浏览/展示情况

要衡量商品列表的浏览/展示情况，请将商品列表推送到数据层，并收集 view_item_list 事件及相应商品数据。下例假定在网页加载时该网页上显示的商品相关详情是已知的：

// Measure product views / impressions
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "view_item_list",
  ecommerce: {
    items: [
     {
       item_name: "Triblend Android T-Shirt",       // Name or ID is required.
       item_id: "12345",
       price: 15.25,
       item_brand: "Google",
       item_category: "Apparel",
       item_category2: "Mens",
       item_category3: "Shirts",
       item_category4: "Tshirts",
       item_variant: "Gray",
       item_list_name: "Search Results",
       item_list_id: "SR123",
       index: 1,
       quantity: 1
     },
     {
       item_name: "Donut Friday Scented T-Shirt",
       item_id: "67890",
       price: 33.75,
       item_brand: "Google",
       item_category: "Apparel",
       item_category2: "Mens",
       item_category3: "Shirts",
       item_category4: "Tshirts",
       item_variant: "Black",
       item_list_name: "Search Results",
       item_list_id: "SR123",
       index: 2,
       quantity: 1
     }]
  }
});

本例的代码配置如下：

代码类型：GA4 事件
事件名称：view_item_list
事件参数（名称 - 值）：'items' - {{Ecommerce Items}}
变量类型：数据层变量 - 'ecommerce.items'
触发器：event 为 gtm.dom

衡量商品/商品列表的点击情况

要衡量商品/商品列表的点击情况，请将商品推送到数据层，并收集表示所点击商品的 select_item 事件，如下例所示：

/**
 * Call this function when a user clicks on a product link.
 * @param {Object} productObj An object that represents the product that is clicked.
 */
function onProductClick(productObj) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    event: "select_item",
    ecommerce: {
      items: [{
        item_name: productObj.name, // Name or ID is required.
        item_id: productObj.id,
        item_brand: productObj.brand,
        item_category: productObj.category,
        item_category2: productObj.category_2,
        item_category3: productObj.category_3,
        item_category4: productObj.category_4,
        item_variant: productObj.variant,
        item_list_name: productObj.list_name,
        item_list_id: productObj.list_id,
        index: productObj.index,
        quantity: productObj.quantity,
        price: productObj.price
      }]
    }
  });
}

本例的代码配置如下：

代码类型：GA4 事件
事件名称：select_item
事件参数（名称 - 值）：'items' - {{Ecommerce Items}}
变量类型：数据层变量 - 'ecommerce.items'
触发器：event 为 select_item

衡量商品/商品详情的浏览/展示情况

要衡量商品详情的浏览情况，请将商品列表推送到数据层，并收集 view_item 事件及相应商品数据。下例假定在网页加载时该网页上显示的商品相关详情是已知的：

// Measure a view of product details. This example assumes the detail view occurs on pageload,
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "view_item",
  ecommerce: {
    items: [{
      item_name: "Donut Friday Scented T-Shirt", // Name or ID is required.
      item_id: "67890",
      price: 33.75,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Mens",
      item_category3: "Shirts",
      item_category4: "Tshirts",
      item_variant: "Black",
      item_list_name: "Search Results",  // If associated with a list selection.
      item_list_id: "SR123",  // If associated with a list selection.
      index: 1,  // If associated with a list selection.
      quantity: 1
    }]
  }
});

本例的代码配置如下：

代码类型：GA4 事件
事件名称：view_item
事件参数（名称 - 值）：'items' - {{Ecommerce Items}}
变量类型：数据层变量 - 'ecommerce.items'
触发器：event 为 gtm.dom

衡量向购物车中添加商品或从中移除商品的情况

同理，要衡量向购物车中添加商品或从中移除商品的情况，您可以收集 add_to_cart 或 remove_from_cart 事件以及添加或移除的商品：

向购物车添加商品

// Measure when a product is added to a shopping cart
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "add_to_cart",
  ecommerce: {
    items: [{
      item_name: "Donut Friday Scented T-Shirt", // Name or ID is required.
      item_id: "67890",
      price: "33.75",
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Mens",
      item_category3: "Shirts",
      item_category4: "Tshirts",
      item_variant: "Black",
      item_list_name: "Search Results",
      item_list_id: "SR123",
      index: 1,
      quantity: 2
    }]
  }
});

本例的代码配置如下：

代码类型：GA4 事件
事件名称：add_to_cart
事件参数（名称 - 值）：'items' - {{Ecommerce Items}}
变量类型：数据层变量 - 'ecommerce.items'
触发器：event 为 add_to_cart

从购物车移除商品

// Measure the removal of a product from a shopping cart.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "remove_from_cart",
  ecommerce: {
    items: [{
      item_name: "Donut Friday Scented T-Shirt", // Name or ID is required.
      item_id: "67890",
      price: 33.75,
      item_brand: "Google",
      item_category: "Apparel",
      item_variant: "Black",
      item_list_name: "Search Results",  // If associated with a list selection.
      item_list_id: "SR123",  // If associated with a list selection.
      index: 1,  // If associated with a list selection.
      quantity: 1
    }]
  }
});

本例的代码配置如下：

代码类型：GA4 事件
事件名称：remove_from_cart
事件参数（名称 - 值）：'items' - {{Ecommerce Items}}
变量类型：数据层变量 - 'ecommerce.items'
触发器：event 为 remove_from_cart

衡量促销信息

对于内部网站促销，例如，为宣传部分特定商品的销售或免运费优惠而在网站本身上展示的横幅，您也可以衡量它们的展示次数和点击次数。

衡量促销信息的浏览/展示情况

要衡量商品详情的浏览情况，请将促销详细信息推送到数据层，并收集 view_promotion 事件及相应促销数据。下例假定在网页加载时该网页上显示的商品相关详情是已知的：

// Measure promotion views. This example assumes that information about the
// promotions displayed is available when the page loads.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "view_promotion",
  ecommerce: {
    items: [{
      item_name: "Donut Friday Scented T-Shirt", // Name or ID is required.
      item_id: "67890",
      price: 33.75,
      item_brand: "Google",
      item_category: "Apparel",
      item_category2: "Mens",
      item_category3: "Shirts",
      item_category4: "Tshirts",
      item_variant: "Black",
      promotion_id: "abc123",
      promotion_name: "summer_promo",
      creative_name: "instore_suummer",
      creative_slot: "1",
      location_id: "hero_banner",
      index: 1,
      quantity: 1
    }]
  }
});

本例的代码配置如下：

代码类型：GA4 事件
事件名称：view_promotion
事件参数（名称 - 值）：'items' - {{Ecommerce Items}}
变量类型：数据层变量 - 'ecommerce.items'
触发器：event 为 gtm.dom

衡量促销信息的点击情况

要衡量促销信息的点击情况，请收集 select_promotion 事件以及与促销信息相关的一系列商品：

/**
 * Call this function when a user clicks on a promotion.
 * @param {Object} promoObj An object that represents an internal site promotion.
 */
function onPromoClick(promoObj) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    event: "select_promotion",
    ecommerce: {
      items: [{
        item_name: promoObj.name, // Name or ID is required.
        item_id: promoObj.id,
        item_brand: promoObj.brand,
        item_category: promoObj.category,
        item_category2: productObj.category_2,
        item_category3: productObj.category_3,
        item_category4: productObj.category_4,
        item_variant: promoObj.variant,
        promotion_id: promoObj.pid,
        promotion_name: promoObj.pname,
        creative_name: promoObj.pcreative_name,
        creative_slot: promoObj.pcreative_slot,
        location_id: promoObj.plocation,
        index: promoObj.index,
        quantity: promoObj.quantity,
        price: promoObj.price
      }]
    }
  });
}

本例的代码配置如下：

代码类型：GA4 事件
事件名称：select_promotion
事件参数（名称 - 值）：'items' - {{Ecommerce Items}}
变量类型：数据层变量 - 'ecommerce.items'
触发器：event 为 select_promotion

衡量结帐情况

要衡量结帐情况，请将商品详情推送到数据层，并收集 begin_checkout 事件及相应商品数据：

/**
 * A function to handle a click on a checkout button.
 */
function onCheckout() {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    event: "begin_checkout",
    ecommerce: {
      items: [{
        item_name: "Donut Friday Scented T-Shirt", // Name or ID is required.
        item_id: "67890",
        price: 33.75,
        item_brand: "Google",
        item_category: "Apparel",
        item_category2: "Mens",
        item_category3: "Shirts",
        item_category4: "Tshirts",
        item_variant: "Black",
        item_list_name: "Search Results",
        item_list_id: "SR123",
        index: 1,
        quantity: 1
      }]
    }
  });
}

本例的代码配置如下：

代码类型：GA4 事件
事件名称：begin_checkout
事件参数（名称 - 值）：'items' - {{Ecommerce Items}}
变量类型：数据层变量 - 'ecommerce.items'
触发器：event 为 begin_checkout

衡量购买情况

要衡量交易情况，请将商品列表推送到数据层，并收集 purchase 事件及相应商品数据。下例假定在网页加载时该网页上显示的商品相关详情是已知的：

dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "purchase",
  ecommerce: {
      transaction_id: "T12345",
      affiliation: "Online Store",
      value: "59.89",
      tax: "4.90",
      shipping: "5.99",
      currency: "EUR",
      coupon: "SUMMER_SALE",
      items: [{
        item_name: "Triblend Android T-Shirt",
        item_id: "12345",
        price: "15.25",
        item_brand: "Google",
        item_category: "Apparel",
        item_variant: "Gray",
        quantity: 1
      }, {
        item_name: "Donut Friday Scented T-Shirt",
        item_id: "67890",
        price: 33.75,
        item_brand: "Google",
        item_category: "Apparel",
        item_variant: "Black",
        quantity: 1
      }]
  }
});

本例的代码配置如下：

代码类型：GA4 事件
事件名称：purchase
数据层变量（名称 - 数据层变量名称）：
- 电子商务商品 - ecommerce.items
- 电子商务交易 ID - ecommerce.transaction_id
- 电子商务关联商户 - ecommerce.affiliation
- 电子商务价值 - ecommerce.value
- 电子商务税费 - ecommerce.tax
- 电子商务运费 - ecommerce.shipping
- 电子商务币种 - ecommerce.currency
- 电子商务优惠券 - ecommerce.coupon
事件参数（参数名称 - 值）：
- items - {{Ecommerce Items}}
- transaction_id - {{Ecommerce Transaction ID}}
- affiliation - {{Ecommerce Affiliation}}
- value - {{Ecommerce Value}}
- tax - {{Ecommerce Tax}}
- shipping - {{Ecommerce Shipping}}
- currency - {{Ecommerce Currency}}
- coupon - {{Ecommerce Coupon}}
触发器：event 为 purchase

衡量退款情况

要衡量交易的全额退款情况，请收集 refund 事件以及要退款交易的交易 ID：

// To refund an entire transaction, provide the transaction ID.
// This example assumes the details of the completed refund are
// available when the page loads:
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "refund",
  ecommerce: {
    transaction_id: "T12345" // Transaction ID. Required for purchases and refunds.
  }
});

本例的代码配置如下：

代码类型：GA4 事件
事件名称：refund
事件参数（名称 - 值）：'items' - {{Ecommerce Items}}
变量类型：数据层变量 - 'ecommerce.items'
触发器：event 为 gtm.dom

要衡量部分退款情况，请添加 items 列表，其中需包含要退款商品的 ID 和数量：

// To measure a partial refund, provide an array of productFieldObjects and
// specify the ID and quantity of each product to be returned. This example
// assumes the partial refund details are known at the time the page loads:
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  event: "refund",
  ecommerce: {
      transaction_id: "T12345", // Transaction ID.
      items: [{
       item_name: "Donut Friday Scented T-Shirt",
       item_id: "67890", // ID is required.
       price: 33.75,
       item_brand: "Google",
       item_category: "Apparel",
       item_category2: "Mens",
       item_category3: "Shirts",
       item_category4: "Tshirts",
       item_variant: "Black",
       item_list_name: "Search Results", // If associated with a list selection.
       item_list_id: "SR123", // If associated with a list selection.
       index: 1, // If associated with a list selection.
       quantity: 1 // Quantity is required.
      }]
  }
});

本例的代码配置如下：

代码类型：GA4 事件
事件名称：refund
事件参数（名称 - 值）：'items' - {{Ecommerce Items}}
变量类型：数据层变量 - 'ecommerce.items'
触发器：event 为 gtm.dom

使用自定义 JavaScript 变量

如果您的网站不支持数据层，则您可以使用自定义 JavaScript 变量来调用会返回电子商务数据对象的函数。此对象应使用本指南前面部分介绍的数据层语法，例如：

// A Custom JavaScript Variable that returns an ecommerceData object
// that follows the data layer syntax.
function getEcommerceData() {
  var ecommerceProductData = [
    {
      item_name: "Donut Friday Scented T-Shirt",
      item_id: "67890",  // ID is required.
      // Rest of the product data should follow the data layer syntax.
    },
    // Multiple products may be included.
  ];
  return ecommerceProductData;
}

如果您选择使用自定义 JavaScript 变量，则其使用方法与数据层相同，您可以提供 'items' 参数中的值作为代码配置中的事件参数。

本例的代码配置如下：

代码类型：GA4 事件
事件名称：any
从以下变量中读取数据：{{gaEcommerceData}}
触发器：event 为 gtm.dom

gaEcommerceData 变量设置

变量类型：自定义 JavaScript
函数本体：请使用上文中的示例