信息化和网站建设管理工作情况,织梦二次开发手机网站,wordpress 百万,好的做网站的前端监控埋点概览
前端监控主要分为三类#xff1a;数据监控、性能监控、异常监控
数据监控
记录上报产品在用户端的使用情况#xff0c;以数据为导向#xff0c;帮助团队做决策#xff0c;数据监控有时也被称为行为监控#xff0c;常见的包括#xff1a;
PV/UV…前端监控埋点概览
前端监控主要分为三类数据监控、性能监控、异常监控
数据监控
记录上报产品在用户端的使用情况以数据为导向帮助团队做决策数据监控有时也被称为行为监控常见的包括
PV/UV页面浏览量或点击量。UV:指访问某个站点或点击某条新闻的不同IP地址的人数页面停留时间访问入口previous page在页面中的行为
性能监控
记录上报产品在用户端各类宿主的性能常见的性能监控包括
首屏加载时间白屏时间请求响应时间页面渲染时间交互动画完成时间
异常监控报警
记录上报代码在执行过程中的异常及时发现并修复线上运行代码的缺陷常见的异常监控包括
JavaScript的异常监控样式异常的监控
埋点方案总结
目前常见的前端埋点方法分为三种代码埋点、可视化埋点和无痕埋点 代码埋点 代码埋点就是以嵌入代码的形式进行埋点比如需要监控用户的点击事件会选择在用户点击时插入一段代码保存这个监听行为或者直接将监听行为以某一种数据格式直接传递给server端。此外比如需要统计产品的PV和UV的时候需要在网页的初始化时发送用户的访问信息等。
优点缺点可以在任意时刻精确的发送或保存所需要的数据信息工作量较大每一个组件的埋点都需要添加相应的代码
可视化埋点 通过可视化交互的手段代替代码埋点。将业务代码和埋点代码分离提供一个可视化交互的页面输入为业务代码通过这个可视化系统可以在业务代码中自定义的增加埋点事件等等最后输出的代码耦合了业务代码和埋点代码。
优点缺点方便对于重复性埋点可交互系统提升埋点人效可视化埋点可以埋点的控件有限不能手动定制
可视化埋点听起来比较高大上实际上跟代码埋点还是区别不大。也就是用一个系统来实现手动插入代码埋点的过程。
无埋点 无埋点并不是说不需要埋点而是全部埋点前端的任意一个事件都被绑定一个标识所有的事件都别记录下来。通过定期上传记录文件配合文件解析解析出来我们想要的数据并生成可视化报告供专业人员分析因此实现“无埋点”统计。从技术层面实现无埋点也很简单比如从页面的js代码中找出dom上被绑定的事件然后进行全埋点。
优点缺点采集的是全量数据产品迭代过程中不需要关注埋点逻辑不会出现漏埋、误埋等现象采集全量数据给数据传输和服务器增加压力无法灵活的定制各个事件所需要上传的数据
附
本文只介绍前端埋点相关概念一个完整的监控流程除了埋点和上报还应涵盖数据处理和数据分析相关知识涉及到监控平台的架构设计故本文不做叙述
