vue-uv-tracker
v1.0.4
Published
用于捕获点击、搜索框回车搜索、路由切换等埋点数据并上报到服务器的Vue插件
Downloads
2
Maintainers
Readme
vue-exception-captor
本项目以Vue插件方式应用以Vue工程中,用于捕获点击、搜索框回车搜索、路由切换等埋点数据,并支持HTTP接口方式上送到后台服务进行分析统计。
使用说明
npm install vue-uv-tracker"
import vue-tracking from "vue-uv-tracker"
Vue.use(vue-tracking,{
productName: 'psdc',
username:'testuser',
reportUrl: '/event-tracking/exceptions',
disabled: process.env.NODE_ENV !== 'production',
console: true,
router: router
})
- productName:产品名字,用于在异常分析平台分类,默认为unknown
- username:用于标识异常来自哪个用户,默认为unknown
- reportUrl:上报异常的Http接口Url
- disabled:是否停止上报,默认为false
- console:是否开启控制台打印,默认为false
- router:vue-router实例,通过监听vue-route实例beforeEach钩子,捕获路由切换的相关信息。不传则表示不对路由埋点
安装完插件后,会向vue注册两个属性
Vue.prototype.$tracker
在Vue实例中使用该方法设置username,使得上报的埋点数据可以标识来自哪个用户(只需要在用户名变化后调用一次,后续所有上报的异常均使用该用户名)
this.$tracker.setUserName(userName)
Vue.prototype.$reportTrackingData
在Vue实例中使用以下方法上报埋点数据
- eventName:事件类型,如buttonClick,XXXSearch...
- eventData:事件信息,JSON Object结构
this.$reportTrackingData(eventName,eventData)
track指令的使用说明:
<button v-track="{eventName: 'buttonClick', eventData: {buttonName: 'submit'}}">Submit</button>
track-search指令的使用说明:
<input v-track-search="{eventName: 'xxxSearch'}">Submit</input>