我会永远视监你...直到永远...

12 阅读4分钟

前言

每逢临近新年,想必各大软件就会开始推送年终总结吧,比如:这一整年你看了多少个视频,听了多少首歌曲,最晚什么时候睡觉等等类似于这种的消息。

有个问题困扰着我,这种到底是怎么实现的啊?难道真的各大软件都一直在视奸我吗?那我岂不是干了什么他们都知道吗?

带着这个问题,我们就来看看今天想要聊的东西了,埋点和监控.

什么是埋点和监控?

埋点主要是用来收集用户的行为数据,可以让开发者对用户有个更多的认识。在项目中,我们可以插入代码或脚本来捕获特定用户行为(如滞留最久的页面)以及一些关键业务数据(如频繁购入的产品)来分析用户的喜好,从而为他/她推送可能感兴趣的事务。

前端埋点通常包括以下几个步骤:

  1. 定义事件:定义需要收集的数据事件,如点击、滑动等
  2. 添加代码:在网页或应用程序中添加特定的代码,用于收集事件数据
  3. 发送数据:将收集到的数据发送给服务器进行分析
  4. 数据分析:对收集到的数据进行分析和挖掘,找出用户的行为规律和潜在可能需求

监控主要就关注系统的性能和稳定性,可以根据收集的数据来优化系统项目。在开发中,我们通过采集页面加载时间、资源请求、异常报告等数据来实现监控。

监控的主要作用就是及时发现并定位页面性能瓶颈或者代码异常报错,通过分析这些数据我们可以不断优化项目并且减小项目崩溃出错的概率。

常见的前端监控有以下几种:

  • 数据监视:主要关注用户在网站或应用中的行为和交互
    • 页面浏览或点击量
    • 访问某个站点或某条新闻的不同IP地址的人数
    • 用户在每个页面的停留事件
    • 用户通过什么入口来访问页面
    • 用户在相应的页面触发的行为
  • 性能监控:主要关注网站或应用的加载速度、响应时间和用户体验等方面
    • 不同用户在不同机型以及不同系统下的首屏加载时间
    • 白屏时间
    • HTTP等请求响应时间
    • 静态资源整体下载时间
    • 页面渲染时间
    • 页面交互动画完成时间
  • 异常监控:主要关注网站或应用在运行中是否出现异常或错误
    • JS的异常监控
    • 样式丢失的异常监控

前端埋点的几种常见方案

  • 代码埋点:需要开发人员在网页中手动添加跟踪代码,通常是在事件触发的地方添加一段JavaScript代码,用于记录用户的行为数据,并发送给后端服务器进行分析。这种方式的优点是灵活性高,可以精确捕获到各种复杂的用户行为,但缺点是开发成本较高,且需要一定的技术门槛。

  • 可视化埋点:通常通过一个可视化的界面来完成,用户可以在界面上选择要跟踪的事件和页面,然后系统会自动生成相应的跟踪代码,用户只需要将其添加到网页中即可。这种方式的优点是操作简单,无需具备技术背景也可以进行数据跟踪,但缺点是灵活性较低,可能无法满足一些复杂的跟踪需求。

  • 无痕埋点:称为全埋点或自动埋点,它通过在网页中自动采集所有用户行为数据,然后发送给后端服务器进行分析。这种方式的优点是无需手动添加跟踪代码,可以大幅度降低开发成本,但缺点是可能会采集到大量的冗余数据,且难以精确捕获到一些复杂的用户行为。

Ending

以上内容就是对前端埋点和监控的大致认识了,虽然我们作为开发者有技术可以设置埋点和监控,我们也应该尊重用户,尊重产品。千万不可践踏用户的私有信息等数据,做一个合格的程序员。