hlg-tracker ·
无垠埋点前端 SDK,封装了一个可配置的埋点指令集,方便快速调用。
Install
npm install hlg-tracker
Usage
注册 SDK
import { tracker } from 'hlg-tracker';
const trackerOptions = {
wind: {
name: 'wind',
project: 'gd_web',
version: '0.0.2',
env: 'prod',
showLog: true,
basicFields: {},
commonFields: {},
eventFields: {
scene: 'test',
},
}
};
const isProd = process.env.NODE_ENV === 'production';
const debugMode = window.sessionStorage.getItem('__tracker_debug') || /__tracker_debug/.test(window.location.href);
tracker.setup(trackerOptions, isProd, debugMode);
tracker.login(666, { type: 1, vipLevel: 1, shopType: 'B', shopLevel: '3' });
tracker.logout();
Vue 快捷指令
注册指令:
import Vue from 'vue';
import { hlgTracker } from 'hlg-tracker';
const trackerConfig = {
11: {
event: 'default_event',
},
12: () => ({
event: 'hover_event',
user_id: 110,
}),
13: (type = 0) => ({
event: 'function_event_with_attribute',
user_type: type
}),
14: () => new Promise((resolve) => {
resolve({
event: 'promise_event'
});
}),
};
Vue.use(hlgTracker, trackerConfig);
使用指令:
<button v-hlg-click="11">点击</button>
<button v-hlg-hover="12">hover</button>
<button v-hlg-expose="13">曝光</button>
<button v-hlg-click="{ event: 'default_event', event_id: 11 }">点击</button>
const app = new Vue({
data() {
return {
type: 1,
}
},
mounted() {
this.$trackEvent(13, this.type);
},
methods: {
onClick() {
this.$trackEvent(14);
this.$trackEvent({
event: 'default_event',
event_id: 11
});
}
},
})
无垠埋点插件
import { trackerWind, RouterChangeTracker, UtmDataTracker, ABTestDataTracker } from 'hlg-tracker';
trackerWind.use('utmDataTracker', UtmDataTracker);
trackerWind.use('routerChangeTracker', RouterChangeTracker, { app });
trackerWind.use('ABTestDataTracker', ABTestDataTracker, { abtest });
开发
yarn
yarn dev
发布
yarn npm-publish