使用框架

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();
    }
  }