gd-tracker 稿定前端埋点 vue组件 与 SDK

SDK 使用示例

npm install @gaoding/gd-tracker

import { tracker } from '@gaoding/gd-tracker';

const trackerOptions = {
    sa: {
        name: 'sa',
        project: 'your_project_name',
        heatmap: {},
        show_log: true,
        project_fields: {
            sou_from: () => {
                return 'tracker_demo';
            }
        },
        track_sou_from: true // 是否跨站点穿透 sou_from
    },
    _hmt: {
        projectId: 'your_baidu_app_id'
    }
    gio: {
        projectId: 'your_baidu_app_id'
    }
};

// setup tracking tools
tracker.setup(trackerOptions, false, true);

// link user and set profiles, once profiles
// type property indicate whether the user is logined or guest, 1 indicate logined user while 0 indicate guest
tracker.login(666, {
    type: 1
},{
    source: 'demo'
});

// remove link to logined user
tracker.logout();

// track PV
tracker.trackPageView();

// track custom events
tracker.trackEvent('event_name', {
    sc_page: 'GD-Tracker Demo',
    op_but: 'trackEvent'
});

// enter editor should call editSessionStart method
tracker.editSessionStart();

// leave editor should call editSessionEnd method
tracker.editSessionEnd();

配合 AB-Test SDK

import { abtestPlugin, tracker } from '@gaoding/gd-tracker';
import gdABTest from '@gaoding/gd-abtest';

abtestPlugin(tracker, gdABTest);

vTracker使用方法

• 初始化

// main.js
import { vTracker } from '@gaoding/gd-tracker';
import Vue from 'vue';

Vue.use(vTracker);

• 初始化后vTracker在vue原型上注入tracker，提供几个方法,使用方法见上面sdk的示例。这些方法可以在组件初始化之前调用，这时会将这些log请求添加到队列中，待组件初始化完成后执行

Vue.prototype.$tracker.login
Vue.prototype.$tracker.logout
Vue.prototype.$tracker.trackPageView
Vue.prototype.$tracker.trackEvent

• 在router内使用: 由于router内无法立马获取到component实例，导致无法得到$tracker。解决方法由3种:

  • 另外引入sdk，直接使用。此方法注意不要调用tracker.setup，否则将与component gd-tracker 内的 setup 重复冲突

  // route.js
  import { tracker } from '@gaoding/gd-tracker';
  ...
  const router = new VueRouter({ ... })
  router.afterEach(to => {
      ...
      tracker.trackEvent(....);
      ...
  });
  

  • 生成一个Vue实例(如有用eventBus，直接使用即可)

  // route.js
  import Vue from 'vue';
  const tracker = new Vue().$tracker;
  

  • 从Vue.prototype获得$tracker

  // route.js
  import Vue from 'vue';
  const tracker = Vue.prototype.$tracker;
  

分支

主分支 master，一般不更新代码。 版本分支 feature/username_v_version。 开发前请从当前默认分支（当前版本分支）切出特性分支。

开发调试模式

yarn
# use yarn to install deps

npm run dev
# visit page on http://localhost:9001/

发布

npm run build
npm run release
npm publish

文档

• 内部文档

• @gaoding/gd-tracker 文档待定

TODOS

• 加入 .env 记录 gio 和 _hmt 项目 ID，方便 storybook 测试。
• 文件 A 的对象注释出现在文件 B 中。
• 对象字段为函数时，对该函数的注释(sdk_fields.getter 等函数)。