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 条评论
登录 后参与评论

相关文章

来自专栏WeTest质量开放平台团队的专栏

iOS Push详述,了解一下?

本文主要对iOS Push的在线push、本地push及离线(远程)push进行梳理,介绍了相关逻辑,测试时要注意的要点以及相关工具。

65560
来自专栏腾讯移动品质中心TMQ的专栏

流量都去哪儿了 —— 三板斧搞定Android网络流量测试

流量是什么? 为什么要进行流量测试? 流量测试方法有哪些? 怎么统计流量并进行结果分析? 带着这些疑问,小编带您探寻Android网络流量的测试方法。 1 ...

49660
来自专栏韩伟的专栏

经典的服务器结构概述(中)

. 经典的服务器结构概述(中) 今天将和大家详细探讨分服模型,本文结构如下: ? 1模型描述 分服模型是游戏服务器中最典型,也是历久最悠久的模型。其特征是游...

45070
来自专栏开源FPGA

Modelsim10.2c使用教程(一个完整工程的仿真)

 这学期在玩Altera的板子,不不, 现在应该叫intel PSG。在QuartusII13.0上老喜欢用modelsim_ae做仿真,小工程用起来也方便,...

89050
来自专栏java工会

你应该关注的几个Eclipse超酷插件

1.4K20
来自专栏iOSDevLog

应用程序内购买教程:入门

更新说明:Pietro Rea为Xcode 10,Swift 4.2和iOS 11/12更新了本教程。Ray Wenderlich写了原文。

31320
来自专栏技术换美食换不换

picu后端架构总结

首先我们项目的定位是一个图片,音频为主体的分享应用,于是服务器对于大资源的存储有了常规数据库,nginx静态资源存储和对象存储服务的选型问题.常规数据库(如my...

13920
来自专栏小樱的经验随笔

Python爬虫笔记(一):爬虫基本入门

最近在做一个项目,这个项目需要使用网络爬虫从特定网站上爬取数据,于是乎,我打算写一个爬虫系列的文章,与大家分享如何编写一个爬虫。这是这个项目的第一篇文章,这次就...

39960
来自专栏云计算认知升级

小程序·云开发 项目开发经验分享

近期,小程序开放了新的能力——「小程序·云开发」,帮助开发者快速构建微信小程序的后端服务。我作为一名微信小程序的开发者,也在第一时间尝试了小程序云开发,并将我自...

4K140
来自专栏美团技术团队

美团点评境外度假团队前端项目开发实践总结

前言 随着前端项目数量和规模越来越大,参与的人员也越来越多,如何在前端项目开发过程中保证优质的开发者体验和项目的可维护性,同时确保极致的用户体验将会是一个非常大...

47080

扫码关注云+社区

领取腾讯云代金券