首页 > OMD > SEO > > 正文

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

发布人:zhoulujun@live.cn    点击:

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

在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,把数据展示。

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


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

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

前端数据之美 -- 基础篇