scc-tracker
v1.0.1
Published
``` pnpm init pnpm add typescript rollup rollup-plugin-dts rollup-plugin-typescript2 -D npx tsc --init ```
Downloads
1
Readme
初始化项目
安装依赖
pnpm init
pnpm add typescript rollup rollup-plugin-dts rollup-plugin-typescript2 -D
npx tsc --init
设计项目结构
- src
- core
- types
- utils
- package.json
- rollup.config.js
- tsconfig.json
- server.js # 模拟数据上报接口服务
配置 rollup.config.js
打包输出 es/cjs/umd 三种格式
package.json 配置编译脚本
# pnpm build 打包
"scripts": {
"build": "rollup -c --bundleConfigAsCjs"
},
核心思想
1 pv 数据 要监听页面 url 变化 单页应用时要重写 history 上的几个方法 2 数据发送通过 navigator.sendBeacon(页面关闭也会发送请求)。 而不是通过传统的 fetch/XHR 3 DOM 事件监听通过自定义 scctag 属性设置 4 错误上报通过监听 window 的 error 及 promise 的 unhandledrejection 事件
使用
<!-- js引入 -->
<script src="./dist/index.js"></script>
<script>
// 实例化
const track = new SccTracker({
requestUrl: " http://localhost:8888/api/tracker",
hashTracker: true,
uuid: "uuid_xxxx",
})
// js手动上报
track.sendTracker({})
</script>
<!-- dom设置上报属性数据 -->
<button id="bnt2" scctag="gggg|ffff">scctag上报</button>