通过自定义 Vue 指令实现前端曝光埋点

通过自定义 Vue 指令实现前端曝光埋点

摘要

互联网发展至今，数据的重要性已经不言而喻，尤其是在电商公司，数据的统计分析尤为重要，通过数据分析可以提升用户的购买体验，方便运营和产品调整销售策略等等。埋点就是网站分析的一种常用的数据采集方法。

埋点按照获取数据的方式一般可以分为以下 3 种：

页面埋点：统计用户进入或离开页面的各种维度信息，如页面浏览次数（PV）、浏览页面人数（UV）、页面停留时间、浏览器信息等。

点击埋点：统计用户在应用内的每一次点击事件，如新闻的浏览次数、文件下载的次数、推荐商品的命中次数等。

曝光埋点：统计具体区域是否被用户浏览到，如活动的引流入口的显示、投放广告的显示等。

政采云前端团队（ZooTeam）通过浑仪系统实现数据采集及数据可视化，分析量化的能力，想了解浑仪系统或者还不了解埋点的同学可以先阅读前端工程实践之数据埋点分析系统。

浑仪系统的数据采集是基于代码侵入式埋点方案实现的，提供了自动发送和手动调用埋点信息上报接口发送两种方式实现埋点数据上报。其中页面埋点和点击埋点是使用自动上报的方式实现，在 DOM 节点挂载特殊属性，通过埋点采集 JSSDK 监听挂载了相应属性对应的事件，在事件触发时进行埋点数据上报。曝光埋点由于涉及到有效曝光逻辑的判断，自动上报不能满足相应的需求，所以我们采用手动调用接口方式进行埋点数据上报。