商品组曝光滑动曝光方法适用于曝光埋点

success-ladder

已于 2023-07-06 15:41:38 修改

阅读量156

点赞数

文章标签： javascript

于 2023-07-06 15:40:56 首次发布

本文链接：https://blog.youkuaiyun.com/successLadder/article/details/131578113

版权

该代码片段展示了如何使用`intersection-observer`插件来处理低版本浏览器的兼容性，以实现曝光埋点功能。当元素进入视口时，执行回调函数进行点击埋点。如果遇到不兼容情况，会捕获错误并打印日志。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为防止低版本不兼容，安装插件'intersection-observer'

// 引入兼容插件
import 'intersection-observer'

/**
 * 曝光埋点配置
 * @param {array<any>} _list - 数组列表曝光
 * @param {string} _pageEventId - 埋点EventId
 * @param {string} page_id - 埋点pageId
 * @param {string} _key - 埋点入参列表遍历key
 */
export const exposureMPing = (_list = [], _pageEventId, page_id, _key) => {
  try {
    // 回调
    const handleCallback = (entries) => {
      entries.forEach((entry) => {
      if (entry.isIntersecting) {
      	  // 埋点需要的参数 - 根据项目埋点方法进行点击埋点
          let params = {
            page_id
          }
          if (_key) {
            params = {...params, json_param: {[_key]: entry.target[_key]}}
          }
          // 根据自身的埋点方法进行埋点 - 这里的clickMPing是项目封装的点击埋点
          clickMPing(_pageEventId, params)
          obserRefs.unobserve(entry.target)
        }
      })
    }
    // 配置
    const opstion = {
      root: null,
      rootMargin: '0px',
      threshold: [0.25]
    }
    const obserRefs = new IntersectionObserver(handleCallback, opstion)
    _list.length && _list.forEach(item => obserRefs.observe(item))
  } catch (err) {
    console.log('曝光埋点手机版本不兼容')
  }
}