埋点项目 | FunEnn

[toc]

参考文章：

埋点tracker：前端数据埋点-方案设计思路梳理-阿里云开发者社区 (aliyun.com)

小满前端埋点SDK 带你从0 开发并且发布npm_前端监控sdk怎么发布npm-CSDN博客

javascript - 前端埋点sdk封装 - 山外de楼 - SegmentFault 思否

1、什么是埋点

埋点是一种前端技术，也称为数据埋点或事件埋点。它用于在应用程序或网站中插入特定的代码，以记录用户行为、操作和事件。通过在关键位置插入埋点代码，开发人员可以捕获和跟踪用户与应用程序的交互行为。这些行为可以包括访问数（Visits），访客数（Visitor），停留时长（Time On Site），页面浏览数（Page Views）和跳出率（Bounce Rate）。这样的信息收集可以大致分为两种：页面统计，统计操作行为。

2、埋点的作用

收集用户行为数据、分析用户习惯、提供数据支持、优化产品体验、提高转化率

3、监控类型

3.1 数据监控（监控用户行为）

3.2 性能监控（监控页面性能）

3.3 异常监控（监控产品、系统异常）

大家都该学学的埋点概念与使用😎 为了让读者能够从头到尾彻底学会埋点，我会分别从埋点的概念与使用、如何实现一个埋点 s - 掘金 (juejin.cn)

4、埋点上报

实现前端监控，第一步是将我们要监控的事项（数据）给收集起来，再提交给后台进行入库，最后再给数据分析组进行数据分析

常见的埋点上报方法有三种：手动埋点、可视化埋点、无埋点

分类	手动埋点	可视化埋点	无埋点（全埋点/自动埋点）
原理	按需埋点，跟迭代运行，定义好埋点事件后添加相应埋点代码	将核心代码与埋点配置分开，在可视化界面中编辑埋点信息生成埋点配置，从服务端拉取配置，根据配置监听相关交互操作并采集上报	通过SDK将程序中的数据尽可能多的采集、存储下来，以备后续使用
常见场景	无痕埋点无法覆盖到，比如需要业务数据	简单规范的页面场景	简单规范的页面场景
优势	可以在任意时刻，精确的发送或保存所需要的数据信息	开发成本低，运营人员可直接进行相关埋点配置	由于采集的是全量数据，所以产品迭代过程中是不需要关注埋点逻辑的，也不会出现漏埋、误埋等现象
不足	工作量较大，每一个组件的埋点都需要添加相应的代码	可视化埋点可以埋点的控件有限，不能手动定制	无埋点采集全量数据，给数据传输和服务器增加压力无法灵活的定制各个事件所需要上传的数据
典例	友盟、百度统计	Mixpanel	GrowingIO

5、哪些事件需要埋点

事件	描述
click	点击事件，打开页面
search	搜索事件
download	下载事件
save	修改、保存
view	查看事件、查看数据详情
refund	退款事件
create	新增事件
login	登录事件
logout	退出事件

6、Q&A

前端埋点的基础指标有哪些？

前端埋点的基础指标包括页面PV、UV、页面停留时间、页面跳出率、用户行为路径、用户点击量、错误率等。

前端埋点的业务指标有哪些？

前端埋点的业务指标包括页面PV、UV、页面停留时间、用户行为路径、用户转化率、页面加载时间、错误率、用户留存率等

UV（Unique visitor）

是指通过互联网访问、浏览这个网页的自然人。访问您网站的一台电脑客户端为一个访客。00:00-24:00内相同的客户端只被计算一次。一天内同个访客多次访问仅计算一个UV。

IP（Internet Protocol）

独立IP是指访问过某站点的IP总数，以用户的IP地址作为统计依据。

PV（Page View）

即页面浏览量或点击量，用户每1次对网站中的每个网页访问均被记录1个PV。

VV（Visit View）

用以统计所有访客1天内访问网站的次数。

性能 - Web API |MDN 系列 --- Performance - Web API | MDN (mozilla.org)

字段	描述	计算方式	意义
unload	前一个页面卸载耗时	unloadEventEnd - unloadEventStart	-
redirect	重定向耗时	redirectEnd - redirectStart	重定向时间
appCache	缓存耗时	domainLookupStart - fetchStart	读取缓存的时间
dns	DNS 解析耗时	domainLoopupEnd - domainLookupStart	观察域名解析服务是否正常
tcp	TCP 连接耗时	connectEnd - connectStart	建立连接的耗时
ssl	SSL 安全连接耗时	connectEnd - secureConnectionStart	反映数据安全连接建立耗时
response	响应数据传输耗时	responseEnd - responseStart	观察网络是否正常
dom	DOM 解析耗时	domInteractive - responseEnd	观察 DOM 结构是否合理，是否有 JS 阻塞页面解析
dcl	DOMContentLoaded 事件耗时	domContentLoadedEventEnd - domContentLoadedEventStart	当 HTML 文档被完全加载和解析之后，DOMContentLoaded 事件被触发，无需等待样式表、图像的完成加载
resources	资源加载耗时	domComplete - domContentLoadedEventEnd	可以观察文档流是否过大
domReady	DOM 阶段渲染耗时	domContentLoadedEventEnd - fetchStart	DOM 树和页面加载完成时间，会触发 domContentLoaded 事件
首次渲染耗时	首次渲染耗时	responsedEnd - fetchStart	加载文档到看到第一帧非空图像的时间（白屏时间）
首次可交互时间	首次可交互时间	domInteractive - fetchStart	DOM 树解析完成时间，此时 document.readyState 为 interactive
首包时间耗时	首包时间耗时	responseStart - domainLookupStart	DNS 解析到响应返回给浏览器第一个字节的时间
页面完全加载时间	页面完全加载时间	loadEventStart - fetchStart	-
onLoad	onLoad 事件耗时	loadEventEnd - loadEventStart	-

1、什么是埋点

2、埋点的作用

3、监控类型

3.1 数据监控（监控用户行为）

3.2 性能监控（监控页面性能）

3.3 异常监控（监控产品、系统异常）

4、埋点上报

5、哪些事件需要埋点

6、Q&A

前端埋点的基础指标有哪些？

前端埋点的业务指标有哪些？

7、相关Web API

8、相关项目

1、什么是埋点 ​

2、埋点的作用 ​

3、监控类型 ​

3.1 数据监控（监控用户行为） ​

3.2 性能监控（监控页面性能） ​

3.3 异常监控（监控产品、系统异常） ​

4、埋点上报 ​

5、哪些事件需要埋点 ​

6、Q&A ​

前端埋点的基础指标有哪些？ ​

前端埋点的业务指标有哪些？ ​

7、相关Web API ​

8、相关项目 ​

1、什么是埋点

2、埋点的作用

3、监控类型

3.1 数据监控（监控用户行为）

3.2 性能监控（监控页面性能）

3.3 异常监控（监控产品、系统异常）

4、埋点上报

5、哪些事件需要埋点

6、Q&A

前端埋点的基础指标有哪些？

前端埋点的业务指标有哪些？

7、相关Web API

8、相关项目