网站用户行为数据统计与分析之一：埋点代码设计

Posted 2020-07-21 学者先要会疑

原文：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