vue-intersection-plugin-revision
a plugin for vue exposure, used by intersection observer API
Last updated 5 months ago by webkong .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install vue-intersection-plugin-revision 
SYNC missed versions from official npm registry.

vue-intersection-plugin-revision

Fork from https://github.com/webaifei/vue-intersection-plugin

修改了部分内容。

检测DOM节点 是否曝光 用于广告、产品曝光等统计

Demo

DEMO

install

npm 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

Current Tags

  • 1.2.3                                ...           latest (5 months ago)

2 Versions

  • 1.2.3                                ...           5 months ago
  • 1.2.2                                ...           5 months ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 2
Dependencies (3)
Dev Dependencies (5)
Dependents (0)
None

Copyright 2014 - 2017 © taobao.org |