【GA】Google Analytics 电商网站GA代码部署+增强电子商务详解

前段时间因为工作上的关系有幸接触到了谷歌分析(google analytics)，虽然官网文档介绍的非常详细，但是我在代码部署的过程中还是遇到了不少问题，国内对GA代码部署的文章又非常的少，所以今天把代码部署从头到尾细细道来，希望网站开发人员在部署GA代码的时候能更加顺利一点。

1.基础部署

首先，登录Google Analytics必须有一个Gmail账号。所以国内的同学，你懂得。搞个VPN翻墙或者用google浏览器安装[谷歌访问助手]插件注册一个吧。
谷歌访问助手下载：http://pan.baidu.com/s/1nvNjmJJ
注册完成之后登录GA创建一个GA账户以获取一个追踪id，具体操作如下：

GA账户注册成功之后点击管理菜单，查看自己的追踪代码：

接下来直接根据提示把这些代码加入到网站页面中即可。建议把追踪代码加入到公共js中，在有需要用到GA的页面引入公共js。
访问网页会发现报告中的网页浏览量会加1。
基本语法请参考GA官方文档

2.高级功能的实现

GA的扩展性很强，有很多方便我们的使用的功能。比如：自定义维度，自定义指标，目标，user-id跟踪等。
如果要统计该网站注册成功的用户的数量，可以使用目标来实现。目标在GA管理可以进行添加，在目标说明可以选择目标网页或者事件，这个可以根据需要进行确定。

比如我在GA中设置的目标说明为事件，设置事件的类型为Register_Success。这就是说当网站向GA中发送这个类型的事件，那么目标统计就会+1.
代码：
1
ga('send', 'event', 'Register_Success', 'Sign Up', RegisterName);
如果要统计用户付款时候所选择的付款方式就可以使用自定义维度来实现。自定义维度也是在管理中进行添加，维度的名称是GA报告中显示的名称，维度的索引是网站代码中需要向GA发送数据的时候要用到。
1
2
3
4
5
6
7
8
9
if(payMethod == 'wechat_pay'){
    ga('send', 'pageview', {
        'dimension1':  '微信支付'   //dimension1 这个1是自定义维度的索引
    });
}else{
    ga('send', 'pageview', {
        'dimension1':  '支付宝支付'
    });
}

这时候就已经向GA中成功发送了所以为1的自定义维度了。但是报告中并没有地方有展示的自定义维度的报告。所以我们就可以在自定义菜单中添加一个自定义报告，在自定义中找到自己的自定义维度，其它配置看自己需要。

接下来部署增强型电子商务：

部署增强型电子商务首先需要在GA管理中开启增强电子商务功能。
ps:本地环境 angular.js
添加增强电子商务插件,在公共js中加入代码： ga('require', 'ec');

1.产品列表页面所展示的产品：

ga('set', '&cu', 'CNY');              // 本地货币 CNY 人民币
foods.forEach(function (data, index, array) {
    var impression = {
        'name': data.itemName,               // 产品的名称
        'id': data.itemId,                  // 产品id
        'price': data.itemPrice,            // 产品单价
        'brand': restName,                  // 品牌
        'category': categoryName,           // 分类
        'list': 'xxx Products',         // 所属的list
        'position': index               // 产品位置
    };
    ga('ec:addImpression',impression);      //注意：一个产品发送一次ec:addImpression，一个页面上有100个产品就要发送ec:addImpression 100次。
});
ga('send', 'pageview');
console.log("ga衡量商品展示");

2.衡量产品的点击

//ec:addProduct中添加被点击的商品的具体信息
 ga('ec:addProduct', {
    'id': $scope.foodData.data.itemId,
    'name':$scope.foodData.data.itemName,
    'price':$scope.foodData.data.itemPrice,
    'brand':$scope.foodData.data.branchId,
    'category': $scope.foodData.data.categoryName,
    'variant':$scope.foodData.data.desc
});
//ec:setAction click表示有产品被点击
ga('ec:setAction', 'click', {list: 'xxx Products'});
// Send click with an event, then send user to product page.
ga('send', 'event', 'UX', 'click', 'Results', {
    hitCallback: function() {
    }
});
console.log("被点击的商品"+$scope.foodData.data.itemName);

setAction操作类型：

3.加入购物车

ga('ec:addProduct', {
            'name': $scope.foodData.data.itemName,
            'id': $scope.foodData.data.itemId,
            'price': $scope.foodData.data.itemPrice,
            'brand': $scope.foodData.data.branchId,
            'category': $scope.foodData.data.categoryName,
            'quantity': 1
        });
        console.log("被加入购物车的商品"+$scope.foodData.data.itemName);
        ga('ec:setAction', 'add');
        ga('send', 'event', 'UX', 'click', 'add to cart');     // Send data using an event.

4.移除购物车

var products=[];
  foods.forEach(function (data,index,array) {
      var product = createProduct(data,data.itemCategory,restName);
      console.log(product);
      ga('ec:addProduct', product);
  });
  ga('ec:setAction', 'remove');
  ga('send', 'event', 'UX', 'click', 'remove from cart');     // Send data using an event.

5.点击下单按钮开始支付流程

for(var i=0;i<$scope.cart.foods.length;i++){
       var product=  {
           'name': '',
           'id': '',
           'price': '',
           'brand': $scope.cart.restName,
           'category': 'Apparel',
           'variant': 'Black',
           'quantity': ''
       };
       product.name=$scope.cart.foods[i].itemName;
       console.log($scope.cart.foods[i].itemName);
       product.id=$scope.cart.foods[i].itemId;
       product.price=$scope.cart.foods[i].itemPrice;
       product.quantity=$scope.cart.foods[i].count;
       /*products[i] = product;*/
       ga('ec:addProduct', product);
       // products.push(product);
       console.log(product);
   }
   ga('ec:setAction','checkout', {
       'step': 1,            // A value of 1 indicates this action is first checkout step.
       'option': 'null'      // Used to specify additional info about a checkout stage, e.g. payment method.
   });
   ga('send', 'pageview');   // Pageview for payment.html

6.支付成功，页面回调

//1.向GA发送已成交的的商品
 for(var i=0;i<$scope.cart.foods.length;i++){
        var product=  {
            'name': '',
            'id': '',
            'price': '',
            'brand': $scope.cart.restName,
            'category': 'Apparel',
            'variant': 'Black',
            'quantity': ''
        };
        product.name=$scope.cart.foods[i].itemName;
        console.log($scope.cart.foods[i].itemName);
        product.id=$scope.cart.foods[i].itemId;
        product.price=$scope.cart.foods[i].itemPrice;
        product.quantity=$scope.cart.foods[i].count;
        ga('ec:addProduct', product);
        console.log(product);
    }
    ga('set', '&cu', 'CNY');              // Set tracker currency to Euros
    // Transaction level information is provided via an actionFieldObject.
    ga('ec:setAction', 'purchase', {
        'id': orderNo,                         // 交易ID. Required for purchases and refunds.
        'affiliation': 'Sherpas website',
        'revenue': $scope.cart.totalPrice,                          // 收益 (incl. tax and shipping)
        'tax':'0',                                                   // 税
        'shipping': $scope.cart.deliveryFee,                     // 运送费
        'coupon': $scope.couponO
    });
    ga('send', 'pageview');     // Send transaction data with initial pageview.
    
    //2.支付流程2 支付成功
    ga('ec:setAction', 'checkout_option', {
                'step': 2,
                'option': null
            });
    ga('send', 'event', 'Checkout', 'Option', {
        hitCallback: function() {
        }
    });
    ga('send', 'pageview');     // Pageview for shipping.html

7.在GA报告电子商务管理中添加渠道：

渠道1：开始下单
渠道2：支付成功

这样在报告–>转化–>电子商务–>购物分析–>结账行为中就可以显示出这两个渠道了。
效果展示：

这时候增强电子商务的大部分功能就已经实现了。还有一些其它功能又上面类似，就不展示了。
在整个代码部署完成之后我们会发现其实这样部署代码是非常麻烦的，并且需要维护起来比较困难，google也是看到了这一点所以后来推出了Tag manager进行代码远程部署。想要尝试用tag manager部署增强电子商务的同学可以参考这个，官方已经说的很详细了。
我在使用tag manager的时候发现会有数据统计不完全，延迟等现象，不晓得是配置问题还是ga本身的问题，有知道的同学可以在下方留言告诉我一下，谢谢~
技术交流qq:576903218