H5全面埋点组件
关注微信公众号 阿勇学前端
全埋点组件特点:
- 不入侵业务项目代码(不需要在页面中写代码，只需要在main.js引入，传参数配置即可使用)
- 通过配置采集所有交互交互行为(采集数据类型如下)
- 页面性能(页面所有资源加载性能，页面渲染性能)数据分析与采集(采集数据类型如下)
- 采集的数据上传(传入公司服务器请求配置即可进行数据统一上传,也可操作存储的采集数据自定义上传)
- 可搭配业务项目之前的代码埋点采集调用组件tack方法存储数据与全埋点组件数据进行共同存储
目前兼容框架有 uniapp vue2.0 vue3.0 react；
微信小程序框架目前未做兼容， 阿勇正在玩命开发...
更新日志公告🪧以 微信公众号为主 ⚠️⚠️⚠️！！！ (关注公众号) => 阿勇学前端
安装下载
yarn add monito-action
埋点组件采集数据字段介绍、采集数据分三类
-
交互数据: 点击文案 与绑定的业务数据
-
页面数据&&性能数据 页面所有资源加载性能时间分析
-
通用数据:包含 项目信息 设备硬件信息 用户位置。交互数据与页面数据
用户交互信息介绍
| 字段介绍 | 类型 | 说明 |
|---|---|---|
| id | string | 数据唯一id |
| actionType | string | 采集类型 见下方详情 |
| elementText | string | 用户交互节点文案(actionType=click时才有) |
| ....业务数据 | string | 插入当前文案所绑定的业务数据,使用方式见 组件init 方法调用 |
页面采集数据
| 字段介绍 | 类型 | 说明 |
|---|---|---|
| actionType | string | 采集类型 见下方详情 |
| DNS | number | nsc时长 |
| DOM | number | dom渲染时长 |
| Load | number | 页面加载时长 |
| TCP | number | tcp请求时长 |
| WhitecrSeend | number | 白屏时长 |
| allResourceLoad | Indicators[] | 项目所以资源加载(图片,JS,link,CSS)时间 |
| entetTim | number | 页面进入时间戳 |
| leaveTime | number | 页面离开时间戳 |
| remainTime | number | 页面停留时间 |
| oldURL | string | 跳转前的页面 |
通用信息介绍
| 字段介绍 | 类型 | 说明 |
|---|---|---|
| pageUrl | string | 当前页面路径 |
| projectName | string | 项目名称 |
| userInfo | userInfo | 一般信息 |
| availHeight | string | 屏幕高度 |
| availWidth | string | 屏幕宽度 |
| resolution | string | 屏幕像素 |
| systemType | string | 系统类型 |
| phoneBrand | string | 手机品牌 |
| phoneVision | string | 手机系统版本 |
| position | string | 定位信息 （定位失败时候是 报错信息） 默认不获取定位信息, 获取定位需要在组件使用时传入参数配置详情见使用方式 |
采集类型actionType字段介绍
| 字段介绍 | 类型 | 说明 |
|---|---|---|
| click | string | 用户点击 |
| pageLoad | string | 页面加载 |
| pagejump | string | 页面跳转 |
| pageBack | string | 页面返回 |
当前页面首次所有资源加载性能allResourceLoad字段介绍
| 字段介绍 | 类型 | 说明 |
|---|---|---|
| name | string | 资源加载地址 |
| duration | number | 页面加载 |
使用方式 1下载 2引入 3调组件init()方法传入参数即可使用
一 : 下载
在项目没有package.json情况下需要
npm init -y
npm install monito-action
// 或
//yarn add monito-action
二 :新建js文件引入组件使用并导出实例对象(vue3.0示例)
init方法调用示例
新建J S文件并导出实例对象原因 是因为,在Vue3中没有this, 实例对象中的tack方法必须通用过引入JS文件调用
如果是vue2项目可直接在main.js引入 ,通过挂载全局对象,在页面中使用this进行调用
Vue.prototype.$monitoAction = monitoAction;
import MonitoAction from 'monito-action';
export const monitoAction = new MonitoAction();
monitoAction.init({
frameType:'vue',
reques:{
requestUrl:'http://www.liulongbin.top:3006/api/post',
requerequesKeysHeader:{},
requesKey:'value',
maxRequesGatewayLength:3,
},
showLog: true,
monitoSwitch: true,
isPosition: true,
userInfo:{
userCode:'1540018883'
},
projectName: '全埋点组件',
globaMonitoConfigList: [{
elementText: 'Hello',
elementEevent: '',
},{
elementText: 'add',
elementEevent: '',
}, ],
globaMonitoImgList:[
{imgSrc:'ayong.jpeg',businessData:'1号广告位置'}
]
})
export default monitoAction
在 main.js该js文件(vue3.0示例)
import {createApp} from 'vue';
import App from './App.vue';
import './action'
const app = createApp(App);
app.use(router).use(ElementPlus).use(store).mount('#app');
三:tack方法方法介绍 主要用于JS方法采集数据、代码埋点调用组件实例方法进行数据存储，方法如参数随意搭配
<<template>>
<div @click="monitoAction.track({actionType:(+ new Date()).toString()})">tack</div>
</template>
<script lang="ts" setup>
import monitoAction from '../../action'
</script>
四:init入参方法介绍
| 字段名 | 类型 | 是否必传 | 介绍 |
|---|---|---|---|
| frameType | FrameType | 必传 | 项目框架类型;见下方详情 FrameType介绍 |
| globaMonitoConfigList | MonitoList[ ] | 必传 | 埋点采集配置列表;见下方详情 MonitoList介绍 |
| userInfo | UserInfo | 必传 | 一般信息;见下方详情userInfo介绍 |
| projectName | string | 必传 | 项目名称 |
| reques | Reques | 非必传 | 上报数据入参 reques介绍 |
| monitoSwitch | Boolean | 非必传 | 是否开启埋点 默认开启 true |
| showLog | Boolean | 非必传 | 是否打印日志 默认false不打印 |
| isPosition | Boolean | 非必传 | 是否获取定位信息 默认不获取 fasle (获取定位用户页面会收到是否获取定位的系统弹框) |
| globaMonitoImgList | ImgList[] | 非必传 | 项目图片交互数据采集 数据格式详情ImgList介绍 |
FrameType框架类型字段介绍
| 值 | 类型 | 介绍 |
|---|---|---|
| 'vue' | string | Vue2 vue3 框架兼容 |
| 'react', | string | react 框架兼容 |
| 'uniapp' | string | Uniapp 编译H5兼容 ⚠️不包括uniapp编译小程序 |
| 'wx', | string | 1.0.0当前版本暂不支持wx框架 |
MonitoList埋点采集配置列表字段介绍
| 值 | 类型 | 介绍 |
|---|---|---|
| elementText | string | 需要采集的dom节点文案 |
| ... | any | 该dom节点的其他业务数据；字段名直接增加即可 示例如下 |
const globaMonitoConfigList: [{
elementText: '登陆',
businessData: '这是登陆按钮的业务数据',
},{
elementText: '查看信息',
businessData: '这是查看信息按钮的业务数据',
}, ]
monitoAction.init({
...
globaMonitoConfigList,
....
})
ImgList图片埋点采集配置列表字段介绍
| 值 | 类型 | 介绍 |
|---|---|---|
| imgSrc | string | 需要采集的图片文件名（包含文件后缀） |
| ... | any | 该图片的其他业务数据；字段名直接增加即可 示例如下 |
const globaMonitoConfigList: [{
imgSrc: 'star.jpeg',
businessData: '这是星星图片业务数据',
},{
imgSrc: 'pasword.png',
businessData: '这是验证码图片业务数据',
}, ]
monitoAction.init({
...
globaMonitoConfigList,
....
})
userInfo埋点采集配置列表字段介绍
| 值 | 类型 | 介绍 |
|---|---|---|
| useCode | string | 唯一字符 (主要用于采集数据本地存储时 数据库名唯一) |
reques埋点采集配置列表字段介绍
| 值 | 类型 | 介绍 |
|---|---|---|
| requestUrl | string | 上报数据地址,不配置组件只采集数据并存储将不会上传, 需要开发人员自定义上传;自定义上传数据需要操作采集数据方式见下方详情 |
| requesHeader | Object | 上传请求头:例如token,后端身份验证参数 使用示例 |
| requesKey | string | 上传数据时与公司服务器后端接收字段,默认值 : value 例如 {[requesKey]:采集数据} 使用示例 |
| maxRequesGatewayLength | Number | 最大存储量(单位/条)上传;默认10,例如采集10条数据后将进行上传,设置为1时将实时上传,在不传requestUrl字段时需要实时获取采集数据,进行自定义上传数据 操作采集数据方式见下方详情 |
操作上传数据代码示例
需要监听组件发出的订阅事件 monito
window.addEventListener('monito', async res => {
const allData = await res.detail.getAllData();//获取所有数据
const countData = await res.detail.getCountData();//获取数据量条数
/****
* 自定义上传数据网络请求
**/
const clearData = await res.detail.clearData(); //删除所有数据
});
