monitor-ztz-前端数据埋点 SDK

一、为什么需要此功能：

        最近在做项目时，需求记录用户的点击量，就想到了前端埋点，在GitHub上找到这个开源项目推荐给大家。此项目支持✔️ PV/UV 统计 ✔️ 自定义埋点上报 ✔️ 错误捕获 ✔️ 性能指标上报。

二、实现 

github | npm | 文档

 方式一：推荐✨✨✨✨✨

npm i monitor-ztz

 方式二：可以clone该项目后，根据自己的需求做适当调整，或直接npm run build生成dist包，在项目中引入index.js

三、主要代码

        因为我需要额外的传递一些参数，所以有对源代码进行修改，便采取了第二种方式。

在main.js中引入打包生成的monitor-ztz.js

import Monitor, { reportTracker, setUserId } from "@/utils/monitor-ztz"

const monitor = new Monitor({
  appId: "你的项目id，用于区分项目",
  requestUrl: "上传地址",
  routerTracker: true, //是否开启pv/uv统计，注意：没有通过setUserId手动设置过只会统计pv
  domTracker: true, //是否开启鼠标事件比如click dbclick contextmenu的打点上报
  jsError: true, //是否开启错误捕获上报
  performanceTracker: true //是否开启性能指标上报
})

        setUserId的时机可在用户登录时获取到用户信息后调用 

四、点击事件上报方式

        我项目中需要记录菜单节点的点击量，且使用Element Plus组件支持透传，具体实现根据自己项目需求实现

<el-menu-item :tracker-key="item.meta.title">{{item.meta.title}}</el-menu-item>

        同时SDK提供了手动上报的方式，我这里用来在用户刷新或关闭浏览器时以及切换选项卡时手动上报

const handleBeforeunload = ()=>{
    reportTracker(
        {
          stayTime: monitor.calcStayTime() / 1000,
          currentPage: window.location.href,
          prePage: window.location.href
        },
        "UV"
      )
}
window.addEventListener("beforeunload", handleBeforeunload);

document.addEventListener('visibilitychange', () => { // 浏览器tab切换监听事件
  if (document.visibilityState === 'visible') { // 状态判断：显示（切换到当前页面）
    monitor.pageStartTime = monitor.getTime()
  } else if (document.visibilityState === 'hidden') { // 状态判断：隐藏（离开当前页面）
    beforeunloadHandler()
  }
})

另外监控错误警告和页面性能的功能大家可以自己尝试使用