欢迎光临散文网 会员登陆 & 注册

小满 前端埋点SDK 带你 从0 开发 并且发布npm

2022-07-24 18:27 作者:小满zs  | 我要投稿

埋点就是 数据采集-数据处理-数据分析和挖掘,如用户停留时间,用户哪个按钮点的多,等

技术架构使用ts + rollup

使用ts主要是在编译过程中发现问题,减少生产代码的错误,

使用rollup 应为 rollup打包干净,而webpack非常臃肿,可读性差,所以rollup非常适合开发SDK和一些框架,webpack 适合开发一些项目


1.目录结构设计

2.安装开发依赖

3.配置rollup config js

4. src type 定义类型

5.src core 核心功能

PV:页面访问量,即PageView,用户每次对网站的访问均被记录

主要监听了 history 和 hash

history 无法通过 popstate 监听  只能重写其函数 在utils/pv

hash 使用hashchange 监听

UV(独立访客):即Unique Visitor,访问您网站的一台电脑客户端为一个访客

用户唯一表示 可以在登录之后通过接口返回的id 进行设置值 提供了setUserId

也可以使用canvas 指纹追踪技术 指纹视频

本章重点 navigator.sendBeacon

为什么要使用这个去上报

这个上报的机制 跟 XMLHttrequest 对比  navigator.sendBeacon 即使页面关闭了 也会完成请求 而XMLHTTPRequest 不一定

DOM事件监听

主要是给需要监听的元素添加一个属性 用来区分是否需要监听 target-key

6.工具函数 src/utils/pv

7.设置package json 

main  module 分别设置对应的js文件

files 设置打包之后的目录 我这儿是dist 具体看rollup config .js

8.发布npm

tips:一定要使用npm 的源  不能使用淘宝镜像 否则 报错403

1.npm adduser

用户名 密码 邮箱 邮箱验证码

2. npm login  

输入刚才的 用户名 密码 邮箱 验证码

3.npm publish 发布

发布的时候403 有可能是名字重复注意一下

4.npm 官网查看

https://www.npmjs.com/package/zmy-tracker



小满 前端埋点SDK 带你 从0 开发 并且发布npm的评论 (共 条)

分享到微博请遵守国家法律