@blueking/bk-trace-core

数据上报插件

用于上报前端事件上报，统计界面PV和UV这些

如何安装

Vue3项目

1. 安装最新SDK

npm i @blueking/bk-trace-core@latest

2. 在项目入口引入SDK

import { createApp } from 'vue';
import App from './App';

// 引入SDK
import BkTrace from '@blueking/bk-trace-core';

// 性能和屏幕录制包（安装需求安装）
// import BkTracePerformance from '@blueking/bk-trace-performance';
// import BkTraceRecord from '@blueking/bk-trace-recordscreen';

// BkTrace.use(BkTracePerformance);
// BkTrace.use(BkTraceRecord);

createApp(App)
  .use(BkTrace, {
    url: '/api/report', // 上报地址
    appCode: 'bk-test',// 你的APP名称
    appVersion: 'bcs-v1.0.0',// 你的APP版本
    spaceID: 'testproject', // 当前空间(支持使用函数 ()=>'testproject')
    spaceType: 'project', // 当前空间类型(支持使用函数 ()=>'project')
  })
  .mount('#app');

Vue2项目

1. 安装最新SDK

npm i @blueking/bk-trace-core@latest

2. 在项目入口引入SDK

import Vue from 'vue';

// 引入SDK
import BkTrace from '@blueking/bk-trace-core';

// 性能和屏幕录制包（安装需求安装）
// import BkTracePerformance from '@blueking/bk-trace-performance';
// import BkTraceRecord from '@blueking/bk-trace-recordscreen';

// BkTrace.use(BkTracePerformance);
// BkTrace.use(BkTraceRecord);

Vue.use(BkTrace);

手动上报

默认会自动上报UV和PV数据，也可以手动上报自定义数据

1.指令用法手动上报

<span v-bk-trace.click="{ ct: '用户点击span' }">点击span</span>

2.引入自定义方法上报

<template>
  <div>
    <!-- 绑定点击事件 handleClick -->
    <span @click="handleClick">点击span</span>
  </div>
</template>

<script>
import { defineComponent } from 'vue';
import { transportData } from '@blueking/bk-trace-core';
export default defineComponent({
  setup() {
    const handleClick = () => {
      const message = '调用自定义方法上报';
      // 调用 transportData.send 方法进行数据上报
      transportData.send(message);
    };

    return {
      handleClick,
    };
  },
});
</script>

配置说明

上报数据格式说明