使用指南

一、安装sdk包

1. 项目目录创建一个 .npmrc 文件，并配置

   @dsl-bi:registry=https://npm.dslbuy.com

2. 执行 npm install -S @dsl-bi/data-tracker 可自动从公司npm私有库安装包到本地

二、初始化sdk

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

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

   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端
   })

2. 支持设置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()
     
     <!-- 传入app实例 -->
     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()
     <!-- 传入app实例 -->
     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',
  })

TODO LIST

• [ ] 按钮点击自定义指令支持在unmount时解除绑定
• [ ] 百科小程序页面上报sdk