@fle-sdk/event-tracking-web 1.1.1 → 1.1.2-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +73 -45
- package/package.json +3 -3
package/README.md
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
# @fle.sdk/event-tracking-web
|
|
2
2
|
> **构建用户数据体系,让用户行为数据发挥深远的价值。**
|
|
3
3
|
|
|
4
|
-
|
|
4
|
+
|
|
5
5
|
## 前言
|
|
6
6
|
**WEB数据埋点sdk,开始之前请确保了解埋点的架构和基础知识**
|
|
7
7
|
> 埋点中比较重要的组成部分就是每个事件的 key,注意的是 key 至少由两部分组成。
|
|
@@ -9,10 +9,8 @@
|
|
|
9
9
|
|
|
10
10
|
- appkey:APP应用唯一标识
|
|
11
11
|
- pagekey:页面唯一标识,默认取当前路由
|
|
12
|
-
- partkey
|
|
13
|
-
|
|
12
|
+
- partkey:控件/自定义事件唯一标识,可通过接口获取或自定义
|
|
14
13
|
|
|
15
|
-
<a name="Install"></a>
|
|
16
14
|
## 一、下载
|
|
17
15
|
```jsx
|
|
18
16
|
// npm
|
|
@@ -22,8 +20,6 @@ npm install @fle-sdk/event-tracking-web --save-dev
|
|
|
22
20
|
yarn add @fle-sdk/event-tracking-web
|
|
23
21
|
```
|
|
24
22
|
|
|
25
|
-
|
|
26
|
-
<a name="uenOv"></a>
|
|
27
23
|
## 二、全埋点
|
|
28
24
|
> 全埋点包括三种事件:Web 页面浏览、Web 元素点击、Web 页面留存时长,对应的配置如下:
|
|
29
25
|
|
|
@@ -38,9 +34,7 @@ WebTracking.init({
|
|
|
38
34
|
serverUrl: "https://xxx/push",
|
|
39
35
|
});
|
|
40
36
|
```
|
|
41
|
-
<a name="yw2Ck"></a>
|
|
42
37
|
###
|
|
43
|
-
<a name="LTcZG"></a>
|
|
44
38
|
### 2.1 元素点击
|
|
45
39
|
> 元素的点击事件上报 attr 属性中必须含有 **data-part-key** ,否则会被过滤。
|
|
46
40
|
|
|
@@ -51,9 +45,7 @@ WebTracking.init({
|
|
|
51
45
|
</button>
|
|
52
46
|
```
|
|
53
47
|
|
|
54
|
-
<br />
|
|
55
48
|
|
|
56
|
-
<a name="aNxuy"></a>
|
|
57
49
|
### 2.2 全埋点参数示例
|
|
58
50
|
> 全埋点三种类型的上报参数示例,建议都了解一下
|
|
59
51
|
|
|
@@ -98,7 +90,7 @@ WebTracking.init({
|
|
|
98
90
|
"event": "WebClick",
|
|
99
91
|
"appKey": "218844",
|
|
100
92
|
"siteId": "",
|
|
101
|
-
"itemKey": "218844.main.
|
|
93
|
+
"itemKey": "218844.main.8ydgk",
|
|
102
94
|
"requestTime": 1638460476808,
|
|
103
95
|
"deviceId": "f9e3f35a6371f369a2c9f21c48dcabe8",
|
|
104
96
|
"privateParamMap": {
|
|
@@ -182,15 +174,11 @@ WebTracking.init({
|
|
|
182
174
|
}
|
|
183
175
|
```
|
|
184
176
|
|
|
185
|
-
<br />
|
|
186
|
-
|
|
187
177
|
|
|
188
178
|
---
|
|
189
179
|
|
|
190
180
|
|
|
191
|
-
|
|
192
|
-
<a name="95185770"></a>
|
|
193
|
-
## API
|
|
181
|
+
## 三、API
|
|
194
182
|
WebTracking
|
|
195
183
|
|
|
196
184
|
- init() ---初始化
|
|
@@ -199,13 +187,9 @@ WebTracking
|
|
|
199
187
|
- track() ---自定义代码埋点上报
|
|
200
188
|
- getDeviceId() ---获取设备唯一标识
|
|
201
189
|
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
<a name="WebTracking.init"></a>
|
|
205
190
|
### Init
|
|
206
|
-
<a name="Params"></a>
|
|
207
191
|
#### 参数
|
|
208
|
-
|
|
|
192
|
+
| **参数名** | **type** | **描述** | **是否必填** | **默认值** |
|
|
209
193
|
| --- | --- | --- | --- | --- |
|
|
210
194
|
| appKey | string | 应用唯一标识(由接口生成) | 是 | - |
|
|
211
195
|
| serverUrl | string | 数据接收地址 | 是 | - |
|
|
@@ -214,10 +198,11 @@ WebTracking
|
|
|
214
198
|
| useClientTime | boolean | 是否使用客户端系统时间 | 否 | true |
|
|
215
199
|
| sendTimeout | number | 接口发送超时时长,超过该时长未发送成功将强制取消 | 否 | 3000 |
|
|
216
200
|
| isTrackSinglePage | boolean | 是否采集单页面应用的路由变化 | 否 | false |
|
|
217
|
-
| siteId |
|
|
218
|
-
| contentType | string |
|
|
201
|
+
| siteId | numberstring | 站点 Id | 否 | - |
|
|
202
|
+
| contentType | string | application/json
|
|
203
|
+
application/x-www-form-urlencoded | 否 | application/x-www-form-urlencoded |
|
|
204
|
+
|
|
219
205
|
|
|
220
|
-
<a name="df0e1504"></a>
|
|
221
206
|
#### 例子
|
|
222
207
|
> 初始化 sdk 例子,建议在 src/App.js 中初始化,且需在**useLayoutEffect**中初始化。
|
|
223
208
|
|
|
@@ -243,23 +228,19 @@ const App = () => {
|
|
|
243
228
|
export default App;
|
|
244
229
|
```
|
|
245
230
|
|
|
246
|
-
|
|
247
|
-
<a name="EIsxL"></a>
|
|
248
231
|
### Preset
|
|
249
232
|
> 除了不可配置appKey、serverUrl,本质上和init差不多,这么做是为了更好的区分使用场景,不产生歧义。
|
|
250
233
|
|
|
251
|
-
<a name="qnIie"></a>
|
|
252
234
|
#### 参数
|
|
253
|
-
|
|
|
235
|
+
| **参数名** | **type** | **描述** | **是否必填** | **默认值** |
|
|
254
236
|
| --- | --- | --- | --- | --- |
|
|
255
237
|
| autoTrack | boolean | 是否开启全埋点(指的是:页面浏览、元素点击事件自动上报) | 否 | false |
|
|
256
238
|
| showLog | boolean | 是否在网页控制台打印发送的数据 | 否 | false |
|
|
257
239
|
| useClientTime | boolean | 是否使用客户端系统时间 | 否 | true |
|
|
258
240
|
| sendTimeout | number | 接口发送超时时长,超过该时长未发送成功将强制取消 | 否 | 3000 |
|
|
259
241
|
| isTrackSinglePage | boolean | 是否采集单页面应用的路由变化 | 否 | false |
|
|
260
|
-
| siteId |
|
|
242
|
+
| siteId | numberstring | 站点 Id | 否 | - |
|
|
261
243
|
|
|
262
|
-
<a name="mFBcr"></a>
|
|
263
244
|
#### 例子
|
|
264
245
|
```jsx
|
|
265
246
|
import React, { useLayoutEffect } from "react";
|
|
@@ -295,16 +276,12 @@ const App = () => {
|
|
|
295
276
|
export default App;
|
|
296
277
|
```
|
|
297
278
|
|
|
298
|
-
|
|
299
|
-
<a name="ivnlQ"></a>
|
|
300
279
|
### Login
|
|
301
|
-
<a name="j3Vbe"></a>
|
|
302
280
|
#### 参数
|
|
303
281
|
| 参数名 | type | 描述 | 是否必填 | 默认值 |
|
|
304
282
|
| --- | --- | --- | --- | --- |
|
|
305
|
-
| userId |
|
|
283
|
+
| userId | numberstring | 用户ID | 否 | - |
|
|
306
284
|
|
|
307
|
-
<a name="tN0S5"></a>
|
|
308
285
|
#### 例子
|
|
309
286
|
```jsx
|
|
310
287
|
import React, { useEffect } from "react";
|
|
@@ -326,11 +303,8 @@ const Test = () => {
|
|
|
326
303
|
export default Test;
|
|
327
304
|
```
|
|
328
305
|
|
|
329
|
-
<br />
|
|
330
306
|
|
|
331
|
-
<a name="z7aZJ"></a>
|
|
332
307
|
### GetDeviceId
|
|
333
|
-
<a name="zzyLD"></a>
|
|
334
308
|
#### 例子
|
|
335
309
|
> 获取设备唯一标识,单用户没有登录时即用户唯一标识
|
|
336
310
|
|
|
@@ -350,23 +324,18 @@ const Test = () => {
|
|
|
350
324
|
export default Test;
|
|
351
325
|
```
|
|
352
326
|
|
|
353
|
-
<br />
|
|
354
327
|
|
|
355
|
-
<a name="g6lIP"></a>
|
|
356
328
|
### Track
|
|
357
329
|
> 手动代码埋点上报
|
|
358
330
|
|
|
359
|
-
<a name="Params-1"></a>
|
|
360
331
|
#### 上报参数
|
|
361
|
-
|
|
|
332
|
+
| **参数名** | **type** | **描述** | **是否必填** | **默认值** |
|
|
362
333
|
| --- | --- | --- | --- | --- |
|
|
363
|
-
| partkey |
|
|
334
|
+
| partkey | numberstring | 上报事件 Key(由前后端协商定义或由后端接口生成,该应用下需唯一且具有一定意义,例:goods_detail_pv) | 是 | - |
|
|
364
335
|
| desc | string | 上报事件描述 | 否 | 自定义上报事件 |
|
|
365
336
|
| business | object | 上报的业务参数 | 否 | - |
|
|
366
337
|
|
|
367
338
|
|
|
368
|
-
|
|
369
|
-
<a name="88291229"></a>
|
|
370
339
|
#### 例子
|
|
371
340
|
```jsx
|
|
372
341
|
import React, { useEffect } from "react";
|
|
@@ -402,3 +371,62 @@ const Index = () => {
|
|
|
402
371
|
|
|
403
372
|
export default Index;
|
|
404
373
|
```
|
|
374
|
+
|
|
375
|
+
## 四、完整参数明细
|
|
376
|
+
### 4.1 request参数明细
|
|
377
|
+
| **参数名** | **type** | **描述** | **示例值** |
|
|
378
|
+
| --- | --- | --- | --- |
|
|
379
|
+
| appKey | string | 应用唯一标识(由接口生成) | - |
|
|
380
|
+
| event | string | 有四种类型的值:
|
|
381
|
+
PageViewPageRetainedCustomTrackWebClick | - |
|
|
382
|
+
| itemKey | string | 当前埋点事件Key | appkey.pagekey.partkey |
|
|
383
|
+
| serverUrl | string | 数据接收地址 | - |
|
|
384
|
+
| siteId | numberstring | 站点 ID | - |
|
|
385
|
+
| showLog | boolean | 是否在网页控制台打印发送的数据 | false |
|
|
386
|
+
| platform | string | 应用平台类型,如不传会自动获取
|
|
387
|
+
可选值:h5pc | - |
|
|
388
|
+
| autoTrack | boolean | 是否开启全埋点 指的是:页面浏览、元素点击事件自动上报 | true |
|
|
389
|
+
| useClientTime | boolean | (是否使用客户端系统时间)注意:客户端系统时间可能会不准确,导致该字段不准确 | true |
|
|
390
|
+
| requestTime | number | 发送请求事件 | - |
|
|
391
|
+
| sendTimeout | number | 接口发送超时时长,超过该时长未发送成功将强制取消,单位:毫秒 | 3000 |
|
|
392
|
+
| isTrackSinglePage | boolean | 是否采集单页面应用的路由变化 | false |
|
|
393
|
+
| contentType | string | 可选值:
|
|
394
|
+
application/json
|
|
395
|
+
application/x-www-form-urlencoded | application/x-www-form-urlencoded |
|
|
396
|
+
| privateParamMap | object | 私有参数 | [查看详情](#mWMBL) |
|
|
397
|
+
|
|
398
|
+
#### 4.2.1 privateParamMap参数明细
|
|
399
|
+
| **参数名** | **type** | **描述** | **示例值** |
|
|
400
|
+
| --- | --- | --- | --- |
|
|
401
|
+
| currentUrl | string | 当前URL | http://localhost:9999/main |
|
|
402
|
+
| targetUrl | string | 目标URL | http://localhost:9999/app/other |
|
|
403
|
+
| business | {[key: string]: any} | 手动埋点参数 | - |
|
|
404
|
+
| targetEle | TargetEleProps | 触发元素属性 | [查看详情](#YC74u) |
|
|
405
|
+
| pageWidth | number | 页面可视区宽度 | 1440 |
|
|
406
|
+
| pageHeight | number | 页面可视区高度 | 860 |
|
|
407
|
+
| screenWidth | number | 显示屏宽度 | 1440 |
|
|
408
|
+
| screenHeight | number | 显示屏高度 | 860 |
|
|
409
|
+
| pointerType | string | 手动触发的指针类型 | mouse、touch、pen |
|
|
410
|
+
| elementSelector | string | 触发元素链路 | #root > div:nth-of-type(1) > div:nth-of-type(1) > h1:nth-of-type(1) |
|
|
411
|
+
| userInfo | {[key: string]: any} | 用户信息 | {userName: "啊盛", userId: 1001} |
|
|
412
|
+
| urlParams | string | 路由参数 | - |
|
|
413
|
+
| systemsInfo | SystemsInfoTypes | 系统信息 | [查看详情](#VHfQH) |
|
|
414
|
+
| sdkVersion | string | 埋点SDk版本 | 1.0.0 |
|
|
415
|
+
| retainedDuration | number | 页面停留时长(毫秒) | 2000 |
|
|
416
|
+
|
|
417
|
+
#### 4.2.2 TargetEleProps参数明细
|
|
418
|
+
| **参数名** | **type** | **描述** | **示例值** |
|
|
419
|
+
| --- | --- | --- | --- |
|
|
420
|
+
| nodeName | string | dom节点名称 | BUTTON |
|
|
421
|
+
| id | string | id类名 | main_btn |
|
|
422
|
+
| className | string | class类名 | fx-primary-btn |
|
|
423
|
+
| position | [number, number] | 元素触发位置:[x, y] | [100, 200] |
|
|
424
|
+
|
|
425
|
+
#### 4.2.3 SystemsInfoTypes参数明细
|
|
426
|
+
| **参数名** | **type** | **描述** | **示例值** |
|
|
427
|
+
| --- | --- | --- | --- |
|
|
428
|
+
| language | string | 系统语言 | zh-CN |
|
|
429
|
+
| network | string | 网络类型 | - |
|
|
430
|
+
| ua | string | userAgent | Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36 |
|
|
431
|
+
| client | string | 客户端(Mac/Android/iPhone/iPad/iPod/WeChat) | Mac, MacOS 10.15.7 |
|
|
432
|
+
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fle-sdk/event-tracking-web",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.2-alpha.0",
|
|
4
4
|
"description": "event tracking in web",
|
|
5
5
|
"author": "飞象前端团队",
|
|
6
6
|
"license": "ISC",
|
|
@@ -56,7 +56,7 @@
|
|
|
56
56
|
"typescript": "^4.3.4"
|
|
57
57
|
},
|
|
58
58
|
"dependencies": {
|
|
59
|
-
"@fle-sdk/event-tracking-web": "^1.1.
|
|
59
|
+
"@fle-sdk/event-tracking-web": "^1.1.2-alpha.0"
|
|
60
60
|
},
|
|
61
|
-
"gitHead": "
|
|
61
|
+
"gitHead": "81274fc4455644eb631a0e9d7ed59d950dcca234"
|
|
62
62
|
}
|