網站統計中的訪問信息收集的前端實現

網站數據統計分析工具是網站站長和運營人員經常使用的一種工具，比較常用的有谷歌分析、百度統計和騰訊分析等等。所有這些統計分析工具的第一步都是網站訪問數據的收集。目前主流的數據收集方式基本都是基於javascript的。本文將簡要分析這種數據收集的原理，並一步一步實際搭建一個實際的數據收集系統。

近幾天我自己搭建了一個訪問工具站點的日志收集系統，搭建這個系統要做如下的事：

1.確定收集信息：

為了簡單起見，我不打算實現GA的完整數據收集模型，而是收集以下信息。

名稱	途徑	備注
訪問時間	web server	IIS DateTime.Now
IP	web server	IIS 后端API實現
域名	javascript	document.domain
URL	javascript	document.URL
頁面標題	javascript	document.title
分辨率	javascript	window.screen.height & width
顏色深度	javascript	window.screen.colorDepth
Referrer	javascript	document.referrer
瀏覽客戶端	web server	IIS 后端API實現
客戶端語言	javascript	navigator.language
訪客標識	cookie
網站標識	javascript	自定義對象

2.前端埋點代碼

點代碼我將借鑒GA的模式，但是目前不會將配置對象作為一個FIFO隊列用。一個埋點代碼的模板如下：

<script type="text/javascript">
var _maq = _maq || [];
_maq.push(['_setAccount', '網站標識']);
 
(function() {
    var ma = document.createElement('script'); ma.type = 'text/javascript'; ma.async = true;
    ma.src = ('https:' == document.location.protocol ? 'https://static' : 'http://static') + '.idevtool.com/content/js/ma.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ma, s);
})();
</script>

3.前端統計腳本

(function () {
    var params = {};
    //Document對象數據
    if(document) {
        params.domain = document.domain || ''; 
        params.url = document.URL || ''; 
        params.title = document.title || ''; 
        params.referrer = document.referrer || ''; 
    }   
    //Window對象數據
    if(window && window.screen) {
        params.sh = window.screen.height || 0;
        params.sw = window.screen.width || 0;
        params.cd = window.screen.colorDepth || 0;
    }   
    //navigator對象數據
    if(navigator) {
        params.lang = navigator.language || ''; 
    }   
    //解析_maq配置
    if(_maq) {
        for(var i in _maq) {
            switch(_maq[i][0]) {
                case '_setAccount':
                    params.account = _maq[i][1];
                    break;
                default:
                    break;
            }   
        }   
    }   
    //拼接參數串
    var args = ''; 
    for(var i in params) {
        if(args != '') {
            args += '&';
        }   
        args += i + '=' + encodeURIComponent(params[i]);
    }   
    //通過Image對象請求后端腳本
    var img = new Image(1, 1); 
    img.src = 'http://analytics.domain.org/logo.gif?' + args;
})();

整個腳本放在匿名函數里，確保不會污染全局環境。功能在原理一節已經說明，不再贅述。其中logo.gif是后端腳本。

4.后端api接收日志

后端是用的.Net WebAPI 接收，寫數據庫，單獨部署的站點，安全認證

5.管理端統計分析

獨立IP數，PV數等各種統計

 

程序員工具站點：草根工具www.idevtool.com 

個人筆記站點：草根筆記note.idevtool.com