hlg-tracker

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', // dev, stage, 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);

/**
 * 用户登录，需要传用户 ID 或者匿名 ID
 * @param {Number|required} type 0 匿名用户， 1 登录用户
 * @param {Number} vipLevel 用户版本
 * @param {String} shopType 店铺类型
 * @param {String} shopLevel 店铺等级
 */
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';

// 注意需要在 setup 之后调用
// 上报 utm 相关数据，需要与 RouterChangeTracker 插件一起使用。
trackerWind.use('utmDataTracker', UtmDataTracker);

// 自动上报基于 vue-router 的 PV
// app 为 vue 的根实例，须使用 vue-router
trackerWind.use('routerChangeTracker', RouterChangeTracker, { app });

// 关于 abtest 的插件
// abtest 为 abtest 库的实例
trackerWind.use('ABTestDataTracker', ABTestDataTracker, { abtest });

开发

yarn
# use yarn to install deps

yarn dev
# visit page on http://localhost:9001/

发布

yarn npm-publish