用Google Tag Manager部署增强型电子商务模块指南

增强型电子商务很难，准确说，非常难，因为设置非常复杂，周期长，会出现很多难以解释的问题，并且谷歌分析官方提供的操作文档中的设置流程是分散不连贯的，但是在这里，Flint Analytics，我们打算将所有的文档结合起来，连贯的讲解整个增强型电子商务的部署流程，从开始到结束。这篇文章希望可以帮助你更好的理解主要概念和疑难点，详解Google Tag Manager和数据层部署增强型电子商务的每一个步骤，整个设置流程需要你对一些关键的点有基本的了解，下面是我觉得比较重要的几个方面：

1、什么是增强型电子商务？
理解增强型电子商务报告数据背后的商务驱动价值。

2、理解电子商务数据类型
增强型电子商户有四个类型的数据，如展示类数据，产品类数据，营销类数据和行为类数据，要知道每一类数据的应用情景和所带参数。

3、明确跟踪需求
根据第一二点的理解，你需要确定电子商务网站的跟踪需求

4、设置数据层
通过GTM将电子商务数据转化成特定的格式的数据

5、配置Google Tag Manager
GTM将用于将数据层的数据传递给Google Analytics，这里将会设置很多的代码和变量。

6、配置Google Analytics
在数据视图中开启增强型电子商务功能和设置结算行为流。

第一节，什么是电子商务？
增强型电子商务比普通电子商务和转化报告能在更多的角度去细分访客的购物行为，提供更多维度的报告。

购物行为
这个报告可以给你分析从产品展示到结算的整个行为，例如，你可以知道下面各个步骤的转化率：
1、会话开始
2、产品展示/被浏览
3、添加到购物
4、结算
5、完成交易

这种展示将另你非常高效的可以知道在整个流程中哪里还有提升的空间，下面就是一个购物行为的分析报告：

结算行为分析
这个报告跟购物行为非常像，但它是从结算行为流的角度来看的，例如，当你个用户进入结算流程到结算完成，它可能经历一下几个步骤：
1、登录
2、用户信息
3、账单信息
4、结算次序
5、确认
这个报告可以让你知道结算过程中的阻碍点，并采取相应的措施。

产品表现
这个报告可以从产品的角度看相关的数据，比如你的站点销售三种颜色的T恤，绿色，黄色和红色，在购物行为报告和结算行为流报告里面看到的关于T恤的信息可能是一致的，但在产品表现报告可以展示不同颜色的T恤的数据，从这个报告，我们可以看到一些比率如添加到购物车和计算与展现的比率，还有产品的利润，购买人数，购买数量，均价，退款等。。。

销售表现
这个报告展示电子商务利润详情相关的数据，如详细交易信息，税，快递费，退款和销售的数据。

产品列表表现
回到前面T恤的例如，如果衣服颜色是你产品数据的你部分，这个在增强型电子商务里面有单独的列表可以存储，你可以将展示和点击划分不到的列表里面。

内部促销
如果在你的网站上有营销活动，如站内的广告，你需要区分向多少用户展示了多少次，点击了多少次，和转化了多少。

订单优惠券和产品优惠券
这个可以让你在产品和订单层次细分数据是否包含了优惠券。

网盟代码
如果你有AFF，你可以细分出这部分流量的表现和利润。
第二节，理解增强型电子商务的数据类型
增强型电子商务报告依赖于连贯且具有良好结构的数据流，这个是通过富数据层结果的形式将页面数据划分成的展示数据，产品数据，营销数据和行为数据。

展示数据
你可以知道单一产品从开始到结束的转化率，例如，当访客访问你的电子商务网站主页的时候，他看到了产品列表里的有：3件T恤，3本书，3个玩具，总共是有9件产品在主页被展示，当访客继续访问的时候，每一个产品在其他页面也有被展示的可能。将我们假设T恤在10个会话中都分贝有3个不同的页面都有展示，也就是说，这件T恤在10会话里面展示了30次。继续假设这10个会话中，这件T恤被购买了1次，这时候以展示为分母的转化率为1/30=3.33%。

每一件T恤，书和玩具都不同于其他的T恤，书和玩具，都会带有特有的信息，如品牌，类别，价格等，在数据层中，你可以定义一个impressionFieldObject，这个一个展示产品包含产品信息的数组。现在我们假设你想知道类别转化率，在这例子中，类别是T恤，书和玩具，假设3件T恤在10个会话中的3个不同页面中出现，也就是展示了90次，现在假设在这10个会话中5件T恤被购买，这时候对于展示的转化率计算为2/90=2.22%（我不理解这个地方为什么这样计算）。

所以，跟踪产品展示最基本的作用之一就是允许电子商务网站可以从不同角度对产品做细分，能更好的理解转化背后的用户行为，下表是展示这个动作能够携带的字段：

产品数据
让我们回到之前的例子，在10次回话中展示3个不同的页面，现在假设展示的T恤都包含一个跳转到其他页面的链接，也就是能够点击，然后到一个包含更多产品详情的页面，如果那30次展示，10个人中有3个人点击了去详情页面，这意味着，从产品展示到用户点击去查看产品详情页面的比例为3/30=10%，这个可以用于衡量看那些图片更能吸引用户和用户对哪些产品跟感兴趣。

productFieldObject数据包含一些能够被查看到的信息，下面是GA能够携带的字段：

营销数据
假设电子商务网站在自己的页面做广告营销，例如为了促进销售的广告，你可能会想知道这些营销带来的销售和利润，所以你需要知道这些营销活动的转化率，这类营销活动可以通过promoFieldObject这个变量去细分，这个变量能携带的字段如：

行为数据
在电子商务网站，有几个行为对电子商务是非常重要的，回到之前T恤的例子，假设你已经在产品详情页面了，现在你打算购买，那么你第一件事情就是将这个T恤添加到你的购物车，然后才去结算，在结算之前你可能还会添加其他产品进购物车，你也可能将部分商品移除出购物车，然后你猜确认你的订单，然后结账。
上述的每一步都是一个行为，下表是增强型电子商务能够识别到的关键行为：

上述的每一个行为都能携带一些数据，包含再actionFieldObject里面。例如在购买的时间，你可能需要知道这次交易总的利润，税费和快递费等，这些都能够传递给GA，下面是这个行为能够携带的字段：

第三节、明确跟踪需求
这一部分要处理的是能够完全理解电子商务网站的商业模型，谷歌预定义的数据类型和你所关心的一些问题，下面以谷歌官方的demo站点Ibby’s T-Shirt Shop作为一个例子，讲解如何确定跟踪的需求。

Ibby’s T-Shirt Shop商业模型
Ibby销售T恤，这些T恤有不同的颜色，号码，品牌和价格等，当你有人访问这个网站的主页的时候，它可以看到列表中有不同的T恤，用户可以选择那些T恤去查看，放入购物车和购买，当有人购买的时候，Ibby的利润是T恤价格减去税费，快递费。

Ibby的跟踪需求
用前面第二节讲到的，我们将整个销售流程分解成增强型电子商务里面的每一步，在下一节，我们我们将讨论如何在技术上处理这些数据，但在这里，我们只分析如何将分析这个跟踪需求。

产品展示
为了准确跟踪产品从一开始的展示到购买结束，我们需要跟踪详细的每一个产品的每一次展示，在Ibby的主页，并不是所有的T恤能够通过页面上文字或图片去识别到，假设你的数据库有这些产品的信息，你需要将这些数据传递给Google Analytics，回到前面讲解到的impressionFieldObject数组，这里要求必须有产品的名字和id，其他的一些信息是可选的，如列表位置，品牌，品类，颜色和价格等。

产品点击和产品详情展示
当产品展示给访客展示T恤的简要信息，产品详情给用户展示更多的详情信息，并且有让用户添加到购物车的选项，你可能会对这件T恤感兴趣，所以你电子了产品展示跳转到产品闲情页面，注意，这个点击就是电子商务的一个关键行为，点击前后的数据都是一样的，分别是impressionFieldObject和productFieldObject，你可能会对这两个数据有些困惑，具体的自己去谷歌吧。

添加产品到购物车
当你在产品详情页面并且决定去购买这件T恤的时候，你会选择颜色和尺码，然后点击“添加到购物车”按钮，那么Ibby可能想知道这件T恤最受欢迎的颜色和尺码是多少，那么这时候就需要通过productFieldObject去传递添加到购物车这个行为，正如前面我们看到的，这是一个预定义类型，所以对应填充一些数据即可，在这个地方有个难点就是用户会选择不同的颜色和尺码，如何将用户选择的这些信息准确传递给GA。

结算
Ibby的结算流程涉及到5步：
1、开始结算
2、用户信息
3、账单信息
4、确认账单
5、结算
上述的每一步都可以将添加到购物车这个行为里面的数据传递给GA，当然我们也需要跟踪这个过程的每一个事件用于结算行为流的分析。

需要注意，在上述第3步的时候，我们会提供给可以不同的选项，可以选择visa，mastercard或是是AmEx作为首选支付，这个叫做支付选项，这涉及到另一个跟踪分析。

购买
这个很明显就是电子商务网站的目标了，我们希望我们能够准确跟踪到所有的产品数据从展示到购买，以便给优化和产品销售提供数据支持。

可能触发的其他行为
需要留意的是，有些人可能会将购物车中的产品移除掉，查看或点击营销，退款，离开结算继续去购物然后返回等，用第二节降到的方法去审视这个过程中涉及到数据和数据类型，再决定哪些数据需要跟踪。

第四节、设置数据层
简单的说，数据层就是一个能够被GTM是被的js数组，如果你还不了解数据层，可以看Google Tag Manager中的数据层解析。

工作原理
通过Simo Ahava，增强型电子商务通过数据层的传递数据可以分为4步：

所以最重要的一步就是将网站，CMS或数据库的数据组装成数据层中能被GMT识别到的数据，这是最重要的，需要经常跟开发团队交流。

每一个行为或查看的数据层格式

我们仍然使用Ibby的站点作为例子讲解每一个类型传递的数据格式，在demo站点的你可以点击那么黑点去查看demo站点传递的实际数据格式。
在每一部分的最后，我会提供谷歌官方要求的数据格式代码例子，通过和demo站点的对比，你需要将需要传递的数据全部遵循特定格式推送到数据层去。

衡量产品展示
在Ibby的首页，点击头部灰色的信息图标，你可以看到：一个dataLayer.push()包含一个展示的数组，每一个展示都作为一个impressionFieldObject数组，包含有id，名称，品牌，品类，位置和列表。下拉后你可以看到这些数据所在的列表都是主页和T恤，这表明这些展示来自两个位置，分别是主页列表和T恤列表，这就是一个传递展示数据到数据层的例子。
通过GTM，你可以将衡量产品展示的数据通过impressionFieldObject数组推送到数据层去：

<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': {
    '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>

衡量营销数据
回到Ibby的主页点击头部的信息图标，下拉展示列表找到promoView，这个展示传递的是主页右侧的back to school，需要注意的是，这个可以包含一个长列表的展示信息，所以我们可以细分：
1、主页列表中T恤的展示
2、推荐列表中的T恤展示
3、营销T恤展示
简单的说，就是通过这个，我们可以将营销类的展示从展示出剥离出来。通过GTM，可以将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': {
    '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>

衡量营销点击
返回到Ibby的主页，点击头部的信息图标，下拉到back to school这里。
在这个创建一个事件和点击营销位置的行为绑定。

通过GTM，可以将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({
    '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>

衡量产品点击
产品点击的数据层测试如：

<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>

衡量产品详情

<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': {
    '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>

衡量添加到购物车

// Measure adding a product to a shopping cart by using an 'add' actionFieldObject
// and a list of productFieldObjects.
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({
  '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
      }]
    }
  }
});

衡量结算过程

完整的结算会有选择结算方式的选项，具体是存储在actionField里面，示例代码如：

<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({
    '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>

衡量结算选项
完成的结算流程有多个步骤，具体步骤存在在actionField 里面，如：

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

衡量购买

<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': {
    '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>

衡量退款

<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': {
    'refund': {
      'actionField': {'id': 'T12345'}         // Transaction ID. Required for purchases and refunds.
    }
  }
});
</script>

衡量自定义产品维度

<script>
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>

第5节、配置Google Tag Manager
上述的每一个数据层的数据发送，都需要在GTM里面新建一个代码将这些信息从数据层传递给Google Analytics，下面我将告诉大家如何配置这些代码。

下面的设置适用于大部分的情况，但可能会出现一些问题，因为这取决于实际的网页架构。下面的设置适用于大部分的情况，但可能会出现一些问题，因为这取决于实际的网页架构。

Product Impression

Tag type : Universal Analytics
Track type : Pageview
Enable Enhanced Ecommerce Features: true
Use Data Layer: true
More settings > Fields to Set: select the field name page and set its value to {{page path}}
Trigger: event equals gtm.dom

Promotion Impression

Promotion Click

Tag type : Universal Analytics
Track type : Event
Event Category: Ecommerce
Event Action: Promotion Click
Enable Enhanced Ecommerce Features: true
Use Data Layer: true
More settings > Fields to Set: select the field name page and set its value to {{page path}}
Trigger: event equals promotionClick

Product Click

Tag type : Universal Analytics
Track type : Event
Event Category: Ecommerce
Event Action: Product Click
Enable Enhanced Ecommerce Features: true
Use Data Layer: true
More settings > Fields to Set: select the field name page and set its value to {{page path}}
Trigger: event equals productClick

Product Detail Impression

Add To Cart

Tag type : Universal Analytics
Track type : Event
Event Category: Ecommerce
Event Action: Add to Cart
Enable Enhanced Ecommerce Features: true
Use Data Layer: true
More settings > Fields to Set: select the field name page and set its value to {{page path}}
Trigger: event equals addToCart

Remove From Cart

Tag type : Universal Analytics
Track type : Event
Event Category: Ecommerce
Event Action: Remove from Cart
Enable Enhanced Ecommerce Features: true
Use Data Layer: true
More settings > Fields to Set: select the field name page and set its value to {{page path}}
Trigger: event equals removeFromCart

Checkout

Tag type : Universal Analytics
Track type : Event
Event Category: Ecommerce
Event Action: Checkout
Enable Enhanced Ecommerce Features: true
Use Data Layer: true
More settings > Fields to Set: select the field name page and set its value to {{page path}}
Trigger: event equals checkout

Checkout Option

Tag type : Universal Analytics
Track type : Event
Event Category: Ecommerce
Event Action: Checkout Option
Enable Enhanced Ecommerce Features: true
Use Data Layer: true
More settings > Fields to Set: select the field name page and set its value to {{page path}}
Trigger: event equals checkoutOption

Purchase (Pageview)

Purchase (Transaction Event)

Tag type : Universal Analytics
Track type : Event
Event Category: Ecommerce
Event Action: Transaction
Enable Enhanced Ecommerce Features: true
Use Data Layer: true
More settings > Fields to Set: select the field name page and set its value to {{page path}}
Trigger: event equals transaction

Refund

第6节、在Google Analytics配置增强型的电子商务
假设你已经将数据层和GTM中的代码正确设置且已经生效，那么现在我们可以开始在Google Analytics中的数据视图中配置增强型电子商务。
开启增强型电子商务
点击“管理”，选择对应的账号和数据视图，这时候你会看到增强型电子商务选项，点击进去，开启相应的设置，然后根据需要做结算行为流设置。
自定义维度和指标
如果有使用自定义维度用户存储商品信息，那么还需要在自定义中新建一个维度去存储，选择的类型是产品的类型。