visual-buried-point-platform-h5 1.3.5 → 2.0.1

package/README.md

@@ -2,13 +2,16 @@
 # 可视化埋点JS SDK接入指南
 
 ### SDK更新日志
-- 1.2.0 新增页面浏览时长统计功能、优化埋点精度、统计事件绑定用户标识等;
-- 1.2.7 新增可自定义事件埋点接口、增加元素名称、访问途径等采集;
-- 1.2.8 新增PV/UV统计、元数据配置，访问链路追踪等;
-- 1.3.2 新的数据结构和修改PV/UV流量上报方式;
-- 1.3.3 自定义埋点数据结构增加page对象和事件标识符eventCode;
-- 1.3.4 调整SDK上报接口入参、删除appkey参数配置;
-- 1.3.5 上报数据结构增加url;
+- v1.2.0 新增页面浏览时长统计功能、优化埋点精度、统计事件绑定用户标识等;
+- v1.2.7 新增可自定义事件埋点接口、增加元素名称、访问途径等采集;
+- v1.2.8 新增PV/UV统计、元数据配置，访问链路追踪等;
+- v1.3.2 新的数据结构和修改PV/UV流量上报方式;
+- v1.3.3 自定义埋点数据结构增加page对象和事件标识符eventCode;
+- v1.3.4 调整SDK上报接口入参、删除appkey参数配置;
+- v1.3.5 上报数据结构增加url;
+- v1.3.6 调整上报数据结构circulation和duration计算规则;
+- v2.0.0 调整SDK内部PVUV采集模式，分原有start方法采集及自动采集，支持获取埋点sdk内的跟踪ID；【详见1，3，4，7，10】
+
 
 ### 1.基本原理
 
@@ -40,112 +43,59 @@ Web SDK 的原理，主要是通过原生 JavaScript 代码，去监控页面的
 
 <!-- // TODO:lodash -->
 
-## 用法
+## 1.用法
 
-token在可视化埋点后台申请
+### 一、 npm | yarn、并添加配置文件	buried-point.ts ，或者直接导入	buried-point-h5.js	包
 
-### 方法一  npm | yarn、并添加配置文件	buried-point.ts
 ```javascript
-npm i visual-buried-point-platform-h5 -S --registry=http://verdaccio.gogdev.cn/
-
 yarn add visual-buried-point-platform-h5 --registry=http://verdaccio.gogdev.cn/
-```
 
-### 方法二 、导入	buried-point-h5.js	包，并添加配置文件	buried-point.ts【推荐】
-```js
-import * as BuriedPointH5 from 'visual-buried-point-platform-h5';
-ts declare module 'visual-buried-point-platform-h5';
-
-export const buriedPoint = new BuriedPointH5({
-  //配置
-  token: 'xxx',
-  environment: 'test',
-  reportUrl: ''
-  ...
-  ...
-})
-
-// uniapp兼容写法
-import * as BuriedPointH5 from 'visual-buried-point-platform-h5';
-const BP = BuriedPointH5.default || BuriedPointH5
-export const buriedPoint = new BP({
-  //配置
-  token: 'xxx',
-  environment: 'test',
-  reportUrl: ''
-  ...
-  ...
-})
+npm i visual-buried-point-platform-h5 -S --registry=http://verdaccio.gogdev.cn/
 ```
 
-## 添加buried-point.ts配置文件
+### 二 、添加buried-point.ts配置文件
 
 - 注：t_name、token、t_version 对应修改
 
-```js
-// import * as BuriedPointH5 from 'visual-buried-point-platform-h5';
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const BuriedPointH5 = require("./buried-point-h5.js");
-export const BuriedPoint = new BuriedPointH5({
-  /** 上报地址（可选） */
-  reportUrl: 'http://localhost:8000',
+```javascript
+// eslint-disable-next-line
+// const BuriedPointH5 = require("./buried-point-h5.js");
+import BuriedPointH5 from "visual-buried-point-platform-h5";
+export const buriedPoint = new BuriedPointH5({
   /** 上报参数。需填入管理端生成的token 与 ·enableJavaScriptBridge·字段互斥 */
   token: '',
-  /** appkey （可选）*/
-  appkey: '';
+  // 页面载体环境
+  ecology: "",
+  /** domain */
+  domain: "",
   /** 业务板块  （可选）*/
   busSegment: '';
   /** 业务模块 （可选）*/
   module: '';
-  // app版本
-  appVersion: '1.0.0',
-  // 环境 取值 `dev` `test` `prod`。当开启环境配置参数后上报地址随环境变化 可以不配置上报地址
-  environment: 'dev',
-  // 脚本延迟上报时间
-  outtime: 3000,
+  // 环境 取值 `test` `prod`。当开启环境配置参数后上报地址随环境变化 可以不配置上报地址
+  environment: 'test',
   // 开启单页面？
   enableSPA: true,
-  // 是否自动上报pv
-  autoSendPv: true,
-  // 是否上报页面性能数据
-  isPage: true,
-  // 是否上报ajax性能数据
-  isAjax: true,
-  // 是否上报页面资源数据
-  isResource: true,
-  // 是否上报错误信息
-  isError: true,
-  // 是否录屏
-  isRecord: true,
-  // 是否上报行为
-  isBehavior: true,
-  // 是否开启了CSS HASH值，(默认开启) [针对商品列表情况埋点，建议false]
+  // 是否开启了CSS HASH值，(默认开启) [针对有商品列表多的情况，建议false]
   isOpenCSSHash: true,
   // 业务线流量上报的应用 name 
   t_name: '购物',
   // 业务线流量上报的当前应用 version
   t_version: 'v1.0.0',
-  ignore: {
-    ignoreErrors: [],
-    ignoreUrls: [],
-    ignoreApis: ['/api/v1/report/web', 'livereload.js?snipver=1', '/sockjs-node/info'],
-  },
-  behavior: {
-    console: ['log', 'error'], // 取值可以是"debug", "info", "warn", "log", "error"
-    click: true,
-  },
-  // 最长上报数据长度
-  maxLength: 1000,
   // Web JS SDK 的 H5 页面，在嵌入到 App 后，H5 内的事件可以通过 App 进行发送 默认关闭
   // 当开启次字段配置 token字段失效 打通APP上报数据依据所在环境判断  必须配置 androidToken与iosToken字段
   enableJavaScriptBridge: false,
   // 打通H5与APP通信后，上报数据ID
   androidToken: null,
-  iosToken: null
+  iosToken: null,
+  // 是否兼容已埋点方案，true兼容（业务方需调用start方法采集PV流量），false不兼容（SDK内部自动采集，但前提业务方需要预置参数）
+  isCompatible: true
+  // 需要单独采集的页面path，设置isCompatible为false使用
+  signTrackPathArray: ["/home", "/personal-auth"],
 });
 ```
 
-## 初始化
+## 2.初始化【可省略】
 
 ```javascript
 // buried-point-h5.js和buried-point.ts放入utils文件夹中
@@ -153,24 +103,57 @@ export const BuriedPoint = new BuriedPointH5({
 import "./utils/buried-point";
 ```
 
-##  3.设置绑定用户ID
+## 3.设置当前页面自动采集PVUV数据
 
 ```js
+//在任意页面
+import { buriedPoint } from '@/utils/buried-point';
+//vue
+onMounted(async () => {
+  buriedPoint.setPageExtraObj(
+    {
+      properties: {test: '123'}, //扩展参数
+      busSegment: '8', //业务板块
+      module: '4', //业务模块
+    }
+  )
+})
+//react
+useEffect(() => {
+    buriedPoint.setPageExtraObj({
+      properties: {test: '123'}, //扩展参数
+      busSegment: '8', //业务板块
+      module: '4', //业务模块
+    })
+}, [])
+```
+
+## 4.获取埋点SDK内跟踪ID
+
+```js
+import { buriedPoint } from '@/utils/buried-point';
+buriedPoint.getTrackId()
+```
+
+##  5.设置绑定用户ID
+
+```js
+import { buriedPoint } from '@/utils/buried-point';
 // 应用登录成功后，调用下面API设置用户ID，后续产生的统计事件将会与该用户关联起来
 buriedPoint.setUserInfo(xxxx)
 ```
 
-## 4.自定义上报
+## 6.自定义上报
 
-### 4.1 自定义埋点事件对接可视化埋点平台说明
+### 6.1 自定义埋点事件对接可视化埋点平台说明
 
-#### 4.1.1 事件名称规范：
+#### 6.1.1 事件名称规范：
 
 - 事件名称需按照事件类型_元素名称/页面名称_平台规则填写，例如“浏览_首页_ web”“点击_xxx商品_ web”
 
 - 事件名称需唯一
 
-#### 4.1.2 事件类型：
+#### 6.1.2 事件类型：
 
 - 事件类型仅能选择可视化埋点提供的事件类型，各个事件类型的触发、上报由各自定义埋点业务平台自行确认，事件类型包括以下四种：
 
@@ -182,7 +165,7 @@ buriedPoint.setUserInfo(xxxx)
 
 - **浏览事件【 browse 】**
 
-#### 4.1.3自定义埋点事件包含事件内容说明：
+#### 6.1.3自定义埋点事件包含事件内容说明：
 
 - 事件ID
 
@@ -194,7 +177,7 @@ buriedPoint.setUserInfo(xxxx)
 
 - 扩展参数，参数内容为自定义埋点平台自行定义，该事件需要额外传到可视化平台上的事件内容，以json字符串方式上传；json字符串长度限制为500字符，大于500字符参数可正常上报，做截断展示。
 
-## 5.设置自定义上报
+## 7.设置自定义上报
 
 ```javascript
 // 调用自定义上报
@@ -208,25 +191,23 @@ data: json字符串
     $extend_param: 扩展参数(JSON) [ 非必填字段(建议根据业务需求填上) ]
     $event_code: 事件标识符 【必填字段，建议根据业务填上， 否则数据统计可能出现缺失】
     $page: 当前页对象 【非必填字段，建议根据业务填上， 否则数据统计可能出现缺失】
-    $path: 埋点组件的路径 【必填字段，建议根据业务填上， 否则数据统计可能出现缺失】
 }
 // 参考例子：【搜素事件】
 import { BuriedPoint } from "@/utils/buried-point";
 const params = { 
     $event_id: "3156566905601572864", 
+    $event_code: "",
     $busSegment: 1,
     $module: 1, 
     $extend_param: { 
         title: "自定义[搜索事件]上报-搜索_首页搜索框", 
         searchContent: "猕猴桃"
     },
-    $event_code: "",
     $page: {
       domain: "",
       path: "",
       title: "",
     },
-    $path: "",
 }
 buriedPoint.setCustomEvent(params)
 ```
@@ -241,7 +222,7 @@ busSegment     module
 2.民宿/酒店  	1.民宿 2.酒店
 ```
 
-## 6、流量上报
+## 8、流量上报
 
 - sdk初始化后，可通过**onStartTrack(params)** 方法注册上报流量，并为上报添加属性值：
 
@@ -286,7 +267,7 @@ buriedPoint.onStartTrack(params)
 buriedPoint.onDestroyTrack()
 ```
 
-## 6、批量创建事件ID
+## 9、批量创建事件ID
 
 ## main.py
 
@@ -330,9 +311,9 @@ pip install requests
 
 先执行 `batchCreate` 方法将数据推到埋点后台管理系统中，再执行 `batchWrite` 方法，将后台管理中的数据写入到本地文件中
 
-#### 4、执行脚本
+### 4、执行脚本
 
-##### 方式一（推荐）
+#### 方式一（推荐）
 
 在命令后增加**业务模块文件夹**名称，自动执行该文件夹下的参数文件
 
@@ -426,11 +407,20 @@ export default connect(({trade}) => {
 
 ##### 云测管理端地址
 
-- chameleon.gcongo.com.cn
+- https://chameleon.gcongo.com.cn
 
 #### 8、SDK 文档
 
 http://verdaccio.gogdev.cn/-/web/detail/visual-buried-point-platform-miniprogram
 
+## 10 问题记录
+
+1、在buried-point.ts配置文件中，提示无法找到模块“visual-buried-point-platform-h5”的声明文件。
+
+在src下创建文件shims-vue.d.ts或者typings.d.ts，写入如下：
+
+declare module '@/utils/buried-point-h5.js';
+declare module 'visual-buried-point-platform-h5';
+