这是一个Vue前端埋点工具库
使用方法
happy-track
一个页面数据采集工具
Features
- 采集页面基础数据：加载时间，白屏时间
- 采集页面的UA信息
- 在每个页面的停留时间和行为路径
- 主动可视化埋点
Browser Support
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Latest |
Latest |
Latest |
Latest |
Latest |
11 |
Installing
Using npm:
$ npm install --save happy-trackUsing cdn: CDN有一个好处，永远是最新版本的，但是会占用一个http请求，请各自衡量
<script src="happy-track.min.js"></script>
window.onload = () => {
window.happytrack.init({uuid: 'yourid', version: 'yourversion', appid: '7fa1e8ba0623405c9e494f63a17abf19', sentryPublicKey: 'aaa', sentrySecretKey: 'nnnn', sentryProjectId: '1'})
}Example
初始化
//在main.js里
import {init,track} from 'happy-track' // 有一个use方法和一个指令方法
// 使用我们自己封装的第三方函数库
function addEvent (element, event, listener) {
if (element.addEventListener) {
element.addEventListener(event, listener, false)
} else if (element.attachEvent) {
element.attachEvent('on' + event, listener)
} else {
element['on' + event] = listener
}
}
//注册到vue内
Vue.prototype.$track = track
Vue.directive('track', {
bind (el, binding) {
addEvent(el, 'click', () => {
track('directive', binding)
})
},
unbind: function (el) {
addEvent(el, 'click', function () {})
}
})
/**
* 在组件内使用 v-track="dosomething" ,最后服务端会收到 directive:dosomething这样一个字段
* **/
window.onload = () => {//尽量绑定在onload事件上
init({uuid: 'helloworld', appid: '7fa1e8ba0623405c9e494f63a17abf19'})
}License
MIT
