@medlinker/tracker

多端埋点工具 文档

安装

NPM 安装（推荐）

npm i @medlinker/tracker

import MedTracker from '@medlinker/tracker/browser';

MedTracker.init(...);

全局安装

下载文件，并通过 script 标签引用。

<script src="/js/med-tracker/browser.js"></script>

/// <reference types="@medlinker/tracker/browser" />

MedTracker.init(...);

使用

初始化

模块需要通过调用 init 方法完成初始化。只有在初始化后，才能正常上报埋点信息，初始化前的埋点会被忽略。

MedTracker.init(config);

config.hash

类型：boolean，默认为 false。

当前项目使用使用了 hash 路由

config.enable

类型：boolean，默认为 true。

是否启用，开发模式下一般设置成 false。

config.env

类型：dev | qa | prod，默认为 dev

项目当前运行的环境，决定了上传的接口。

埋点方式

手动上报

通过调用方法来进行上报。

方法：MedTracker.collect(data:UserDataEntity)

interface UserDataEntity {
  /**
   * log_type
   */
  lt?: number;
  /**
   * event_id
   */
  ei?: number;
  /**
   * event_param
   */
  ep?: string;
  /**
   * business
   */
  b?: string;
}

function Login() {
  return (
    <button
      onClick={() => {
        MedTracker.report({
          b: 'someActivity',
          ei: '0',
        });
        // 业务代码逻辑
      }}
    >
      提交
    </button>
  );
}

隐式上报

点击事件埋点更建议使用隐式上报。这种方式对业务代码的侵入性会小一些。

function Login() {
  return (
    <button
      data-medtrack="b:patient;ei:0;s:web"
      onClick={() => {
          // 业务代码逻辑
        };
      }
    >
      提交
    </button>
  );
}

这样每次点击 button 都会将data-medtrack携带的信息进行上报。

API

MedTracker.init(config)

初始化配置

MedTracker.ready()

调用此方法前的埋点会加入队列直到已经准备完成。一般在获取用户 id 后再调用此方法。

MedTracker.setUserId(id:string)

设置当前登录的用户 id

MedTracker.collect(data: UserDataEntity)

埋点方法

export interface UserDataEntity {
  /**
   * log_type，默认为1
   */
  lt?: number;
  /**
   * event_id 默认为 -1
   */
  ei?: number;
  /**
   * event_param 默认为 ''
   */
  ep?: string;
  /**
   * business 默认为 ''
   */
  b?: string;
}

MedTracker.reset()

重置 tracker。

SPA 应用

1. 在路由变化时调用一次 MedTracker.collect()
2. 用户退出登录后，如果没有刷新页面，可以调用MedTracker.reset() 重置模块。