源码可以到GitHub上下载!

1、onclick=”javascript:window.location.href=’aa.htm’ “

前端监控和前端埋点方案设计

2018/08/29 · JavaScript
· 埋点

原文出处: yuxiaoliang   

在线上项目中,需要统计产品中用户行为和使用情况,从而可以从用户和产品的角度去了解用户群体,从而升级和迭代产品,使其更加贴近用户。用户行为数据可以通过前端数据监控的方式获得,除此之外,前端还需要实现性能监控和异常监控。性能监控包括首屏加载时间、白屏时间、http请求时间和http响应时间。异常监控包括前端脚本执行报错等。

实现前端监控有三个步骤:前端埋点和上报、数据处理和数据分析。本文针对整个前端监控,设计适用的方案。本文的主要内容分为:

  • 为什么需要前端监控
  • 常用前端埋点方案总结
  • 前端埋点方案选型和前端上报方案设计
  • 前端监控结果可视化展示系统的设计

原文的地址,在我的博客中:https://github.com/forthealll…

如有帮助,您的star是对我最好的鼓励~

localStorage:

2、onclick=”location=’URL’ “

一、为什么需要前端监控

前端监控的目的是:

获取用户行为以及跟踪产品在用户端的使用情况,并以监控数据为基础,指明产品优化的方向

前端监控可以分为三类:数据监控、性能监控和异常监控。下面我们来一一的了解。

  存储上限限制:不同的浏览器存储的上限也不一样,但大多数浏览器把上限限制在5MB以下。

3、onclick=”window.location.href=’?id= ‘ “

(1)数据监控

数据监控,顾名思义就是监听用户的行为。常见的数据监控包括:

  • PV/UV:PV(page
    view),即页面浏览量或点击量。UV:指访问某个站点或点击某条新闻的不同IP地址的人数
  • 用户在每一个页面的停留时间
  • 用户通过什么入口来访问该网页
  • 用户在相应的页面中触发的行为

统计这些数据是有意义的,比如我们知道了用户来源的渠道,可以促进产品的推广,知道用户在每一个页面停留的时间,可以针对停留较长的页面,增加广告推送等等。

  localStorage与sessionStorage的区别:就是localStorage属于永久性存储,而sessionStorage属于当会话结束的时候,sessionStorage中的键值对会被清空

(2)性能监控

性能监控指的是监听前端的性能,主要包括监听网页或者说产品在用户端的体验。常见的性能监控数据包括:

  • 不同用户,不同机型和不同系统下的首屏加载时间
  • 白屏时间
  • http等请求的响应时间
  • 静态资源整体下载时间
  • 页面渲染时间
  • 页面交互动画完成时间

这些性能监控的结果,可以展示前端性能的好坏,根据性能监测的结果可以进一步的去优化前端性能,比如兼容低版本浏览器的动画效果,加快首屏加载等等。

  关闭浏览器后,再打开仍有数据

(3)异常监控

此外,产品的前端代码在执行过程中也会发生异常,因此需要引入异常监控。及时的上报异常情况,可以避免线上故障的发上。虽然大部分异常可以通过try
catch的方式捕获,但是比如内存泄漏以及其他偶现的异常难以捕获。常见的需要监控的异常包括:

  • Javascript的异常监控
  • 样式丢失的异常监控

  清除缓存加载后仍有数据

二、常用前端埋点方案总结

在上一节中介绍了前端监控的作用,那么如何实现前端监控呢,实现前端监控的步骤为:前端埋点和上报、数据处理和数据分析。首要的步骤就是前端埋点和上报,也就是数据的收集阶段。数据收集的丰富性和准确性会影响对产品线上效果的判别结果。

目前常见的前端埋点方法分为三种:代码埋点、可视化埋点和无痕埋点。下面一一介绍每一种埋点的方法。

发表评论

电子邮件地址不会被公开。 必填项已用*标注