web统计原理及实现方法汇总总结—网站统计中的数据收集
Author：[email protected] Date：
在php、jsp、asp后端总揽一切的时代，网站统计基本是后台的事情——其实web开发，也没有前端这个职位，网站设计（现在的UI）不仅要前途还要用dreamwave等工具生成html给后台套模板。web2.0后，除了数据库带宽瓶颈，基本就在前端了。
入职顺丰后，发现前端统计居然还得自己搞id，ajax发送POST请求去请求统计系统入库（即使ajax也用head请求好点吧），惊呆了（虽然作为一个前端，出过方案，做过nginx json 日志统计todo案列，但是，没有人配合，然并卵……）
今天来侃下这个话题：
在不使用谷歌分析、百度统计、站长统计、腾讯分析等工具前提下，如何规划自己的统计系统？
数据收集原理分析
网站统计分析工具需要收集到用户浏览目标网站的行为（如打开某网页、点击某按钮、将商品加入购物车等）及行为附加数据（如某下单行为产生的订单金额等）。这里的行为可以分为两类：
触发后台请求（提交订单、结算）——继续拆分：1、直接触发ajax请求，2、资源请求（如图片等）
不触发后台请求（页面内跳转、单页面跳转
对于会触发后台请求的行为，选择好路径关键词，定时抓取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标签是本页跳转（而不是新开页面）的话，那么在日志发送之前，页面有可能就已经跳转了，这时，所有的请求都是发不出去的。目前应对这种状况，没有什么特别好的办法，
可以尝试使用先发日志，在日志的回调用进行跳转，这样就有可能造成跳转慢。
使用新式API navigator.sendBeacon()，可以在本页面跳转之后，坚强的发出一条请求。但是兼容性不太好。
2. 发送的参数不要太多，太长
因为我们的请求毕竟算是GET请求，肯定有URL长度的限制。所以，发了大量的信息的话，怕会被截断。
数据分析及可视化
入库后，需要做数据挖掘和可视化，这样才能产生价值（不然老板怎么来KPI）
网站都有哪些指标？怎么统计？
这里推荐先看下《前端数据之美 -- 基础篇》
现在，归纳如下：
前端
通过http请求头hender分析
页面来源：页面的 refer，可以定位页面的入口
操作系统：了解用户的 OS 状况，帮助分析用户群体的特征，特别是移动端，iOS 和 Android 的分布就更有意义 user-agent
浏览器：可以统计到各种浏览器的占比，对于是否继续兼容 IE6、新技术（HTML5、CSS3 等）的运用等调研提供参考价值
访问时段：掌握用户访问时间的分布，引导消峰填谷、节省带宽
需前端操作的
分辨率：对页面设计提供参考，特别是响应式设计
白屏时间：影响白屏时间的多数是——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
PV/UV：最基础的 PV（页面访问数量）、UV（独立访问用户数量）
地域分布：访问用户在地理位置上的分布，可以针对不同地域做运营、活动等
停留时长：判断页面内容是否具有吸引力，对于需要长时间阅读的页面比较有意义
到达深度：和停留时长类似，例如百度百科，用户浏览时的页面到达深度直接反映词条的质量
需后端操作的
登录率：百度也开始看重登陆，登陆用户具有更高的分析价值，引导用户登陆是非常重要的
页面总点击量
人均点击量：对于导航类的网页，这项指标是非常重要的
流出 url：同样，导航类的网页，直接了解网页导流的去向
点击时间：用户的所有点击行为，在时间上的分布，反映了用户点击操作的习惯
首次点击时间：同上，但是只统计用户的第一次点击，如果该时间偏大，是否就表明页面很卡导致用户长时间不能点击呢？
点击热力图：根据用户点击的位置，我们可以画出整个页面的点击热力图，可以很直观的了解到页面的热点区域
这里还要提的就是，异常统计
主要通过
统计数据可视化：
这里推荐百度的echarts（个人最喜欢的百度系产品），相比d3等其它框架，文档更详细。
具体查看相关api，把数据展示。
数据可视化是门大学问，那天有空写个专栏。
转载本站文章《web统计原理及实现方法汇总总结—网站统计中的数据收集》,
请注明出处：https://www.zhoulujun.cn/html/Operation/seo/2016_0718_7867.html