系統設計以及javascript筆記：用戶行為分析研究之數據采集

1.1用戶行為分析的重要性

　　用戶行為分析的重要性，我想做個網站的人都會用很清晰的認識，本來我想談談自己想法，但感覺自己畢竟還是做技術的，很難清晰的從商業價值的角度來分析它的重要性，因此放棄了想闡述自己意見的想法。當我第一次見到百度統計，和谷歌分析網站，就有那種驚鴻一瞥的激動，很想自己也能寫出一套這樣的網站，這也是我持續研究用戶行為分析的初衷。

　　我估計還是有很多童鞋對“用戶行為分析”的概念比較陌生，這里將百度百科里的解釋在這里貼出來，拋磚引玉，希望能有更多的志同道合者跟我一起研究這個主題，百度百科的地址如下：

　　http://baike.baidu.com/view/2330219.htm

　　好了，廢話不多說了，馬上就進入正題。

1.2     設計優秀的數據采集系統

　　對於大型網站而言，網站響應速度是網站是否優秀一個重要衡量標准，下面我引用一些權威機構的統計數據來說明網站響應速度的重要性：

　　用戶行為分析的前提就是能准確的采集到用戶的相關數據，這就需要我們在網站頁面里添加采集數據的代碼，如果我們的采集代碼寫的不好，一定會對網站的性能產生一定的影響，更有甚者還會影響到網站的穩定性。因此設計一套性能卓越，安全性好，耦合度很低的日志采集程序是非常重要的。

　　這里我提供一套采集數據方案，方案詳情如下：

　　我是做java的程序員，經常使用到的web應用服務器是tomact，jboss，weblogic等等，我這里為什么不使用這些我非常熟悉的web應用服務器，而去選擇功能相對單一的apache或者是nginx呢？理由非常簡單，因為apache和nginx速度更快，更加輕量級，這個經驗來源於我做網站的經驗，大型網站的服務端設計是很復雜的，但基本都有一個共同的原則：當用戶一個請求提交到了服務端，服務端會先判斷這個請求，如果請求的是一些對靜態資源的訪問（比如圖片，不會變化的文字等），請求會直接提交到響應的靜態資源服務器集群，這樣速度會更快，而這些靜態資源服務器基本都是apache或者是像nginx這樣的輕量級web服務器集群。

1.3    采集系統之服務端

　　本地開發，我就不去搭建集群了，有興趣的童鞋可以在網上查查相關的資料。本地開發我就搭建一個apache服務器。

　　服務器的開發非常簡單，只要修改下apache下的conf文件（注意：我的開發平台是window7），代碼如下：

<IfModule log_config_module>
    LogFormat "%h %l %u %t [%{%Y-%m-%d %T}t] \"%r\" [%q] [%U] %>s %b \"%{Referer}i\" \"%{User-Agent}i\"" combined
    LogFormat "%h %l %u %t [%{%Y-%m-%d %T}t] \"%r\" [%q] [%U] %>s %b" common

    <IfModule logio_module>
      # You need to enable mod_logio.c to use %I and %O
      LogFormat "%h %l %u %t [%{%Y-%m-%d %T}t] \"%r\" [%q] [%U] %>s %b \"%{Referer}i\" \"%{User-Agent}i\" %I %O" combinedio
    </IfModule>   

在htdocs文件夾里添加如下文件：

1)         a.gif。（1*1像素的透明文件）

2)         click.html。（用於記錄點擊日志）

3)         error.html。（記錄錯誤信息日志）

啟動apache服務器，我們在瀏覽器錄入如下地址：

http://127.0.0.1/a.gif?name=sharpxiajun&msg=test

在logs文件夾里找到2012_06_26.access.log文件，打開文件，我們會看到如下日志：

127.0.0.1 - - [26/Jun/2012:11:37:07 +0800] [2012-06-26 11:37:07] "GET /a.gif?name=sharpxiajun&msg=test HTTP/1.1" [?name=sharpxiajun&msg=test] [/a.gif] 200 43

訪問請求被完整的記錄下來了。

1.4     采集系統之客戶端

　　采集系統的核心還是客戶端的采集腳本，這里我會貼出完整的采集腳本以及測試頁面，代碼的詳細解析我會在以后的博客里進行闡述。

　　我的采集腳本可以記錄用戶訪問的日志，還能記錄用戶的點擊日志，不過點擊日志一般包含業務含義需要用戶根據自己的需求去定義。代碼如下：

up_beacon.js:

(function(window,document,undefined){
    // upLogger對象是采集腳本對外提供的操作對象
    if (window.upLogger){//如果不為空，直接返回，避免重復安裝
        return;
    }
    var upBeaconUtil ={//日志記錄工具類
        jsName:'up_beacon.js',//程序名稱
        defaultVer:20120607,//版本日期
        getVersion:function(){//獲取版本號
            var e = this.jsName;
            var a = new RegExp(e + "(\\?(.*))?$");
            var d = document.getElementsByTagName("script");
            for (var i = 0;i < d.length;i++){
                var b = d[i];
                if (b.src && b.src.match(a)){
                    var z = b.src.match(a)[2];
                    if (z && (/^[a-zA-Z0-9]+$/).test(z)){
                         return z;
                    }
                }
            }
            return this.defaultVer;
        },
        setCookie:function(sName,sValue,oExpires,sPath,sDomain,bSecure){//設置cookie信息
            var currDate = new Date(),
                sExpires = typeof oExpires == 'undefined'?'':';expires=' + new Date(currDate.getTime() + (oExpires * 24 * 60 * 60* 1000)).toUTCString();
            document.cookie = sName + '=' + sValue + sExpires + ((sPath == null)?'':(' ;path=' + sPath)) + ((sDomain == null)?'':(' ;domain=' + sDomain)) + ((bSecure == true)?' ; secure':'');
        },
        getCookie:function(sName){//獲取cookie信息
            var regRes = document.cookie.match(new RegExp("(^| )" + sName + "=([^;]*)(;|$)"));
            return (regRes != null)?unescape(regRes[2]):'-';
        },
        getRand:function(){// 生產頁面的唯一標示
            var currDate = new Date();
            var randId = currDate.getTime() + '-';    
            for (var i = 0;i < 32;i++)
            {
                randId += Math.floor(Math.random() * 10);    
            }
            return randId;
        },
        parseError:function(obj){
            var retVal = '';
            for (var key in obj){
                retVal += key + '=' + obj[key] + ';';    
            }
            return retVal;
        },
        getParam:function(obj,flag){// 參數轉化方法
            var retVal = null;
            if (obj){
                if (upBeaconUtil.isString(obj) || upBeaconUtil.isNumber(obj)){
                    retVal = obj;    
                }else{
                    if (upBeaconUtil.isObject(obj)){
                        var tmpStr = '';
                        for (var key in obj){
                            if (obj[key] != null && obj[key] != undefined){
                                var tmpObj = obj[key];
                                if (upBeaconUtil.isArray(tmpObj)){
                                    tmpObj = tmpObj.join(',');    
                                }else{
                                    if (upBeaconUtil.isDate(tmpObj)){
                                        tmpObj = tmpObj.getTime();    
                                    }
                                }
                                tmpStr += key + '=' + tmpObj + '&';
                            }
                        }
                        tmpStr = tmpStr.substring(0,tmpStr.length - 1);
                        retVal = tmpStr;
                    }else{
                        if (upBeaconUtil.isArray(obj)){
                            if (upBeaconUtil.length & upBeaconUtil.length > 0){
                                retVal = obj.join(',');
                            }
                        }else{
                            retVal = obj.toString();    
                        }
                    }
                }
            }
            
            if (!retVal){
                retVal = '-';    
            }
            
            if (flag){
                retVal = encodeURIComponent(retVal);
                retVal = this.base64encode(retVal);
            }
            return retVal;
        },
        base64encode: function(G) {//base64加密
            var A = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
            var C, E, z;
            var F, D, B;
            z = G.length;
            E = 0;
            C = "";
            while (E < z) {
                F = G.charCodeAt(E++) & 255;
                if (E == z) {
                    C += A.charAt(F >> 2);
                    C += A.charAt((F & 3) << 4);
                    C += "==";
                    break
                }
                D = G.charCodeAt(E++);
                if (E == z) {
                    C += A.charAt(F >> 2);
                    C += A.charAt(((F & 3) << 4) | ((D & 240) >> 4));
                    C += A.charAt((D & 15) << 2);
                    C += "=";
                    break
                }
                B = G.charCodeAt(E++);
                C += A.charAt(F >> 2);
                C += A.charAt(((F & 3) << 4) | ((D & 240) >> 4));
                C += A.charAt(((D & 15) << 2) | ((B & 192) >> 6));
                C += A.charAt(B & 63)
            }
            return C
        },
        getDomain:function(){//獲取網站的域名
            return document.URL.substring(document.URL.indexOf("://") + 3,document.URL.lastIndexOf("\/"));
        },
        isString:function(obj){// 判斷是不是String類型
            return (obj != null) && (obj != undefined) && (typeof obj == 'string') && (obj.constructor == String);    
        },
        isNumber:function(obj){// 判斷是否是數組
            return (typeof obj == 'number') && (obj.constructor == Number);    
        },
        isDate:function(obj){// 判斷是否是日期
            return obj && (typeof obj == 'object') && (obj.constructor == Date);
        },
        isArray:function(obj){//判斷是否是數組
            return obj && (typeof obj == 'object') && (obj.constructor == Array);    
        },
        isObject:function(obj){//判斷是否是對象
            return obj && (typeof obj == 'object') && (obj.constructor == Object)    
        },
        trim:function(str){// 去除左右兩邊空格
            return str.replace(/(^\s*)|(\s*$)/, "");;
        }
    },
    beacon_vist_num = isNaN(beacon_vist_num = +upBeaconUtil.getCookie('up_beacon_vist_count')) ? 1:beacon_vist_num + 1;// 從cookie里獲取訪問次數
    upBeaconUtil.setCookie('up_beacon_vist_count',beacon_vist_num);//記錄新的訪問次數
    var setUpBeaconId = function(){
        var sUpBeaconId = upBeaconUtil.trim(upBeaconUtil.getCookie('up_beacon_id'));
        if (sUpBeaconId == undefined || sUpBeaconId == null || sUpBeaconId == '' || sUpBeaconId == '-'){
            upBeaconUtil.setCookie('up_beacon_id',(upBeaconUtil.getDomain() + '.' + (new Date()).getTime()));
        }        
    }(),
    beaconMethod = {
        uvId:'up_beacon_id',// 
        memId:'up_dw_track'    ,
        beaconUrl:'127.0.0.1/a.gif',//記錄訪問日志的url
        errorUrl:'127.0.0.1/error.html',//記錄錯誤日志的url
        clickUrl:'127.0.0.1/click.html',//記錄click日志的url 
        pageId:typeof _beacon_pageid != 'undefined'?_beacon_pageid:(_beacon_pageid = upBeaconUtil.getRand()),//生產pageId(頁面唯一標示)
        protocol:function(){//請求的協議例如http://
            var reqHeader = location.protocol;
            if ('file:' === reqHeader){
                reqHeader = 'http:';    
            }
            return reqHeader + '//';
        },
        tracking:function(){// 記錄訪問日志的方法（對外）
            this.beaconLog();
        },
        getRefer:function(){// 獲取上游頁面信息
            var reqRefer = document.referrer;
            reqRefer == location.href && (reqRefer = '');
            try{
                reqRefer = '' == reqRefer ? opener.location:reqRefer;
                reqRefer = '' == reqRefer ? '-':reqRefer;
            }catch(e){
                reqRefer = '-';
            }
            return reqRefer;
        },
        beaconLog:function(){// 記錄訪問日志方法
            try{
                var httpHeadInd = document.URL.indexOf('://'),
                    httpUrlContent = '{' + upBeaconUtil.getParam(document.URL.substring(httpHeadInd + 2)) + '}',
                    hisPageUrl = '{' + upBeaconUtil.getParam(this.getRefer()) + '}',
                    ptId = upBeaconUtil.getCookie(this.memId),
                    cId = upBeaconUtil.getCookie(this.uvId),
                    btsVal = upBeaconUtil.getCookie('b_t_s'),
                    beanconMObj = {};
                var btsFlag = btsVal == '-' || btsVal.indexOf('s') == -1;
                if (ptId != '-'){
                    beanconMObj.memId = ptId;    
                }
                if (btsFlag){
                    beanconMObj.subIsNew = 1;
                    upBeaconUtil.setCookie('b_t_s',btsVal == '-' ? 's' : (btsVal + 's'),10000,'/');
                }else{
                    beanconMObj.subIsNew = 0;    
                }
                var logParams = '{' + upBeaconUtil.getParam(beanconMObj) + '}',
                    logPageId = this.pageId,
                    logTitle = document.title;
                if (logTitle.length > 25){
                    logTitle = logTitle.substring(0,25);
                }
                logTitle = encodeURIComponent(logTitle);
                var logCharset = (navigator.userAgent.indexOf('MSIE') != -1) ? document.charset : document.characterSet,
                    logQuery = '{' + upBeaconUtil.getParam({
                        pageId:logPageId,
                        title:logTitle,
                        charset:logCharset,
                        sr:(window.screen.width + '*' + window.screen.height)
                    }) + '}';
                var sparam = {
                    logUrl:httpUrlContent,
                    logHisRefer:hisPageUrl,
                    logParams:logParams,
                    logQuery:logQuery
                };
                this.sendRequest(this.beaconUrl,sparam);
            }catch(ex){
                this.sendError(ex);    
            }
        },
        clickLog:function(sparam){// 記錄點擊日志
            try{
                // 獲得pageId
                var clickPageId = this.pageId;
                if (!clickPageId){// 當pageId值為空，重新計算pageId
                    this.pageId = upBeaconUtil.getRand();
                    clickPageId    = this.pageId;
                }
                var clickAuthId = this.authId;//authId是針對某個網站的唯一標示
                if (!clickAuthId){
                    clickAuthId = '-';    
                }
                if (upBeaconUtil.isObject(sparam)){// 當傳入參數是javascript對象
                    sparam.pageId = clickPageId;
                    sparam.authId = clickAuthId;    
                }else{
                    if (upBeaconUtil.isString(sparam) && sparam.indexOf('=') > 0){// 當傳入參數是字符串
                        sparam += '&pageId=' + clickPageId + "&authId=" + clickAuthId;
                    }else{
                        if (upBeaconUtil.isArray(sparam)){// 當傳入參數是數組
                            sparam.push("pageId=" + clickPageId);
                            sparam.push("authId=" + clickAuthId);
                            sparam = sparam.join('&');//數組轉化為字符串
                        }else{// 其他數據類型
                            sparam = {pageId:clickPageId,authId:clickAuthId};    
                        }
                    }
                }
                this.sendRequest(this.clickUrl, sparam);// 發送點擊日志
            }catch(ex){
                this.sendError(ex);        
            }
        },
        sendRequest:function(url,params){// 日志發送方法
            var urlParam = '',currDate = new Date();
            try{
                if (params){
                    urlParam = upBeaconUtil.getParam(params,false);
                    urlParam = (urlParam == '')?urlParam:(urlParam + '&');
                }
                var tmpUrlParam = 'ver=' + upBeaconUtil.getVersion() + '&time=' + currDate.getTime();
                url = this.protocol() + url + '?' + urlParam + tmpUrlParam;
                
                var logImage = new Image();
                logImage.onload = function(){
                    logImage = null;    
                }
                logImage.src = url;
            }catch(e){
                this.sendError(e);
            }
        },
        sendError:function(ex){// 發送錯誤日志
            var errURIParams = upBeaconUtil.parseError(ex),
                errURL = this.errorUrl + '?type=send&exception=' + encodeURIComponent(errURIParams.toString()),
                errImage = new Image();
            errImage.onload = function(){
                errImage = null;    
            };
            errImage.src = this.protocol() + errURL;
        }
    };
    beaconMethod.tracking();
    window.upLogger = beaconMethod;//構建window的upLogger對象
})(window,document);

 

install_up_beacon.js文件，這個文件對外提供：

(function(window,document,undefined){
    /*安裝采集腳本的js程序*/
    // upLogger對象是采集腳本對外提供的操作對象
    if (window.upLogger){//如果不為空，直接返回，避免重復安裝
        return;
    }
    var cookieUtil = {//cookie操作工具類
        setCookie:function(sName,sValue,oExpires,sPath,sDomain,bSecure){
            var currDate = new Date(),
                sExpires = typeof oExpires == 'undefined'?'':';expires=' + new Date(currDate.getTime() + (oExpires * 24 * 60 * 60* 1000)).toUTCString();
            document.cookie = sName + '=' + sValue + sExpires + ((sPath == null)?'':(' ;path=' + sPath)) + ((sDomain == null)?'':(' ;domain=' + sDomain)) + ((bSecure == true)?' ; secure':'');
        },
        getCookie:function(sName){
            var regRes = document.cookie.match(new RegExp("(^| )" + sName + "=([^;]*)(;|$)"));
            return (regRes != null)?unescape(regRes[2]):'-';
        }        
    };
    var btsVal = cookieUtil.getCookie('b_t_s'),//b_t_s的cookie作用1.標識該頁面是否已經安裝了采集腳本；2.記錄采集腳本的有效期
        startTime = 0,
        intervalTime = 3 * 24 * 60 * 60 * 1000,
        currIntervalTime = new Date().getTime() - 1200000000000,
        domainHead = (document.URL.substring(0,document.URL.indexOf('://'))) + '://';
    if (btsVal != '-' && btsVal.indexOf('t') != -1){
        var getBtsTime = btsVal.substring(btsVal.indexOf('t') + 1,btsVal.indexOf('x'));
            getCurrInterVal = currIntervalTime - getBtsTime;
        if (getCurrInterVal > intervalTime){
            startTime = currIntervalTime;
            cookieUtil.setCookie('b_t_s',btsVal.replace('t' + getBtsTime + 'x', 't' + currIntervalTime + 'x'), 10000, '/');
        }else{
            startTime = getBtsTime;
        }
    }else{
        if (btsVal == '-'){
            cookieUtil.setCookie('b_t_s','t' + currIntervalTime + 'x', 10000, '/');    
        }else{
            cookieUtil.setCookie('b_t_s',btsVal + 't' + currIntervalTime + 'x', 10000, '/');        
        }
        startTime = currIntervalTime;
    }
    document.write('<script src="' + domainHead + '127.0.0.1/up_beacon.js?' + startTime + '"><\/script>');//安裝采集腳本
})(window,document);

下面是測試頁面;

第一個測試頁面：testbeacon.html，代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>beacon test page</title>
</head>
<script type="text/javascript" src="install_up_beacon.js"></script>
<body>
<h1>日志測試</h1>
<input type="button" value="Click Button" id="clickBtn" name="clickBtn" onclick="clickLog('testClickBtn','MyTest')"/>
</body>
</html>
<script type="text/javascript">
// 用戶行為統計代碼
function recordStaticLogerr(authId,type,msg){
    if (window.upLogger){
        upLogger.authId = authId;
        upLogger.clickLog('type=' + type + '&clickTarget=' + msg);    
    }
}

// 記錄click日志的方法
function clickLog(clog_msg,clog_type){
    var clog_authId    = 'sharpxiajun';
    recordStaticLogerr(clog_authId,clog_type,clog_msg);    
}
</script>

第二個測試頁面：parent.html，代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parent html</title>
</head>

<body>
<a href="testbeacon.html" target="_self">child.html</a>
</body>
</html>

1.5     測試結果

測試地址：

http://localhost/testbeacon.html

http://localhost/parent.html

我們查看cookies信息，如下圖：

日志信息如下：

127.0.0.1 - - [26/Jun/2012:10:01:52 +0800] [2012-06-26 10:01:52] "GET /parent.html HTTP/1.1" [] [/parent.html] 304 -
127.0.0.1 - - [26/Jun/2012:10:01:54 +0800] [2012-06-26 10:01:54] "GET /testbeacon.html HTTP/1.1" [] [/testbeacon.html] 304 -
127.0.0.1 - - [26/Jun/2012:10:01:54 +0800] [2012-06-26 10:01:54] "GET /install_up_beacon.js HTTP/1.1" [] [/install_up_beacon.js] 304 -
127.0.0.1 - - [26/Jun/2012:10:01:54 +0800] [2012-06-26 10:01:54] "GET /up_beacon.js?140675524644 HTTP/1.1" [?140675524644] [/up_beacon.js] 304 -
127.0.0.1 - - [26/Jun/2012:10:01:54 +0800] [2012-06-26 10:01:54] "GET /a.gif?logUrl={/localhost/testbeacon.html}&logHisRefer={http://localhost/parent.html}&logParams={subIsNew=0}&logQuery={pageId=1340676114790-42900296489937289847295051780050&title=beacon%20test%20page&charset=UTF-8&sr=1280*1024}&ver=140675524644&time=1340676114791 HTTP/1.1" [?logUrl={/localhost/testbeacon.html}&logHisRefer={http://localhost/parent.html}&logParams={subIsNew=0}&logQuery={pageId=1340676114790-42900296489937289847295051780050&title=beacon%20test%20page&charset=UTF-8&sr=1280*1024}&ver=140675524644&time=1340676114791] [/a.gif] 200 43
127.0.0.1 - - [26/Jun/2012:10:02:01 +0800] [2012-06-26 10:02:01] "GET /click.html?type=MyTest&clickTarget=testClickBtn&pageId=1340676114790-42900296489937289847295051780050&authId=sharpxiajun&ver=140675524644&time=1340676121252 HTTP/1.1" [?type=MyTest&clickTarget=testClickBtn&pageId=1340676114790-42900296489937289847295051780050&authId=sharpxiajun&ver=140675524644&time=1340676121252] [/click.html] 200 310

大家看到了吧，請求都被記錄下來，下面我們只要好好分析這些日志文件的信息就行了。

 

 pdf下載地址：

http://files.cnblogs.com/sharpxiajun/%E7%94%A8%E6%88%B7%E8%A1%8C%E4%B8%BA%E5%88%86%E6%9E%90%E7%A0%94%E7%A9%B6%E4%B9%8B%E6%95%B0%E6%8D%AE%E9%87%87%E9%9B%86.pdf