1. 使用说明

1.1 第一次使用时：

npm install

1.2 编译

编译web，微信小程序

npm run build:all 

编译web

npm run build:web

编译微信小程序

npm run build:wxminiapp

编译百度小程序

npm run build:swan

模拟下载小程序SDK

node config/download.js 小程序平台 dmhub环境

// 小程序平台: wxminiapp, swan
// dmhub环境: test, v1, validation

// 例如：下载 v1环境 百度小程序SDK
node config/download.js swan v1

// 下载后文件: dist/download.swan.js

1.3 Example

多页面应用

npm run example:mpa

单页面应用

npm run example:spa

• npm run example:mpa

1.4 前端埋点自动化测试

命令行模式

npm run cy:run

可视化模式

npm run cy:open

2 项目背景

2.1 事件上报、采集的两种模式

前端事件上报模式分为单条模式和批量模式。

单条模式

事件内容通过GET /__utm?参数列表 的方式上送埋点采集服务。比如： http://cbe.dmhub.cn/cbe/__utm?utma=1984626936.1960337867.1734229266.1626324127.1626324127.1&utmb=1984626936.1960337867.1626324127.1626324127.1&token=1984626936.1960337867&tenantId=1734229266&event=exit_page&pageId=3091711748&targetName=%E6%B5%8B%E8%AF%95%E7%AB%99%E7%82%B9&targetId=3091711748&screenWidth=1920&screenHeight=1080&hosting=web

服务器收到这个请求，返回一个占位图片。 当前网页和小程序的埋点，均是通过这种方式上送的。这种方式主要针对如下场景：

•  一有事件立即上报，浏览器不暂存

•  事件内容长度可控，一般浏览器url 长度支持1000-2000个字节

批量模式

类似App SDK埋点，事件内容通过 POST /track 的方式上送埋点采集服务。这种方式主要针对如下场景：

• 事件缓存，定期批量上报，在退出应用（网页）前，可以捕获到事件并强制上送。或者事件持久化，待下次打开应用时补送。
• 事件体内容比较多，无法塞入url中。例如：

{
    "targetName":"com.convertlab.demo.jpush.activity.VPFrgActivity|com.convertlab.demo.jpush.fragment.Frg_4",
    "title":"ViewPager + v4 Fragment",
    "elementId":"button1",
    "elementContent":"0",
    "elementType":"Button",
    "elementPath":"android.widget.LinearLayout[0]\/android.widget.FrameLayout[0]\/androidx.appcompat.widget.ActionBarOverlayLayout[0]\/androidx.appcompat.widget.ContentFrameLayout[0]\/androidx.constraintlayout.widget.ConstraintLayout[0]\/androidx.viewpager.widget.ViewPager[0]\/android.widget.FrameLayout[0]\/androidx.recyclerview.widget.RecyclerView[0]\/android.widget.LinearLayout[-]\/androidx.appcompat.widget.AppCompatButton[0]",
    "elementPosition":"0",
     "elementSelector":"android.widget.LinearLayout[0]\/android.widget.FrameLayout[0]\/androidx.appcompat.widget.ActionBarOverlayLayout[0]\/androidx.appcompat.widget.ContentFrameLayout[0]\/androidx.constraintlayout.widget.ConstraintLayout[0]\/androidx.viewpager.widget.ViewPager[0]\/android.widget.FrameLayout[0]\/androidx.recyclerview.widget.RecyclerView[0]\/android.widget.LinearLayout[0]\/androidx.appcompat.widget.AppCompatButton[0]",
    "eventId":"b409deb1-766b-407c-928c-6d7821774d55-1625710871835",
    "event":"mobile_app_click",
    "targetId":"-6767929929261583146",
    "appName":"cl027f16a9bd54479",
    "date":"2021-07-08T02:21:11.834Z",
    "os":"Android",
    "model":"EVR-AL00",
    "brand":"HUAWEI",
    "androidId":"c4266056c114d843",
    "mac":"F4:BF:80:79:19:6B",
    "manufacturer":"HUAWEI",
    "utma":"1286013838.1625108674598.1734229266.1625710793174.1625710863396.169",
    "utmb":"1286013838.1625108674598.1625710793174.1625710863396.169",
    "platform":"android",
    "libVersion":"3.0.1",
    "osVersion":"10",
    "screenDpi":375,
    "screenWidth":1080,
    "screenHeight":2244,
    "appVersion":"1.0",
    "appVersionCode":1,
    "carrier":"中国电信",
    "network":"wifi",
    "hasNfc":true,
    "hasTelephony":true,
    "bluetoothVersion":"ble",
    "device":"oaid-ca5e30b9-bc42-4dc9-b4b1-ae545cfa13c7",
    "deviceHash":"3064320131983929597"
}

2.2 接口定义

| 序号 | 接口 | 说明 | |---|---|---| | 1 | clab_tracker.track(event, targetName, targetId, properties, callback) | 向DM Hub发送需要采集的数据 | 2 | clab_tracker.ready(cb: func) | clab_tracker准备就绪 | | 3 | clab_tracker.push(properties: object) | 设置公共的参数 | | 4 | clab_tracker.attach() | 页面元素标记化&处理form | | 5 | clab_tracker.set({'flushInterval': number, 'bulkUploadLimit'： number, 'pageOpenMode':string, 'spa':boolean, 'autoTrack': boolean}) | 配置tracker|

代码结构