Features

✔️ PV 统计（页面浏览量/点击量）

✔️ UV 统计

✔️ 自定义埋点上报

✔️ 错误捕获（目前只对 JS、Promise 错误进行上报）

❌ 性能指标上报（后续迭代）

安装

方式一：推荐✨✨✨✨✨

npm i jolyne_tracker

方式二： npm run build 后生成 dist 包，直接在项目中引入 dist 包下的 index.js 即可

使用

import Tracker from "jolyne_tracker"

const tracker = new Tracker({
  appId: "项目id", //必填 
  requestUrl: "数据上报地址", //必填
  uuid: "", //可选，用户 ip 或者唯一标识，若没有传入，则上报时 uuid 为 undefined，且只会统计 pv
  routerTracker: "history" || "hash", //可选，开启 pv/uv 统计，路由切换方式为 history 或者 hash，
  domClickTracker: true, //可选，是否开启鼠标事件，比如click dbclick contextmenu 的打点上报
  version: "1.0.0", //可选，版本号
  jsError: true, //可选，开启 JS、Promise 错误上报
})

reportTracker 用于手动上报

tracker.reportTracker(data) data上传的数据，data 必传项: {trackerKey: "string"}

点击事件上报方式

① 组件库支持属性透传时自动上报

<Button tracker-key="tracker001">点击我自动上传埋点</Button>

目前已知不支持属性透传的组件库 vant

② 组件库不支持属性透传时可使用 reportTracker 手动上报

  <Button onClick={selfTracker}>点击我手动上传埋点</Button>

  const selfTracker = () => {
    tracker.reportTracker(
      {
        trackerKey: "tracker002", // 必传项
        event: "click"
      },
    )
  }

若没有设置 tracker-key，需手动上报

addExternalOptions 使用时机

tracker.addExternalOptions({}) 当您的项目需要额外上传数据时，请使用它

比如点击事件埋点时：

① 若设置了 trakcer-key

   <Button 
    tracker-key="tracker004"
    onClick={() => {
      tracker.addExternalOptions({
        name: "lxq",
        age: 23,
      })
    }}>
      上传额外参数
    </Button>

  /*
    此时，上传的数据为：
    {
      name: "lxq",
      age: 23,
      trackerKey: "tracker004",
      event: "click"
    }
  */

注意：若没有设置 tracker-key，此时直接通过 reportTracker 手动上报即可，不要调用 addExternalOptions

   <Button
    onClick={() => {
      tracker.reportTracker({
        name: "lxq",
        age: 23,
        trackerKey: "click_button_by_myself", // 必传项
        event: "click"
      })
    }}>
      上传额外参数
    </Button>
     /*
    此时，上传的数据为：
    {
      name: "lxq",
      age: 23,
      trackerKey: "click_button_by_myself", // 必传项
      event: "click"
    }
  */