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

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

posted on 2019-04-28 21:43 程序玩家 阅读(...) 评论(...) 编辑 收藏

导航