前端曝光数据埋点——Intersection Observer+vue指令

一、背景介绍

在电商产品中（可以打开你的淘宝、天猫、京东App），通过对商品的曝光进行数据埋点，就能反推出用户的行为和交互习惯，从而优化推荐和搜索算法以及交互，最终的目的当然是为了增加用户购买力。 

曝光：商品出现在用户眼前，也就是浏览器视窗，可谓之曝光

最直白的两种方法 

• 1、监听滚动事件，通过[Element.getBoundingClientRect() - Web API 接口参考 | MDN]计算某个商品与视窗的位置 
• 2、页面跑一个定时器，定时计算某个商品与视窗的位置  

这两种办法都能用，但是getBoundingClientRect这个API是会引起页面回流的，使用不当容易导致性能问题。 

基于此，浏览器特意为我们打造了一个[Intersection Observer API - Web API | MDN]，把性能相关的细节都处理掉，让开发者只关心业务逻辑即可

二、Intersection Observer API 

整个曝光打点方案基于[Intersection Observer API - Web API 接口参考 | MDN] 

这个API还比较新，至于兼容性问题可用[IntersectionObserver/polyfill· w3c]解决，本质上也是用getBoundingClientRect计算位置，具体怎么实现可以去看看它的源码

三、数据埋点思路

1. new IntersectionObserver() 实例化一个全局_observer，每个商品DOM自行把自己加入_observer的观察列表 （这里会用Vue的指令来实现） 
2. 当某个商品DOM进入视窗，收集该商品的信息，存进一个全局数组dotArr中，然后取消对该商品DOM的观察 
3. 从dotArr中取数据进行打点比较简单 

•  跑定时器，每隔N秒检查一次，如果dotArr有数据，就直接上报； 
• 如果N秒内，dotArr的数据量大于某个量maxNum，不等定时器，直接全部上报

打点不难，难的是不漏以及不重复上报数据，用户离开页面前的边界数据处理

• • 浏览器环境：dotArr同时存一份在localStorage中，同步更新数据（增加或者上报完后清空），如果用户真的在N秒的间隔内