1. 程式人生 > >網站使用者行為資料統計與分析之一:埋點程式碼設計

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

    場景:電商

    技術: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。