vue-trackevent

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

Usage no npm install needed!

<script type="module">
  import vueTrackevent from 'https://cdn.skypack.dev/vue-trackevent';
</script>

README

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)); // 上报信息
        }
    },
});

Google Analytics (GA)

官网:https://analytics.google.com

如 百度统计 和 友盟统计