使用框架
Taro3
需求描述
页面浏览的时候需要对浏览到的商品进行埋点，且只有第一次浏览的时候埋点，不进行重复埋点
第一次尝试
监听页面或滚动区域的滚动事件，用getBoundingClientRect（）获取元素在视图的位置进行判定是否埋点，并在埋点后将元素上面的埋点标识data-flag置为Y，data-flag为Y时说明已经埋过点，不进行重复埋点。由于项目使用了框架Vue，里面的v-if为false的时候页面不会进行渲染，在初始化时获取不到元素进行绑定事件，且没有滚动的时候进行显示切换也不会触发监听，未解决问题。
最终尝试
使用IntersectionObserver来进行显示监听，该API可以监听元素的显示和隐藏，当元素显示和隐藏切换时会调用监听方法，但微信小程序需要提供元素的选择器进行绑定监听。
- H5
H5在初始化的时候传入监听方法，并使用observe传入元素的引用来进行绑定监听，埋点后用unobserve传入元素的引用进行解绑。 - 微信小程序
微信小程序使用createIntersectionObserver初始化，并使用relativeToViewport指定页面显示区域作为参照区域之一，最后使用observe传入元素的选择器和监听方法进行绑定，埋点后用disconnect解绑全部监听。我这里使用了元素的sid作为id传入id选择器来避免重复，我理解的sid是微信小程序自动分配的指代文档区域的唯一id。
注意：微信小程序如果没有在初始化进行设置，则只会监听第一个满足选择器的元素。
实现代码
- H5
// 初始化显示监听
let observer = new IntersectionObserver(scrollProduct,{});
// 给商品盒子绑定监听
observer.observe(target);
// 监听方法
function scrollProduct(changes){
let change = changes[0];
if(change.intersectionRatio>0) {
const dom = change.target;
// 埋点
// 去除监听
observer.unobserve(dom);
}
}
- 微信小程序
// 初始化显示监听
let observer = Taro.createIntersectionObserver();
// 给商品盒子绑定监听
observer.relativeToViewport().observe('#'+id,scrollProduct);
// 监听方法
function scrollProduct(e){
if(e.intersectionRatio>0) {
// 埋点
// 去除监听
observer.disconnect();
}
}
