专栏首页前端架构web统计原理及实现方法汇总总结—网站统计中的数据收集

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:同样,导航类的网页,直接了解网页导流的去向
  • 点击时间:用户的所有点击行为,在时间上的分布,反映了用户点击操作的习惯
  • 首次点击时间:同上,但是只统计用户的第一次点击,如果该时间偏大,是否就表明页面很卡导致用户长时间不能点击呢?
  • 点击热力图:根据用户点击的位置,我们可以画出整个页面的点击热力图,可以很直观的了解到页面的热点区域

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 在深谈TCP/IP三步握手&四步挥手原理及衍生问题—长文解剖IP

    如果对网络工程基础不牢,建议通读《细说OSI七层协议模型及OSI参考模型中的数据封装过程?》

    周陆军
  • 旧调重弹Hibernate与Ibatis区别——深入架构设计

    对于一个粗学者而言一言概况就是:ibatis非常简单易学,hibernate相对较复杂,门槛较高。 

    周陆军
  • Cesium笔记(3):基本控件简介—ImageryProvider地图瓦片地图配

    cesiumjs中可定制多种图层,可以使用互联网上很多地图提供商的图层数据,也可以使用自己的地图数据。Cesium支持多种标准化格式的GIS瓦片服务,可以把栅格...

    周陆军
  • 微信小程序之提高应用速度小技巧

    小程序科普类的文章已经很多了,今天这里讲的是针对小程序的优化方法,可以有效提高小程序的响应速度和用户体验。当然,开发体验也提高不少。

    WeTest质量开放平台团队
  • 微信小程序|配置文本框样式、排版及点击页面跳转

    我们在使用一个小程序时,总是会看到页面给出你不同的选择文本框,而你需要单击文本框跳转到你需要了解的内容页面中去。因此,如何美化这些文本框以及如何配置页面跳转是我...

    算法与编程之美
  • Kali Linux Web渗透测试手册(第二版) - 3.6 - 使用ZAP的爬虫功能

    thr0cyte,Gr33k,花花,MrTools,R1ght0us,7089bAt

    用户1631416
  • 小程序、公众号文章、H5跳转路径简述

    普通 H5 页面无法跳转到小程序,web-view 中的 H5 页面可以回到“外层”小程序

    薛定喵君
  • AspNet.Core之使用CancellationToken来提高应用负载

    已经有很多文章记录了Web程序中采用异步编程的优势和.Net异步编程的用法, 异步编程虽然不能解决查询数据库的瓶颈, 但是利用线程切换,能最大限度的弹性利用工作...

    心莱科技雪雁
  • 需要懂的感知设计

    用户2025931
  • 对java前后端分离的理解

    在工作期间,无非就是ui设计页面,前端开发html,之后将做好的页面交给我,我负责后台逻辑一件html的页面渲染。

    陈灬大灬海

扫码关注云+社区

领取腾讯云代金券