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

本文链接：https://blog.csdn.net/u013339851/article/details/23098695

本文探讨了在电商环境下，如何通过前端行为数据和后端商业数据的整合，运用JavaScript、JSP、jQuery和jQueryCookie等技术手段，实现销售预测信息的高效挖掘。文章深入分析了数据收集流程，包括UUID生成、用户访问唯一标识符、行为数据埋点及跨域数据传输方式，并介绍了关键代码实现。重点阐述了如何通过分析用户行为数据和商业数据之间的关系，推动数据价值的深层次利用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

场景：电商

技术：js，jsp，jquery，jquery cookie etc

背景：现如今，销售预测在提高企业经济效益及决策支持水平的方面占有重要的地位。随着企业信息化技术水平的提高，企业销售数据日益丰富，管理者对其中隐藏的销售预测信息的渴求愈来愈强烈。用传统的方法来分析这些海量数据中的销售信息相当困难，已不适应时代需求。此文目的正在此处，即如何寻找更好的方法去挖掘销售数据中隐藏的销售预测信息。

应用：目前习惯了这样一种称谓：前端行为数据和后端商业数据。前段数据指访问量、浏览量、点击流及站内搜索等反应用户行为的数据，而后端数据更侧重商业数据，比如交易量、ROI（转化率）、LTV(Life time Value终身价值)。目前有些人关心行为数据，也有些人关心商业数据，但较少人把行为数据和商业数据联系起来看。大家往往只单纯看某一端数据。国内小有名气的网站CEO，每天也只看一个结果数据：网站今天的成交量是多少，卖了多少件产品。但是看数据走火入魔的人会明白，每个数据，就像散布在黑夜里的星星，它们彼此之间布满了关系网，只要轻轻按一下其中一个数据，就会驱动另外一些数据的变化。

实现流程图：

设计实现图：

js埋点代码，此部分代码借鉴谷歌分析的思路设计，相信不难理解：

   <!-- 获取用户行为数据（js文件外部引用） 五味子-->
   <script type="text/javascript">
	  var _uid = "${sessionScope.memberId}";//获取用户会员ID
	  var _oid = "${orderId}";//获取用户订单ID
      (function() {          //(function(){})是一个闭包的用法，闭包必定会被调用。
	
	  var ga = document.createElement('script'); 
	  ga.type = 'text/javascript'; 
	  ga.charset='gbk';
	  ga.async = true;//ga.async = true 异步调用外部js文件，即不阻塞浏览器的解析
	  ga.src = 'js/ana.js';  
	  var s = document.getElementsByTagName('script')[0];    //取得第一个tag名为script的元素
	  s.parentNode.insertBefore(ga, s);             //在s前添加元素ga
    })();
    </script>

大家可能注意到了此段代码块中引入了一个ana.js文件，这个文件就是收集行为数据的核心代码文件：

/*
 *生成UUID,用户唯一访问标识
 */
(function() {
  alert("asdf");
  // Private array of chars to use
  var CHARS = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
 
  Math.uuid = function (len, radix) {
    var chars = CHARS, uuid = [], i;
    radix = radix || chars.length;
 
    if (len) {
      for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix];
    } else {
      var r;
      uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
      uuid[14] = '4';
      for (i = 0; i < 36; i++) {
        if (!uuid[i]) {
          r = 0 | Math.random()*16;
          uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
        }
      }
    }
    return uuid.join('');
  };
  Math.uuidFast = function() {
    var chars = CHARS, uuid = new Array(36), rnd=0, r;
    for (var i = 0; i < 36; i++) {
      if (i==8 || i==13 ||  i==18 || i==23) {
        uuid[i] = '-';
      } else if (i==14) {
        uuid[i] = '4';
      } else {
        if (rnd <= 0x02) rnd = 0x2000000 + (Math.random()*0x1000000)|0;
        r = rnd & 0xf;
        rnd = rnd >> 4;
        uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r];
      }
    }
    return uuid.join('');
  };
 
  Math.uuidCompact = function() {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
      var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
      return v.toString(16);
    });
  };
})();

//======================================UUID=============================end
	//页面id,标识唯一一个页面
	var url=window.location.href;

	var url_arr=url.split(".");
	
	var id=url_arr[url_arr.length-2];
	
	//获取会员ID
	var _memberId = _uid || '';
	
	//获取订单ID
	var _orderId = _oid || '';

	//用户标识UUID
	var _utmb = $.cookie('_utmb') || '';

	//_utmb值为空时，调用Math.uuidFast
	if(_utmb==null||_utmb=='undefined'||_utmb==''){
		
			_utmb = Math.uuidFast();
			
		    $.cookie('_utmb', _utmb);
		    
	}
	
	//从哪个路径跳转过来
	var _ref = document.referrer || '';
	
	var _param = _ref.substring(_ref.indexOf("?"), _ref.length);
	
	var strs =_param.split('&');
	
	var utm_source='';
	
	for ( var i = 0; i < strs.length; i++) {
		
		if (strs[i].indexOf('utm_source')!=-1) {
			
			utm_source = strs[i].substring(strs[i].indexOf('=')+1,strs[i].length);
			
		}
		
	}
	
	//判断，如果utm_source的值不为空，则路径来源取值utm_source，否则取值_ref
	if (utm_source!=null&&utm_source!=''&&utm_source!='undefined') {
		
		_ref=utm_source;
		
	}
	//获取当前访问的页面
	var  _currentURL=document.URL || '';
	
	alert($.cookie('_utmc'+id));
	//一秒内连续刷新算一次请求
	if ($.cookie('_utmc'+id)) {
		
	}
	else{
		
		_utmc = $.cookie('_utmc'+id, true, {expires: 1/24/60/60});//expires以天为单位，cookie有效时间1秒钟
		//写入，传到后台
		var img = new Image();// 创建一个image对象
		
		img.src = 'http://localhost:18080/ec-ga/behavior.img?_utmb='+_utmb+"&_memberId="+_memberId+"&_orderId="+_orderId+"&_ref="+_ref+"&_currentURL="+_currentURL; 
		
		document.body.appendChild(img);
	}

代码分析：

此段代码也不难理解，有几个地方我捎带讲解一下：

uuid，在这里我把它定为用户访问唯一标识符，更多有关uuid的资料，大家上网查。

_utmc，用来标识一段时间内，如果用户不断刷新，我们算一次页面请求，所以在这里我们设置了cookie的有效期

img，这里我们摒弃了传统的ajax发送请求，那是因为ajax不能跨域发送请求，所以我们这里采用了以图片的形式把数据发送过去。

最后，别忘了添加两个js文件，一个jquery.js，一个jquery.cookie.js。