Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/l-hammer/v-track
🕹 A manual tracking decoupling plugin based on Vue directive / 一个基于Vue指令实现的埋点解耦插件~
https://github.com/l-hammer/v-track
directive javascript plugin track vue vue-components
Last synced: 1 day ago
JSON representation
🕹 A manual tracking decoupling plugin based on Vue directive / 一个基于Vue指令实现的埋点解耦插件~
- Host: GitHub
- URL: https://github.com/l-hammer/v-track
- Owner: l-hammer
- License: mit
- Created: 2019-04-07T10:54:06.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2022-12-10T14:50:50.000Z (almost 2 years ago)
- Last Synced: 2024-10-30T04:50:13.693Z (15 days ago)
- Topics: directive, javascript, plugin, track, vue, vue-components
- Language: JavaScript
- Homepage: https://lhammer.cn/v-track
- Size: 2.33 MB
- Stars: 341
- Watchers: 14
- Forks: 63
- Open Issues: 34
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# v-track
v-track通过 Vue [自定义指令](https://cn.vuejs.org/v2/guide/custom-directive.html)的方式将埋点代码与业务代码完全解耦~
## 安装
### YARN
```shell
$ yarn add v-track
```
### NPM
```shell
$ npm install v-track --save
```
### CDN
目前可以通过[unpkg.com/v-track](https://unpkg.com/v-track/)获取到最新版本的资源，在页面上使用 script 标签直接引入文件即可开始使用
```html
```
或者
```html
```
> 建议使用 CDN 引入 v-track 的用户在链接地址上锁定版本，以免将来 v-track 升级时受到非兼容性更新的影响。锁定版本的方法请查看 [unpkg.com](https://unpkg.com/) or [jsdelivr.com](https://www.jsdelivr.com/)。
## 用法
```js
import Vue from "vue"
import VTrack from "v-track"
import trackEvents from "./track-events"
Vue.use(VTrack, {
trackEvents, // 埋点事件对象
trackEnable: {
UVPV: true, // 是否开启UVPV统计，v0.8.3新增routeUpdate，即在当前路由参数发生改变时埋点，默认为false
TONP: true // 是否开启页面停留时长统计，默认为false
}
})
```
```js
/* track-events.js */
export default {
/**
* @name UVPV 固定名称不支持修改
* @desc UV、PV埋点
* @param {Object} context 当前上下文
*/
UVPV(context) {
...
},
/**
* @name TONP 固定名称不支持修改
* @desc 页面停留时间埋点（Time on Page）
* @param {Object} context 当前上下文
* @param {Timestamp} et 进入页面时间
* @param {Timestamp} dt 离开页面时间
*/
TONP(context, { et, dt }) {
...
},
/**
* @name 18015 埋点唯一标识ID（自定义）
* @param {Object} context 当前上下文
* @param {Object} args 剩余参数
*/
18015(context, args) {
...
}
...
}
```
```HTML
```
## 指令修饰符
- `.click` 表示事件行为的埋点
- `.[custom-event]` 表示自定义事件行为的埋点
- `.native` 表示监听组件原生click事件行为的埋点
- `.watch` 表示页面异步行为的埋点
- `.async` 配合`.click`指令，表示异步事件行为的埋点
- `.delay` 表示埋点是否延迟执行，默认先执行埋点再执行回调
- `.show` 表示区域曝光埋点
- `.once` 配合`.show`指令，只执行一次埋点
- `.custom` 配合`.show`指令，表示使用自定义scroll事件
## LICENSE
[MIT](https://github.com/l-hammer/v-track/blob/master/LICENSE) © 2019-present, LHammer