• home > OMD > SEO >

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

    Author:zhoulujun@live.cn Date:

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

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


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

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

    前端数据之美 -- 基础篇



    转载本站文章《web统计原理及实现方法汇总总结—网站统计中的数据收集》,
    请注明出处:https://www.zhoulujun.cn/html/Operation/seo/2016_0718_7867.html