> auto-view是一款自动上报埋点的工具
npm install @findqin/auto-view> auto-view是一款自动上报埋点的工具
`` javascript
// 渲染真实节点前插入(before render)
import autoView from '@findqin/auto-view'
autoView({
onElemView: (vid, vdata) => {
// 替换为曝光上报函数
console.log('View', vid, vdata)
},
onElemClick: (vid, vdata) => {
// 替换为点击上报函数
console.log('Click', vid, vdata)
}
})
`
html
``!整体结构
- MutationObserver 监控了页面节点的增删情况,并通知Record
- Record 根据节点信息进行筛选,记录下需要监控的节点
- Report 为监控的节点设置好曝光 (view) 和点击 (click) 的触发器
- view 触发器使用 IntersectionObserver 根据节点与视窗的交错情况来触发曝光
- click 触发器同 dom.addEventListener 的方式来触发上报