网站统计中的访问信息收集的前端实现

网站数据统计分析工具是网站站长和运营人员经常使用的一种工具，比较常用的有谷歌分析、百度统计和腾讯分析等等。所有这些统计分析工具的第一步都是网站访问数据的收集。目前主流的数据收集方式基本都是基于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