v-track
v-track通过 Vue 自定义指令的方式将埋点代码与业务代码完全解耦~
安装
YARN
$ yarn add v-track
NPM
$ npm install v-track --save
CDN
目前可以通过unpkg.com/v-track获取到最新版本的资源,在页面上使用 script 标签直接引入文件即可开始使用
或者
建议使用 CDN 引入 v-track 的用户在链接地址上锁定版本,以免将来 v-track 升级时受到非兼容性更新的影响。锁定版本的方法请查看 unpkg.com or jsdelivr.com。
用法
Vue
/* track-events.js */ /** * @name UVPV 固定名称不支持修改 * @desc UV、PV埋点 * @param */ { ... } /** * @name TONP 固定名称不支持修改 * @desc 页面停留时间埋点(Time on Page) * @param * @param * @param */ { ... } /** * @name 18015 埋点唯一标识ID(自定义) * @param * @param */ ... ...
<!-- 页面行为埋点(track-view为v-track全局注册的组件) --><track-view v-track:18015></track-view><track-view v-track:18015.watch="{ rest }"></track-view><track-view v-track:18015.watch.delay="{ rest }"></track-view><track-view v-if="rest" v-track:18015></track-view> <!-- 事件行为埋点(DOM) --><div v-track:18015.click="handleClick"></div><div v-track:18015.click="{ handleClick, item, index }"></div><div v-track:18015.click.async="{ handleSearch, rest }"></div><div v-track:18015.click.delay="handleClick"></div> <!-- 事件行为埋点(组件) --><cmp v-track:18015.click="handleClick"></cmp><cmp v-track:18015.[自定义事件名]="handleSearch"></cmp><cmp v-track:18015.[自定义事件名].delay="handleSearch"></cmp><cmp v-track:18015.[自定义事件名].async="{ handleSearch, rest }"></cmp> <!-- 区域展现埋点(block 可以是 DOM 或者组件) --><block v-track:18015.show></block><block v-track:18015.show.once></block><block v-track:18015.show.custom="{ ref: 'scroll' }"></block><block v-track:18015.show.custom.once="{ ref: 'scroll' }"></block>
指令修饰符
.click
表示事件行为的埋点.[custom-event]
表示自定义事件行为的埋点.native
表示监听组件原生click事件行为的埋点.watch
表示页面异步行为的埋点.async
配合.click
指令,表示异步事件行为的埋点.delay
表示埋点是否延迟执行,默认先执行埋点再执行回调.show
表示区域曝光埋点.once
配合.show
指令,只执行一次埋点.custom
配合.show
指令,表示使用自定义scroll事件
LICENSE
MIT © 2019-present, LHammer