跳到主内容

前端监控和埋点相关技术介绍

· 5分钟阅读

每一款好的产品都必须要做的事情就是持续优化和输出用户想要的功能,提供给用户好的印象和使用体验,这样用户的留存率才能越高。在技术层面上看,需要采集用户的行为,性能相关数据和应用运行时的错误信息,才能对产品持续优化,形成更好的产品。

数据收集

作为一个前端开发工程师,我们需要了解如何采集和监控应用的数据。常见的采集的数据类型有三种,用户数据,错误数据,性能数据

用户数据

用户数据通常指的是以下几种信息

  • PV(页面的访问量)/UV(独一的访问者,通常是IP)
  • 设备信息,比如浏览器的种类和版本信息,手机还是PC
  • 来源信息,比如来源于搜索引擎还是直接访问
  • 用户的操作行为,比如点了那个按钮,查看了哪些页面

针对数据监控可以查看这篇文章 前端搞监控|如何实现用户行为的动态采集与分析

错误数据

错误数据通常指的是以下几种信息

  • 文件加载错误,比如网络导致的JS,CSS加载不出来
  • 运行时错误,比如JS导致页面奔溃或者无法交互,CSS导致页面渲染有误等等
  • 接口错误

针对前端错误收集和定位可以查看这篇文章 前端错误监控

性能数据

性能数据通常指的是以下几种信息

  • 白屏时间
  • 首屏时间
  • 接口请求时间
  • 页面完全加载完成时间
  • 渲染时间

针对前端性能监控可以查看这篇文章 蚂蚁金服如何把前端性能监控做到极致?

埋点

上面已经列出了前端监控需要采集的数据,那么还需要一个手段来实现数据采集的过程,就是前端埋点。目前常用的手段有,可视化埋点,代码埋点,无埋点

可视化埋点

提供一个可视化系统,提供业务和开发人员在系统里面进行手动埋点,比较简单,设置好了直接提交,不需要前端重新发布新版本。缺点就是只能针对界面可见区域(比如按钮,图片等)进行埋点,无法再细粒度进行不可视区域进行埋点。

手动代码埋点

开发人员工作通过代码在指定位置进行插入,例如接口请求函数进行请求拦截和接口响应拦截计算接口的耗时,也可以实现可视化埋点的所有功能。缺点就是人员开发成本较大,一般配合可视化埋点一起使用

全埋点

现在市面上免费的全埋点解决方案有百度统计,谷歌analytics,TalkingData等,一般只需要引入一个jssdk即可实现,可以实现对整站进行数据收集,比如PV,UV,设备信息,来源信息,地域信息等数据,一般不针对某一模块,某一按钮,比较粗粒度。缺点就是无法针对某一按钮或者区域进行埋点,收集的数据量很大, 需要对数据进行整理,过滤掉无用数据

总结

本文介绍了前端监控的三种数据类型和常见埋点方案,在实际开发中,可以根据业务需求定制化采集的数据类型,根据数据进行分析,持续优化产品