现在的位置: 首页 > web前端 > 正文

web前端教程埋点

2020年07月07日 web前端 ⁄ 共 1152字 ⁄ 字号 评论关闭

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


  前端埋点作用


  收集监控数据我们是通过前端埋点来实现的,目前常见的前端埋点方法有三种:手动埋点、可视化埋点和无埋点。


  前端埋点方法


  手动埋点


  手动埋点,也叫代码埋点,即纯手动写代码,调用埋点SDK的函数,在需要埋点的业务逻辑功能位置调用接口,上报埋点数据,像友盟、百度统计等第三方数据统计服务商大都采用这种方案。


  手动埋点让使用者可以方便地设置自定义属性、自定义事件;所以当你需要深入下钻,并精细化自定义分析时,比较适合使用手动埋点。


  手动埋点的缺陷就是,项目工程量大,需要埋点的位置太多,而且需要产品开发运营之间相互反复沟通,容易出现手动差错,如果错误,重新埋点的成本也很高。这会导致整个数据收集周期变的很长,收集成本变的很高,而且效率很低。因为手动埋点需要开发人员完成,所以每次有埋点更新,或者漏埋点,都需要重新走上线发布流程,更新成本也高,对线上系统稳定性也有一定危害。


  可视化埋点


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


  可视化埋点听起来比较高大上,实际上跟代码埋点还是区别不大。也就是用一个系统来实现手动插入代码埋点的过程。比如国外比较早做可视化的是Mixpanel,国内较早支持可视化埋点的有TalkingData、诸葛IO,2017年腾讯的MTA也宣布支持可视化埋点;相比于手动埋点更新困难,埋点成本高的问题,可视化埋点优化了移动运营中数据采集的流程,能够支持产品运营随时调整埋点,无需再走发版流程,直接把配置结果推入到前端,数据采集流程更简化,也更方便产品的迭代。


  可视化埋点中多数基于Xpath的方案,XPath是一门在XML文档中查找信息的语言,XPath可用来在XML文档中对元素和属性进行遍历。


  无埋点


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


  采用无埋点技术的有主流的GrowingIO、神策。


  总之,在不同场景下我们需要选择不同的埋点方案。例如对于简单的用户行为类事件,可以使用全埋点解决;而对于需要携带大量运行时才可获知的业务字段的埋点需求,就需要声明式埋点来解决。


  

抱歉!评论已关闭.