web统计原理及实现方法汇总总结—网站统计中的数据收集

在php、jsp、asp后端总揽一切的时代，网站统计基本是后台的事情——其实web开发，也没有前端这个职位，网站设计（现在的UI）不仅要前途还要用dreamwave等工具生成html给后台套模板。web2.0后，除了数据库带宽瓶颈，基本就在前端了。

入职顺丰后，发现前端统计居然还得自己搞id，ajax发送POST请求去请求统计系统入库（即使ajax也用head请求好点吧），惊呆了（虽然作为一个前端，出过方案，做过nginx json 日志统计todo案列，但是，没有人配合，然并卵……）

今天来侃下这个话题：

在不使用谷歌分析、百度统计、站长统计、腾讯分析等工具前提下，如何规划自己的统计系统？

网站统计分析工具需要收集到用户浏览目标网站的行为（如打开某网页、点击某按钮、将商品加入购物车等）及行为附加数据（如某下单行为产生的订单金额等）。这里的行为可以分为两类：

对于会触发后台请求的行为，选择好路径关键词，定时抓取nginx日志，python分析入库。

对于不触发后台请求的行为，那么我们需要手动触发，一般是直接发送一个head请求（，百度统计为发送一个1*1px的图片（个人推荐图片，后续请求修改请求参数即可）。如果是web-app的话，可以存储到本地缓存，跟随app统计，定时发送。

这里关于统计js的建议：利用js的冒泡原理，在最顶层元素（body）监听事件，更具元素文字触发统计函数（修改img src url 中的param参数），具体流程如下

细节问题，可参考《网站统计中的数据收集原理及实现》与《聊一聊前端功能统计那些事儿》

请求发送到后台，nginx会记录请求（运维一般会关闭nginx的access_log），这里个人推荐把nginx入职格式设置为JSON格式(推荐查看《Nginx葵花宝典—草根站长Nginx运维百科全书》)。这样无论python还是nodejs都很好地处理数据入库工作。

需要注意的点：

1. 当点击发生本页跳转的时候，同时发送日志有一定几率无法发出。

当a标签发生点击的时候，我们往往会发送一条外链的点击日志，但是，如果这个a标签是本页跳转（而不是新开页面）的话，那么在日志发送之前，页面有可能就已经跳转了，这时，所有的请求都是发不出去的。目前应对这种状况，没有什么特别好的办法，

2. 发送的参数不要太多，太长

因为我们的请求毕竟算是GET请求，肯定有URL长度的限制。所以，发了大量的信息的话，怕会被截断。

入库后，需要做数据挖掘和可视化，这样才能产生价值（不然老板怎么来KPI）

这里推荐先看下《前端数据之美 -- 基础篇》

现在，归纳如下：

前端

通过http请求头hender分析

需前端操作的

分辨率：对页面设计提供参考，特别是响应式设计
白屏时间：影响白屏时间的多数是——DNS解析耗时服务端耗时网络传输耗时利用HTML5的performance接口performance.timing.navigationStart(用户访问我们网页最开始的跳转时间)在</body>前调用统计接口，发送 new Date().getTime()-performance.timing.navigationStart
首屏时间：DOM 样式都渲染时间（个人认为，因为图片等可以延时加载）用户可操作时间：到网页用户可以使用的时间。一般来讲 dom ready时间，便是我们的用户可操作时间了。推荐读下《再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载》
总下载时间：最后一个请求发送完毕。nginx统计当前URL下请求队列最后一个完成时间，或者或者window.onload 函数内触发统计函数
异常统计：JS 的异常捕获只有两种方式：window.onerror、try/catch 异常的提示信息：这是识别一个异常的最重要依据，如：’e.src’ 为空或不是对象 JS 文件名、异常所在行、发生异常的浏览器堆栈信息：必要的时候需要函数调用的堆栈信息，但是注意堆栈信息可能会比较大，需要截取

通过IP 与cookie

这里可以自行了解下REMOTE_ADDR、HTTP_VIA、HTTP_X_FORWARDED_FOR

需后端操作的

0 人点赞