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

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

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

今天来侃下这个话题：

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

数据收集原理分析

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

1. 触发后台请求（提交订单、结算）——继续拆分：1、直接触发ajax请求，2、资源请求（如图片等）

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标签是本页跳转（而不是新开页面）的话，那么在日志发送之前，页面有可能就已经跳转了，这时，所有的请求都是发不出去的。目前应对这种状况，没有什么特别好的办法，

1. 可以尝试使用先发日志，在日志的回调用进行跳转，这样就有可能造成跳转慢。

2. 使用新式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，把数据展示。

数据可视化是门大学问，那天有空写个专栏。

网站统计中的数据收集原理及实现

聊一聊前端功能统计那些事儿

前端数据之美 -- 基础篇