前端数据埋点(一)

我是真菜
120 阅读3分钟

基本概念

服务监控与数据埋点是两个概念但是同时又是密不可分的两部分。在现在软件及服务的设计下，服务监控也可以称为软件监控。说到底服务监控就是去监控用户在使用软件的一些行为，用于更好的分析和优化软件系统。可以说服务监控属于业务层面而数据埋点是服务监控的技术实现。服务监控和数据埋点严格来说是一个相当庞大的概念这里我们只聊一部分前端数据埋点偏向于概念的一些知识。

  • 前端数据埋点是指在前端页面埋设各种数据收集点，用于收集用户行为数据、性能数据、错误信息等。
  • 服务监控是指对前端应用程序的运行状态、性能指标等进行监控和管理。 先奉上一张总结的思维导图，可以作为设计参考 前端数据埋点.png

前端数据埋点

一些性能指标的名词

  1. PV(Page View) 页面浏览量，一般来说这通常是衡量一个网站的主要标准。还有一些较高标准的解释是，一个访客在24小时内（一般是0点-24点）内到底看了这个网站的几个页面。
  2. UV(unique visitor) 指某个站点访问的不同ip数。
  3. FP(First Paint) 表示渲染的第一个像素点，通常会在HTML解析完成或者解析一部分的时候触发
  4. FCP(First Contentful Paint) 表示渲染出第一个内容，可以是文本、图片、或者canvas
  5. LCP(Largest contentful Paint) 表示最大内容渲染时间
  6. DCL(DOMContentLoaded),DOM解析完毕，不包含css、图像、iframe子框架的加载完成

监控

对于前端开发来说，数据埋点的核心就是两个方面监控和上报，而监控又可以细分为以下几方面

  • 错误监控
  • 性能监控
  • 用户行为监控

以上针对不同的监控层面又可以做如下细分

错误监控

  1. JS Error,这包括js代码中所有的js错误
  2. Promise Error，这包括js代码中所有的发生的未捕获的异步错误
  3. Resource Error,这包括js代码中的资源错误

性能监控

  1. FP、FCP、LCP、onload、DOMContentLoaded
  2. 静态资源加载
  3. Ajax请求

行为监控

  1. PV、UV
  2. 页面停留时间
  3. 用户行为，包括用户点击事件等

数据上报

了解完一些监控方面的概念，下面就要了解一下数据上报的一些概念。数据上报大致可以分为两部分，上报方式和上报时机，具体来说就是，我们要在适合的时间点采用适合的方法通过网络请求将我们收集到的用户数据上报给服务器，供后台对上报数据进行分析然后对于系统做进一步的优化。

上报方式

  • xhr
  • sendBeacon

上报时机

  • 先缓存达到一定阈值后将所有数据一块上报
  • requestIdleCallback,利用浏览器的空闲时间进行上报
  • setTimeout 异步队列
  • webWorker线程
  • beforeUnLoad页面卸载前统一上报

在实际业务中选择合适的上报方式和适当的上报时机是非常重要的，要考虑的问题也是很多，例如数据上报要做到不能阻塞主业务的执行、网站的用户量，如果存在大量用户而上报方式恰好是单数据上报对服务器也会造成很大压力等等。

参考资料

Web前端性能指标

JS Performance

avatar
文章
阅读
粉丝