网页监控,埋点

https://juejin.im/post/6891080391642316808 原文

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

前端监控可以分为三类：数据监控、性能监控和异常监控。

数据监控

数据监控，就是监听用户的行为

性能监控

性能监控指的是监听前端的性能，主要包括监听网页或者说产品在用户端的体验

异常监控

由于产品的前端代码在执行过程中也会发生异常，因此需要引入异常监控

前端埋点

我们说完了前端监控的三个分类，现在就来聊聊怎么实现前端监控。实现前端监控，第一步肯定是将我们要监控的事项（数据）给收集起来，再提交给后台，最后进行数据分析。数据收集的丰富性和准确性会直接影响到我们做前端监控的质量，因为我们会以此为基础，为产品的未来发展指引方向。

前端埋点方法有三种：手动埋点、可视化埋点和无埋点

手动埋点

手动埋点，也叫代码埋点，即纯手动写代码，调用埋点 SDK 的函数，在需要埋点的业务逻辑功能位置调用接口，上报埋点数据

可视化埋点

通过可视化交互的手段，代替上述的代码埋点。将业务代码和埋点代码分离，提供一个可视化交互的页面，输入为业务代码，通过这个可视化系统，可以在业务代码中自定义的增加埋点事件等等，最后输出的代码耦合了业务代码和埋点代码。缺点就是可以埋点的控件有限，不能手动定制。

无埋点

无埋点则是前端自动采集全部事件，上报埋点数据，由后端来过滤和计算出有用的数据。优点是前端只要一次加载埋点脚本，缺点是流量和采集的数据过于庞大，服务器性能压力山大。

CSS 埋点

没错，CSS 也能做埋点，这个算是一个小技巧，当然，CSS 埋点只能处理一些简单的事件埋点，收集复杂的数据还是得用 JS，但 CSS 埋点有个优点就是，无法被禁用。

<style>
.link:active::after{
    color: red;
    content: url("http://192.168.1.110:3000/someapi?params=someInfo");
}
</style>
<a class="link btn">点击访问</a>