前段時間因為工作上的關係有幸接觸到了谷歌分析(Google Analytics（分析）)，雖然官網文檔介紹的非常詳細，但是我在代碼部署的過程中還是遇到了不少問題，國內對GA代碼部署的文章又非常的少，所以今天把代碼部署從頭到尾細細道來，希望網站開發人員在部署GA代碼的時候能更加順利一點。
1.基礎部署
首先，登入Google分析必須有一個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.
程式碼：
GA('發送', '事件', “ register_success’, '報名', 登記名稱);
如果要統計用戶付款時候所選擇的付款方式就可以使用自定義維度來實現。自定義維度也是在管理中進行添加，維度的名稱是GA報告中顯示的名稱，維度的索引是網站代碼中需要向GA發送數據的時候要用到。
如果(paymethod =='Wechat_pay'){
GA('發送', 'pageview', {
'dimension1': '微信支付' //dimension1 這個1是自定義維度的索引
});
}別的{
GA('發送', '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.html6.支付成功，頁面回調
//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.html7.在GA報告電子商務管理中添加渠道：
渠道1：開始下單
渠道2：支付成功
這樣在報告–>轉化–>電子商務–>購物分析–>結賬行為中就可以顯示出這兩個渠道了。
效果展示：
這時候增強電子商務的大部分功能就已經實現了。還有一些其它功能又上麵類似，就不展示了。
在整個代碼部署完成之後我們會發現其實這樣部署代碼是非常麻煩的，並且需要維護起來比較困難，google也是看到了這一點所以後來推出了Tag manager進行代碼遠程部署。想要嘗試用tag manager部署增強電子商務的同學可以參考這個，官方已經說的很詳細了。
