公共埋点收集

@tracking-sdk/apm

埋点收集通过工具包

• 功能点

• 自动收集 登录、登出，页面浏览记录，报错信息，支持 sourcemap 解析;

• 收集 BUTTON\A 标签点击数据

• 业务接口所需 behavior-info 数据收集方法

• 手动数据上报功能

• 1. 目前收集数据有哪些？ 数据采集数据配置；
  2. 收集的数据在哪查看？ apm；

安装与构建

# install with npm | yarn
npm install
yarn

# 单元测试
npm run test (module name)
npm run test:dev (module name)

# 构建
npm run build

# 构建说明文档
npm run build:docs

目录结构

.
├─dist                      # 生成目录
|
├─docs                      # 文档说明
|
├─src
│  ├─data
│  │  └─index.ts            # 数据枚举
│  ├─eventTrack
│  │  ├─config.ts           # 基础数据配置
│  │  │  ├─account.ts                  # 账户
│  │  │  ├─base.ts                     # 基础，定义埋点最外层数据
│  │  │  ├─common.ts                   # 页面（events）层级通用数据
│  │  │  ├─event-name.ts               # 事件id <=> 事件名称的枚举
│  │  │  ├─global.ts                   # 埋点全局数据，作用于全局计算（浏览时间，结束时间等）
│  │  │  └─index.ts                    # export default
│  │  ├─utils.ts            # 工具类
│  │  │  ├─behavior-info.ts            # header头部信息处理工具
│  │  │  ├─format.ts                   # 数据格式化工具
│  │  │  ├─listener.ts                 # 监听类工具
│  │  │  ├─navigator.ts                # navigator类工具
│  │  │  ├─network.ts                  # 网络工具 暂停使用
│  │  │  ├─postMessage.ts              # postMessage工具，主要作用于旧bps数据传递
│  │  │  └─storage.ts                  # 缓存类工具
│  │  ├─index.ts            # 埋点方法
│  │  ├─api.ts              # api请求接口
│  │  └─config.js           # 配置基础数据
│  ├─utils
│  │  ├─env.ts              # 环境识别工具
│  │  └─request.ts          # http请求工具
│  └─index.ts               # 主入口
│
├─test                      # mock 单元测试
│  └─index.js               # 
│
├─types                     # ts
│  └─index.js               # 
│
├─.cz-config.js
├─.editorconfig
├─.eslintignore
├─.eslintrc.js
├─.gitignore
├─.prettierrc.json
├─api-extractor.json
├─commitlint.config.js
├─jest.config.js
├─LICENSE
├─package-lock.json
├─package.json
├─rollup.config.js
├─tsconfig.json
├─typedoc.json
└─yarn.lock

demo

• 安装并全局注册

  通过 window.$EventTrack / Vue.prototype.$EventTrack / this.$EventTrack 访问

import { EventTrack } from '@tracking-sdk/apm';
import router from './router';

// 启动，
// 手动传入router，添加路由守卫。
// 传入vue，自动注册全局
// REQ_AGENT 当前平台的req-agent，以req-agent作为 每一个埋点的key进行跟踪记录
// ACCOUNT_KEY 当前平台存储用户信息的key，用于监听用户登录退出
EventTrack.init({
  REQ_AGENT,
  ACCOUNT_KEY,
}, router, Vue);

• Vue3

import { EventTrack } from '@tracking-sdk/apm';
import router from './router';

// 启动，
// 手动传入router，添加路由守卫。
// 传入app，自动注册全局
// REQ_AGENT 当前平台的req-agent，以req-agent作为 每一个埋点的key进行跟踪记录
// ACCOUNT_KEY 当前平台存储用户信息的key，用于监听用户登录退出
const app = createApp(App)
EventTrack.init3({
  REQ_AGENT: 'yunbanfang',
  ACCOUNT_KEY,
}, router, app);

• 业务接口所需 behavior-info 数据收集方法

Vue.prototype.$EventTrack.getBehaviorInfo();

this.$EventTrack.getBehaviorInfo();

• vue3

window.$EventTrack.getBehaviorInfo();

• 手动数据上报功能

• vue2

/**
 * params: {
  * trackName: string | number 上报事件名称
  * value = {},                上报数据集合
  * isPost = false             是否立即上报
 * }
*/
Vue.prototype.$EventTrack.reportEventTrack(params);

this.$EventTrack.reportEventTrack(params);

• vue3
  • vue 页面

import {
   getCurrentInstance,
} from "vue";
 let { proxy } = getCurrentInstance();
proxy.$EventTrack.reportEventTrack(params);

• vue3
  • hook, vue以外页面

window.$EventTrack.reportEventTrack(params);

• 按钮点击数据
  • 根据button、a标签，自动收集，分别采集节点的attributes集合，outerHTML，innerText
  • 根据dataset是否包含 data-eventtrack 进行采集

// 自动收集
<el-button data-index="0" data-orderId="XXXXXXXXX">点击采集数据</el-button>

// 根据 data-eventTrack 收集
<div data-eventTrack  data-index="0" data-orderId="XXXXXXXXX">点击采集数据</div>

// 接入事件分析的按钮
// 需要有 data-eventcode， data-eventcodename
<el-button
  data-eventcode="DL"
  data-eventcodename="登录"
>登录</el-button>