Intersection

捕获目标元素的曝光事件,主要原理是创建 IntersectionObserver 实例

WARNING

监听阈值(threshold)解释：阀值默认为0.5，当为0.5时代表滚动超过图片达到一半时即为曝光结束同理当为0.5时，代表滚动视图能看到图片一半时即为曝光开始

触发事件时给后台的对象

属性名称	值	说明
eventType	intersection	事件类型
target		被监听的元素(无效参数)
threshold		监听阈值
params		附加参数
observeTime		开始监听时间
showTime		元素开始被曝光的时间
showEndTime		元素结束被曝光的时间
sendTime		发送时间
triggerPageUrl		页面地址

// 真实场景产生的事件对象
{
  eventType: 'intersection',
  target: { _prevClass: 'mb' },
  threshold: 0.5,
  observeTime: 1689734412090,
  params: { name: 1111, targetName: 'target' },
  showTime: 1689734412098,
  showEndTime: 1689734414097,
  sendTime: 1689734415104
  triggerPageUrl: 'http://localhost:6656/#/intersection',
}

使用说明

sdk初始化时不提供此功能，只能在页面针对某个元素进行监听

TIP

vue2完整示例代码

vue3完整示例代码

import {
  intersectionObserver,
  intersectionUnobserve,
  intersectionDisconnect
} from '@web-tracing/vue2'

const target = document.querySelector(`#xxx`)

// 对元素开始监听
intersectionObserver({
  target,
  threshold: 0.5, // 曝光的临界点 (0.5表示移入窗口一半算做开始曝光、移出窗口一半算结束曝光)
  params: { name: 1111, targetName: str } // 附带的额外参数
})

// 对元素结束监听
intersectionUnobserve(target)

// 结束所有的元素监听
intersectionDisconnect()

Intersection ​

使用说明 ​

Intersection

使用说明