Vue-trackevent NPM

vue 数据埋点指令

数据埋点通用指令，支持和第三方 SDK 集成，如百度统计、友盟统计、GA 等

安装

$ npm install vue-trackevent --save

使用

// main.js
import Vue from 'vue';
import VTrackevent from 'vue-trackevent';

Vue.use(VTrackevent, {
	callback(data, e) {
		console.log(data, e);
	},
	debug: false,
});

<template>
	<button v-trackevent="['hello','world']">DEBUG</button>
</template>

属性

属性	说明
init	初始化时调用的函数，只调用一次，主要是配合第三方 SDK
callback	元素触发后的回调，data 为绑定的数据，e 为事件源对象
debug	是否处于调试环境，默认 false

数据

v-trackevent 支持绑定 可被克隆的 Javascript 对象 ，如 Number、String、Array、Object、Boolean

默认元素触发方式为点击 click，事件绑定方式为追加

如果需要更改触发方式，如mouseover，则需要按下述要求修改传入的值

v-trackevent="{event:'mouseover',data:'hello world'}"

即需要传入{event,data}的 object 数据

点击触发

<template>
	<button v-trackevent="{event:'click',data:['hello','world']}">DEBUG</button>
</template>

等同于

<template>
	<button v-trackevent="['hello','world']">DEBUG</button>
</template>

鼠标进入触发

<template>
	<button v-trackevent="{event:'mouseenter',data:['hello','world']}">DEBUG</button>
</template>

注意 mouseenter 和 mouseover 的区别

文本改变触发

<template>
	<input type="text" v-trackevent="{'event':'change',data:['hello world']}" />
</template>

// callback(data,e) 中，e.target.value可以取到输入框的值

第三方 SDK

百度统计

官网：https://tongji.baidu.com/web/welcome/login

// main.js
import Vue from 'vue';
import VTrackevent from 'vue-trackevent';

Vue.use(VTrackevent, {
	init() {
		window._hmt = window._hmt || []; // 挂载到window上
		const hm = document.createElement('script');
		hm.src = `https://hm.baidu.com/hm.js?xxx`; // 百度统计应用id
		const s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(hm, s);
	},
	callback(data) {
		if (data instanceof Array && '_hmt' in window) {
			window._hmt.push(['_trackEvent'].concat(data)); // 上报信息
		}
	},
});

友盟统计

官网：https://www.umeng.com

// main.js
import Vue from 'vue';
import VTrackevent from 'vue-trackevent';

Vue.use(VTrackevent, {
	init() {
		window._czc = window._czc || []; // 挂载到window上
		const cz = document.createElement('script');
		cz.src = `https://v1.cnzz.com/z_stat.php?id=xxx&web_id=xxx`; // 友盟统计应用id
		const s = document.getElementsByTagName('script')[0];
		s.parentNode.insertBefore(cz, s);
	},
	callback(data) {
		if (data instanceof Array && '_czc' in window) {
			window._czc.push(['_trackEvent'].concat(data)); // 上报信息
		}
	},
});