tracker的使用方式

引入

通过npm的方式引入

import Tracker from '@xxx/tracker';

最佳实践

创建tracker

1. 新建tracker.ts, 文件路径 src/utils/tracker.ts

// src/utils/tracker.ts

import Tracker from '@xmt/tracker';
import { getUserVo } from '@/services/loginService';

const deployEnv: string = process.env.deployEnv || 'daily';
const createTracker = () => {
  const userVo = JSON.parse(getUserVo() || '{}');
  window.tracker = Tracker({
    localConfig: {
      app_id: 'web-convoy',
      use_name: userVo.name,
      tenant_id: userVo.tenantId
    },
    webTrackConfig: {
      env: deployEnv,
      projectDaily: 'falcon-bs-daily', //测试环境日志需要上传的项目，需要在阿里云配置
      projectProd: 'falcon-bs', //正式环境日志需要上传的项目， 需要在阿里云配置
      host: 'cn-shenzhen.log.aliyuncs.com', 
      logstore: 'falcon-web-convoy'
    },
    maxBreadcrumbs: 5
  });
}

const removeTracker = () => {
  window.tracker = null;
}

export { createTracker, removeTracker };

2. 用户登录之后创建， 退出登录之后移除

使用

点击

点击支持两种方式：

1. 手动调用
2. 配置data-tracking属性

手动

类指令式

在元素上，配置data-tracking

<div data-tracking={'01020304&导出'}></div>

data-tracking格式是：eventId&**点位名称，**中间用&连接。

页面显示

页面显示会自动上报，不需要业务接入的时候做任何处理。