網站使用者行為資料統計與分析之一：埋點程式碼設計

c3tc3tc3t發表於2016-06-05
網站

原文：http://www.aiuxian.com/article/p-1442657.html

 1 <!-- 獲取使用者行為資料（js檔案外部引用） 五味子-->
 2 <script type="text/javascript">
 3 var _uid = "${sessionScope.memberId}";//獲取使用者會員ID
 4 var _oid = "${orderId}";//獲取使用者訂單ID
 5    (function() {          //(function(){})是一個閉包的用法，閉包必定會被呼叫。
 6 
 7 var ga = document.createElement('script'); 
 8 ga.type = 'text/javascript'; 
 9 ga.charset='gbk';
10 ga.async = true;//ga.async = true 非同步呼叫外部js檔案，即不阻塞瀏覽器的解析
11 ga.src = 'js/ana.js';  
12 var s = document.getElementsByTagName('script')[0];    //取得第一個tag名為script的元素
13 s.parentNode.insertBefore(ga, s);             //在s前新增元素ga
14  })();
15  </script>
  1 /*
  2  *生成UUID,使用者唯一訪問標識
  3  */
  4 (function() {
  5   alert("asdf");
  6   // Private array of chars to use
  7   var CHARS = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
  8  
  9   Math.uuid = function (len, radix) {
 10     var chars = CHARS, uuid = [], i;
 11     radix = radix || chars.length;
 12  
 13     if (len) {
 14       for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
 15     } else {
 16       var r;
 17       uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
 18       uuid[14] = '4';
 19       for (i = 0; i < 36; i++) {
 20         if (!uuid[i]) {
 21           r = 0 | Math.random()*16;
 22           uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
 23         }
 24       }
 25     }
 26     return uuid.join('');
 27   };
 28   Math.uuidFast = function() {
 29     var chars = CHARS, uuid = new Array(36), rnd=0, r;
 30     for (var i = 0; i < 36; i++) {
 31       if (i==8 || i==13 ||  i==18 || i==23) {
 32         uuid[i] = '-';
 33       } else if (i==14) {
 34         uuid[i] = '4';
 35       } else {
 36         if (rnd <= 0x02) rnd = 0x2000000 + (Math.random()*0x1000000)|0;
 37         r = rnd & 0xf;
 38         rnd = rnd >> 4;
 39         uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
 40       }
 41     }
 42     return uuid.join('');
 43   };
 44  
 45   Math.uuidCompact = function() {
 46     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
 47       var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
 48       return v.toString(16);
 49     });
 50   };
 51 })();
 52 
 53 //======================================UUID=============================end
 54     //頁面id,標識唯一一個頁面
 55     var url=window.location.href;
 56 
 57     var url_arr=url.split(".");
 58     
 59     var id=url_arr[url_arr.length-2];
 60     
 61     //獲取會員ID
 62     var _memberId = _uid || '';
 63     
 64     //獲取訂單ID
 65     var _orderId = _oid || '';
 66 
 67     //使用者標識UUID
 68     var _utmb = $.cookie('_utmb') || '';
 69 
 70     //_utmb值為空時，呼叫Math.uuidFast
 71     if(_utmb==null||_utmb=='undefined'||_utmb==''){
 72         
 73             _utmb = Math.uuidFast();
 74             
 75             $.cookie('_utmb', _utmb);
 76             
 77     }
 78     
 79     //從哪個路徑跳轉過來
 80     var _ref = document.referrer || '';
 81     
 82     var _param = _ref.substring(_ref.indexOf("?"), _ref.length);
 83     
 84     var strs =_param.split('&');
 85     
 86     var utm_source='';
 87     
 88     for ( var i = 0; i < strs.length; i++) {
 89         
 90         if (strs[i].indexOf('utm_source')!=-1) {
 91             
 92             utm_source = strs[i].substring(strs[i].indexOf('=')+1,strs[i].length);
 93             
 94         }
 95         
 96     }
 97     
 98     //判斷，如果utm_source的值不為空，則路徑來源取值utm_source，否則取值_ref
 99     if (utm_source!=null&&utm_source!=''&&utm_source!='undefined') {
100         
101         _ref=utm_source;
102         
103     }
104     //獲取當前訪問的頁面
105     var  _currentURL=document.URL || '';
106     
107     alert($.cookie('_utmc'+id));
108     //一秒內連續重新整理算一次請求
109     if ($.cookie('_utmc'+id)) {
110         
111     }
112     else{
113         
114         _utmc = $.cookie('_utmc'+id, true, {expires: 1/24/60/60});//expires以天為單位，cookie有效時間1秒鐘
115         //寫入，傳到後臺
116         var img = new Image();// 建立一個image物件
117         
118         img.src = 'http://localhost:18080/ec-ga/behavior.img?_utmb='+_utmb+"&_memberId="+_memberId+"&_orderId="+_orderId+"&_ref="+_ref+"&_currentURL="+_currentURL; 
119         
120         document.body.appendChild(img);
121     }

程式碼分析：

 

    此段程式碼也不難理解，有幾個地方我捎帶講解一下：

    uuid，在這裡我把它定為使用者訪問唯一識別符號，更多有關uuid的資料，大家上網查。

    _utmc，用來標識一段時間內，如果使用者不斷重新整理，我們算一次頁面請求，所以在這裡我們設定了cookie的有效期

    img，這裡我們摒棄了傳統的ajax傳送請求，那是因為ajax不能跨域傳送請求，所以我們這裡採用了以圖片的形式把資料傳送過去。

    最後，別忘了新增兩個js檔案，一個jquery.js，一個jquery.cookie.js

相關文章