Bi-data-tracker NPM

使用指南

一、安装sdk包

项目目录创建一个 .npmrc 文件，并配置
```
@dsl-bi:registry=https://npm.dslbuy.com
```
执行 npm install -S @dsl-bi/data-tracker 可自动从公司npm私有库安装包到本地

二、初始化sdk

引入sdk，并配置所有埋点接口的公共数据

埋点模块及公共数据初始化

import {dataTracker} from '@dsl-bi/data-tracker'

dataTracker.init({
   env: 'dev' | 'development' | 'test' | 'stage' | 'gray' | 'prod' |  'production'   // 当前环境，用来映射埋点请求的域名
   application: string                       // 应用名
   employeeId: string                        // 员工号
   sessionId?: string                         // token，该字段可以单独设置，有额外的接口(第2点)
   client: 'B' | 'C'                         // 应用类型 B端、C端
})

支持设置sessionId（按需使用）
支持埋点接口公共数据“sessionId”的修改（在下一次请求生效）
```
import {dataTracker} from '@dsl-bi/data-tracker'

dataTracker.setSessionId('token值')
```

三、埋点通用能力（按需选择使用，支持tree-shaking）

web端（vue管理后台）“PV埋点”功能
有自动和手动两种方法，按实际场景选择使用
自动埋点写法（配置后sdk自动上报）
1. 初始化工具（内部增加一个全局mixin）
```
import { createApp } from 'vue'
import { webPageViewInit } from '@dsl-bi/data-tracker'

const app = createApp()


webPageViewInit(app) // 注意：vue3传入实例变量app，vue2直接传入Vue(需要在new Vue执行前)
```
2. 配置埋点数据
  在需要埋点的路由页面文件中配置 pageId 参数
```
import { defineComponent } from 'vue'
```
  export default defineComponent({ pageId: 'CDP系统里生成的页面id', setup(){}, ... })
手动埋点写法（调用相关api手动上报）
```
import { dataTracker } from '@dsl-bi/data-tracker'

dataTracker.trackPageClick({
  pageId: 'CDP系统里生成的页面id',
})
```
web端（vue管理后台）“按钮点击埋点”功能
有自动和手动两种方法，按实际场景选择使用
自动埋点写法（配置后sdk自动上报）
1. 初始化工具（内部全局注册v-track指令）
```
import { createApp } from 'vue'
import {webButtonClickInit} from '@dsl-bi/data-tracker'

const app = createApp()

webButtonClickInit(app) // 注意：vue3传入实例变量app，vue2直接传入Vue(需要在new Vue执行前)
```
2. 编写埋点逻辑
  在需要埋点的dom上注册埋点信息
```
<button 
  key="唯一id" 
  v-track="{id: 'CDP系统里生成的按钮id'}"
>我是埋点按钮</button>
```
  ⚠️📢注意：这里的key强烈建议必须要写上，且在兄弟节点中必须唯一(不要使用下标index)。这个跟vue虚拟dom的复用规则有关。不带上的话在某些场景会导致埋点出错。
手动埋点写法（调用相关api手动上报）
```
import { dataTracker } from '@dsl-bi/data-tracker'

dataTracker.trackBtnClick({
  buttonId: 'CDP系统里生成的按钮id',
})
```