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

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

原文出处：https://www.cnblogs.com/benpao/p/10786926.html