模块曝光vue 插件
Fork from https://github.com/webaifei/vue-intersection-plugin
修改了部分内容。
Demo检测DOM节点 是否曝光 用于广告、产品曝光等统计
DEMO
installnpm i vue-intersection-plugin-revision -S //or yarn add vue-intersection-plugin-revision use
import vueIntersectionPlugin from "vue-intersection-plugin-revision"; Vue.use(vueIntersectionPlugin, { handler: (logData)=> { // your logic code }, duration: 3000, //在页面可视区域停留时长 // threshold: [] }); // add directive <YourComponent> <div v-intersection :data-log="JSON.stringify({ //your log data })" > </div> </YourComponent> Documentation 配置参数
Vue.use(vueIntersectionPlugin, options)
| prop | value | example | default | TIPS |
|---|---|---|---|---|
| root | DOM element | document.getElementById('#test') | document | 其他的容器没有测试 |
| handler | 满足曝光条件出发的回调 | null | ||
| threshold | dom元素在可视区域漏出多少 算曝光 [Array, Number] | 0.5 or [0.5] | 0.5 | 如果想要实现一进入可视区域就开始算曝光，你设置threshold:0 ,程序内部会将它充值成0.01 |
| duration | 在可视区域停留多长时间算曝光 [Number 单位毫秒] | 1000 | 1000 |
TODO
埋点数据将埋点发送的数据绑定到要曝光统计的DOM元素或者是vue组件 data-log属性上
<div v-intersection :data-log="JSON.stringify({ module: 'test-a', productId: '0011' })" > <your-vue-component v-intersection :data-log="JSON.stringify({ module: 'test-b', productId: '00111' })" /> </div> license
MIT
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
