增强型电子商务 (UA) 开发者指南

本指南将介绍如何使用 Google 跟踪代码管理器在网站上实现 Universal Analytics 增强型电子商务功能。

概览

通过 Google Analytics（分析）增强型电子商务功能，您可以随自己的任何 Google Analytics（分析）网页浏览和事件数据一起发送商品展示、促销和销售数据。您可以使用网页浏览数据来跟踪商品展示和商品购买；使用事件数据来跟踪结帐步骤和商品点击。

准备工作

我们建议您查看增强型电子商务开发者指南中的增强型电子商务数据的类型和操作部分，以便规划自己的实现方案。本指南将帮助您了解每种要衡量的电子商务互动的必填字段以及选填字段分别是哪些。

启用增强型电子商务功能

在大部分实现中，您应该为每个 Universal Analytics 网页浏览代码或事件代码启用增强型电子商务功能。您可以通过如下两种方法在网页界面的代码编辑器屏幕中启用增强型电子商务功能：

  • 使用数据层实现（推荐）
  • 使用自定义 JavaScript 宏实现

虽然这两种方法实现的电子商务功能是一样的，但我们建议所有支持数据层的网站都使用数据层方法。本指南将数据层方法作为默认方法进行介绍，并在文末对如何使用自定义 JavaScript 宏进行了说明。

使用数据层

以下部分将向您介绍如何使用数据层来衡量以下增强型电子商务活动：

清除电子商务对象

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

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

衡量商品展示情况

  • 衡量的电子商务活动：impressions
  • 接受的数据：由 impressionFieldObjects 组成的数组

通过使用 impression 操作以及一个或多个 impressionFieldObjects 来衡量商品展示情况。以下示例假设用户在网页加载时知晓网页上显示的商品相关详情：

<script>
// Measures product impressions and also tracks a standard
// pageview for the tag configuration.
// Product impressions are sent by pushing an impressions object
// containing one or more impressionFieldObjects.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'currencyCode': 'EUR',                       // Local currency is optional.
    'impressions': [
     {
       'name': 'Triblend Android T-Shirt',       // Name or ID is required.
       'id': '12345',
       'price': '15.25',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Gray',
       'list': 'Search Results',
       'position': 1
     },
     {
       'name': 'Donut Friday Scented T-Shirt',
       'id': '67890',
       'price': '33.75',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Black',
       'list': 'Search Results',
       'position': 2
     }]
  }
});
</script>

衡量商品点击情况

  • 衡量的电子商务活动：click
  • 接受的数据：list、由 productFieldObjects 组成的数组

通过将 click 操作连同表示所点击商品的 productFieldObject 一起推送到数据层来衡量商品链接的点击情况，如下例所示：

<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({ ecommerce: null });  // Clear the previous ecommerce object.
  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>

衡量商品详情的查看情况

  • 衡量的电子商务活动：detail
  • 接受的数据：list、由 productFieldObjects 组成的数组

通过将 detail 操作连同一个或多个表示所查看商品的 productFieldObjects 推送到数据层来衡量商品详情的查看情况：

<script>
// Measure a view of product details. This example assumes the detail view occurs on pageload,
// and also tracks a standard pageview of the details page.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'detail': {
      'actionField': {'list': 'Apparel Gallery'},    // 'detail' actions have an optional list property.
      'products': [{
        'name': 'Triblend Android T-Shirt',         // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray'
       }]
     }
   }
});
</script>

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

  • 衡量的电子商务活动：add、remove
  • 接受的数据：list、由 productFieldObjects 组成的数组

同理，您可以使用一个 add 或 remove actionFieldObject 以及一个 productFieldObjects 列表来衡量向购物车中添加商品或从中移除商品的情况：

向购物车添加商品

// Measure adding a product to a shopping cart by using an 'add' actionFieldObject
// and a list of productFieldObjects.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'event': 'addToCart',
  'ecommerce': {
    'currencyCode': 'EUR',
    'add': {                                // 'add' actionFieldObject measures.
      'products': [{                        //  adding a product to a shopping cart.
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1
       }]
    }
  }
});

从购物车移除商品

// Measure the removal of a product from a shopping cart.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'event': 'removeFromCart',
  'ecommerce': {
    'remove': {                               // 'remove' actionFieldObject measures.
      'products': [{                          //  removing a product to a shopping cart.
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
      }]
    }
  }
});

衡量促销信息

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

衡量促销信息的展示情况

  • 衡量的电子商务活动：promoView
  • 接受的数据：由 promoFieldObjects 组成的数组

要衡量促销信息的展示情况，请将电子商务数据层变量中的 promoView 键设置为描述网页上向用户展示的促销信息的 promoFieldObject：

<script>
// An example of measuring 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({
  'ecommerce': {
    'promoView': {
      'promotions': [                     // Array of promoFieldObjects.
       {
         'id': 'JUNE_PROMO13',            // ID or Name is required.
         'name': 'June Sale',
         'creative': 'banner1',
         'position': 'slot1'
       },
       {
         'id': 'FREE_SHIP13',
         'name': 'Free Shipping Promo',
         'creative': 'skyscraper1',
         'position': 'slot2'
       }]
    }
  }
});
</script>

衡量促销信息的点击情况

要衡量促销信息的点击情况，请将 promoClick 操作连同一个包含 promoFieldObject（用于描述所点击的促销信息）的数组推送到数据层：

<script>
/**
 * Call this function when a user clicks on a promotion. This function uses the eventCallBack
 * datalayer variable to handle navigation after the ecommerce data is sent to Google Analytics.
 *
 * @param {Object} promoObj An object representing an internal site promotion.
 */
function onPromoClick(promoObj) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'promotionClick',
    'ecommerce': {
      'promoClick': {
        'promotions': [
         {
           'id': promoObj.id,                         // Name or ID is required.
           'name': promoObj.name,
           'creative': promoObj.creative,
           'position': promoObj.pos
         }]
      }
    },
    'eventCallback': function() {
      document.location = promoObj.destinationUrl;
    }
  });
}
</script>

衡量结帐情况

要衡量结帐流程中的每个步骤，您需要：

  1. 使用 checkout 操作衡量结帐流程中的每个步骤。
  2. 如果适用，使用 checkout_option 操作衡量结帐选项。
  3. （可选）设置直观易懂的步骤名称以用于结帐漏斗报告，方法是在网页界面的管理部分中配置电子商务设置。

1. 衡量结帐步骤

  • 衡量的电子商务活动：checkout
  • 接受的数据：step、由 productFieldObjects 组成的数组

要衡量结帐流程（流程中可能包含一个结帐按钮，以及一个或多个供用户输入配送和付款信息的结帐页面），请使用 checkout 操作和 step 字段来指明所衡量的是结帐流程中的哪个阶段。此外，您还可以使用 option 字段提供有关该网页的一项额外数据，例如用户选择的付款方式。

<script>
/**
 * A function to handle a click on a checkout button. This function uses the eventCallback
 * data layer variable to handle navigation after the ecommerce data has been sent to Google Analytics.
 */
function onCheckout() {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'checkout',
    'ecommerce': {
      'checkout': {
        'actionField': {'step': 1, 'option': 'Visa'},
        'products': [{
          'name': 'Triblend Android T-Shirt',
          'id': '12345',
          'price': '15.25',
          'brand': 'Google',
          'category': 'Apparel',
          'variant': 'Gray',
          'quantity': 1
       }]
     }
   },
   'eventCallback': function() {
      document.location = 'checkout.html';
   }
  });
}
</script>

2.衡量结帐选项

  • 衡量的电子商务活动：checkout_option
  • 接受的数据：step、option

结帐选项在以下情形中很有用：您已衡量某个结帐步骤，但想要捕获有关该结帐步骤的更多信息。例如，用户选择的配送方式。 要衡量结帐选项，请使用 checkout_option 操作以及 step 和 option 字段。

<script>
/**
 * A function to handle a click leading to a checkout option selection.
 */
function onCheckoutOption(step, checkoutOption) {
  dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
  dataLayer.push({
    'event': 'checkoutOption',
    'ecommerce': {
      'checkout_option': {
        'actionField': {'step': step, 'option': checkoutOption}
      }
    }
  });
}
</script>

3. 结帐漏斗配置

（可选）您可以为结帐流程中的每一步指定一个描述性的名称，以在报告中使用。要配置此类名称，请转到 Google Analytics（分析）网页界面的管理部分，选择相应数据视图（配置文件），然后点击电子商务设置。请按照相应电子商务设置说明，为要跟踪的每个结帐步骤设置标签。

Google Analytics（分析）管理界面中的电子商务设置。某个结帐漏斗设定了 4 个步骤：1. 查看购物车；2. 收集付款信息；3. 确认订单详情；4. 收据。
图 1：结帐漏斗的电子商务设置。

衡量购买情况

  • 衡量的电子商务活动：purchase
  • 接受的数据：id（交易 ID）、由 productFieldObjects 组成的数组

使用 purchase 操作以及 event（后者会触发已启用增强型电子商务的代码），将您的交易详情推送到数据层。下例假定在网页加载时交易详情是已知的，并且交易详情将在 gtm.js 脚本返回时随网页浏览数据一起发送：

<script>
// Send transaction data with a pageview if available
// when the page loads. Otherwise, use an event when the transaction
// data becomes available.
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'purchase': {
      'actionField': {
        'id': 'T12345',                         // Transaction ID. Required for purchases and refunds.
        'affiliation': 'Online Store',
        'revenue': '35.43',                     // Total transaction value (incl. tax and shipping)
        'tax':'4.90',
        'shipping': '5.99',
        'coupon': 'SUMMER_SALE'
      },
      'products': [{                            // List of productFieldObjects.
        'name': 'Triblend Android T-Shirt',     // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'quantity': 1,
        'coupon': ''                            // Optional fields may be omitted or set to empty string.
       },
       {
        'name': 'Donut Friday Scented T-Shirt',
        'id': '67890',
        'price': '33.75',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Black',
        'quantity': 1
       }]
    }
  }
});
</script>

衡量退款情况

  • 衡量的电子商务活动：refund
  • 接受的数据：id（交易 ID）、由 productFieldObjects 组成的数组

要衡量交易的全额退款情况，请推送 refund actionFieldObject 以及所退款交易的交易 ID：

<script>
// Refund an entire transaction by providing 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({
  'ecommerce': {
    'refund': {
      'actionField': {'id': 'T12345'}         // Transaction ID. Required for purchases and refunds.
    }
  }
});
</script>

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

<script>
// Measure a partial refund by providing an array of productFieldObjects and specifying the ID and
// quantity of each product being 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({
  'ecommerce': {
    'refund': {
      'actionField': {'id': 'T12345'},        // Transaction ID.
      'products': [
            {'id': 'P4567', 'quantity': 1},   // Product ID and quantity. Required for partial refunds.
            {'id': 'P8901','quantity': 2}
       ]
     }
  }
});
</script>

传递商品级范围的自定义维度

要将商品级范围的自定义维度传递到电子商务对象，请使用以下表示法将其添加到商品中：

  dimensionn

其中 n 为自然数，例如： 

<script>
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'purchase': {
      ...

      'products': [{
        'name': 'Triblend Android T-Shirt',
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray',
        'dimension1': 'Same day delivery'
       }]
     }
   }
});
</script>

传递商品级范围的自定义指标

要将商品级范围的自定义指标传递到电子商务对象，请使用以下表示法将其添加到商品中：

  metricn

其中 n 为自然数，例如： 

<script>
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'purchase': {
      ...

      'products': [{
        'name': 'Goal Flow Garden Hose',
        'id': 'p001',
        'brand': 'Google Analytics',
        'category': 'Home Goods',
        'variant': 'Green',
        'price': '20',
        'quantity': 1,
        'metric3': '10'  // Custom metric 'Cost'
       }]
     }
   }
});
</script>

合并展示和操作数据

既有商品展示又有操作时，可以将两者合并到同一次匹配中进行衡量。

下例显示了如何衡量相关商品部分中的商品详情查看和商品展示：

<script>
dataLayer.push({ ecommerce: null });  // Clear the previous ecommerce object.
dataLayer.push({
  'ecommerce': {
    'impressions': [
     {
       'name': 'Triblend Android T-Shirt',        // Name or ID is required.
       'id': '12345',
       'price': '15.25',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Gray',
       'list': 'Related Products',
       'position': 1
     },
     {
       'name': 'Donut Friday Scented T-Shirt',
       'id': '67890',
       'price': '33.75',
       'brand': 'Google',
       'category': 'Apparel',
       'variant': 'Black',
       'list': 'Related Products',
       'position': 2
     }],
    'detail': {
      'actionField': {'list': 'Apparel Gallery'},  // 'detail' actions have an optional list property.
      'products': [{
        'name': 'Triblend Android T-Shirt',       // Name or ID is required.
        'id': '12345',
        'price': '15.25',
        'brand': 'Google',
        'category': 'Apparel',
        'variant': 'Gray'
       }]
     }
  }
});
</script>

使用自定义 JavaScript 宏

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

// A custom JavaScript macro that returns an ecommerceData object
// that follows the data layer syntax.
function() {
  var ecommerceData = {
    'ecommerce': {
      'purchase': {
        'actionField': {'id': 'T12345'},
        'products': [
            // List of productFieldObjects
        ],
        ... // Rest of the code should follow the data layer syntax.
     }
  };
  return ecommerceData;
}

如果您选择使用的是自定义 JavaScript 宏，而不是数据层，请选择启用增强型电子商务功能并设置从以下宏读取数据选项。