Happy-track NPM

这是一个Vue前端埋点工具库

使用方法

happy-track

一个页面数据采集工具

Features

采集页面基础数据：加载时间，白屏时间
采集页面的UA信息
在每个页面的停留时间和行为路径
主动可视化埋点

Browser Support


Latest ✔	Latest ✔	Latest ✔	Latest ✔	Latest ✔	11 ✔

Installing

Using npm:

$ npm install --save happy-track

Using 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'})
}