VUE插件: 事件埋点追踪

安装

npm i @sinoyd/vue-track

# or
yarn add @sinoyd/vue-track

# or
pnpm add @sinoyd/vue-track

使用

vue2

import Vue from 'vue';
import track from '@sinoyd/vue-track';

import router from './routes';

// 插件配置
const trackConfig = {
  router,
};

Vue.use(track, trackConfig);

vue3

const app = createApp(App);

const router = createRouter();

// 插件配置
const trackConfig = {
  router,
};

app.use(track, trackConfig);

插件配置

{
  // (必填) 埋点上报接口地址
  url: '',

  // (可选) 埋点数据上传的方法， 可选，不填写默认 'post'
  method: 'post',

  // (可选) 请求头参数设置
  headers: {},

  /**
   * (可选) 上报数据转换
   * @params {object} params 上报参数
   */
  toData(params) {
    return params;
  },

  // 上报间隔（毫秒），为 0 则实时上报
  submitTime: 0,

  // (可选) 路由实例, 如果需要记录页面停留时间和页面跳转来源则必填
  router,

  // (可选) 一个数组，需要记录停留时间的页面vue路由path, 若写['*']则为所有页面
  durationRoute: ['*'],

  // (可选) 页面滞留多久允许上报
  durationTime: 0,

  // (可选) 是否需要记录跳转来源
  needReferrer: false,

  // (可选) 是否需要记录页面性能
  needPerformance: false,

  // (可选) 跳转来源的页面标记字段, 例如 http://www.baidu.com?from=baidu
  sign: 'from',

  // (可选) 自定义埋点方法
  logFunction: null,

  // (可选) 埋点指令名称, 默认 log
  directiveName: 'log',

  // (可选) debug 打印参数信息
  debug: false
}

上报参数

{
  // 上报类型 pv、referrer、action
  type: string,
  // 会话 TraceID
  key: string,
  // 自定义传参
  data: object,
  // 上报时间
  time: number,
  // 浏览器参数
  browser: {
    // 客户端信息
    userAgent: string,
    // 浏览器名称
    browser: string,
    // 浏览器版本
    version: string,
    // 浏览器内核
    engine: string,
    // 浏览器默认语言
    language: string,
    // 屏幕高度
    screenHeight: string,
    // 屏幕宽度
    screenWidth: string,
    // 设备类型
    device: string,
    // 硬件平台
    platform: string,
    // 操作系统
    system: string,
    // 操作系统版本
    systemVersion: string,
    // 是否为搜索引擎蜘蛛程序
    isBot : string,
    // 是否为Webview(仅Android)
    isWebview: string,
  },
  // 位置参数
  location: {
    // cid
    cid: string,
    // 区域
    cip: string,
    // 区域名称
    cname: string,
    // 同 cip
    ip: string,
    // 同 cname
    area: string,
  }
  // 性能参数, 仅 pv 类型才有
  performance: {
    // 网页重定向的耗时
    Redirect: number,
    // 检查本地缓存的耗时
    AppCache: number,
    // DNS查询的耗时
    DNS: number,
    // TCP链接的耗时
    TCP: number,
    // 从客户端发起请求到接收响应的时间
    TTFB: number,
    // 下载服务端返回数据的时间
    ContentDownload: number,
    // http请求总耗时
    HttpTotalTime: number,
    // 首包时间
    FirstTime: number,
    // 白屏时间
    WhiteScreenTime: number,
    // 首次可交互时间
    TTI: number,
    // DOM 解析耗时
    DomParsing: number,
    // DOM 加载完成的时间
    DomContentLoaded: number,
    // 页面load的总耗时
    Loaded: number
  }
}