前端埋点
埋点方案：
前端埋点方法有三种：手动埋点【代码埋点】、可视化埋点和无埋点
目的：
- 获取用户的基本信息、行为
- 跟踪产品在用户端使用的情况
- 针对分析用户的行为，指明产品的优化
- 了解用户行为轨迹，看哪些素材元素以及引导点能够吸引用户
- 性能监控、数据监控
- 拿到页面在各种网络下的加载时间，再比如拿到用户在某个页面的停留时间！
- 为了运营以及开发人员采集用户行为数据
手动埋点/代码埋点
优势:
- 可自定义属性，自定义事件
- 可以更加细化需求，上报任何数据
- 相比其他埋点方式减少服务器压力
- 配置比较灵活，控制精准，想埋哪，想什么时候埋都可以
- 可以手动写到代码的任何位置，上报任何数据
缺陷:
- 低效率: 工程量大的话，手动埋点会出现疏漏，不方便审查。
- 需求变更要重新埋点，成本高。
- 埋点代码入侵业务代码，后期难以维护
- 每次需求变更都要重新发布版本，对线上系统稳定性有一定风险
封装一套代码埋点的基础库 （track.ts、npm、script）
1、埋点的标识信息
- click
- event
- eventId：唯一的，可以用来唯一标识一个埋点，比如 'click/report/buy'
2、业务自定义信息
- status：未登录的时候上报0，已登录的时候上报1，已登录但不符合xx条件的上报2
3、通用的参数
-
userId
-
useAgent
- 浏览器版本
- 安卓/IOS
- 系统版本
- 手机型号
-
refer: 当前页面是从哪里来
-
location: 当前页面的路径
如何上报？
1、实时上报
- 业务调用发送埋点的API后，立即发出上报请求
2、延迟上报
- SDK收集要上报的信息，在浏览器空闲时间或者页面卸载前统一上报
- 上报失败了，在页面卸载的时候，可以自动尝试重新上报
可视化埋点
可视化埋点方案是一种通过图形化界面进行埋点配置和管理的方法。它提供了一个可视化的界面，让用户在界面上直观地定义需要采集的用户行为和事件，而无需手动添加埋点代码
- 可视化埋点中多数基于Xpath的方案，XPath 是一门在 XML 文档中查找信息的语言，XPath 可用来在 XML 文档中对元素和属性进行遍历
- xpath方案分为精确路径和概略路径两种做法
- 精确路径 ： body>div[0]>div[3]>ul>li[5]>a[0] ，从被点击的元素不断向上冒泡查找到根节点，并记录过程中每个节点 【如果用户阻止了冒泡会导致失效】
- 概略路径：概略路径是在前者的基础仅仅向上查找白名单中的节点。但是如果DOM节点有任何变化，对应的xpath数组就是被打乱，很容易影响采集
XPath：全称 XML Path Language，即 XML 路径语言
- XPath可以用于XML文档搜索，也可以用于HTML文档搜索
- XPath可以对文档的元素和属性进行遍历
- XPath可以唯一标识元素
优点：
- 解决了纯手动埋点的开发成本和更新成本
- 解决埋点方案变更重走发版流程的问题，方便产品的迭代
缺点：
-
只能读取页面上标签元素展示出来的属性，不会像代码埋点那样，能够获取上下文（通常内存里）的一些属性
-
页面的结构发生变化时，需重新标记操作
无埋点
无埋点方案是一种自动采集用户行为数据的方法，自动捕获和发送用户的各种行为数据，而无需手动在代码中添加特定的埋点代码
- 不需要手动埋点 【无需手动在代码中添加特定的埋点代码】
- 监听页面的所有事件
无埋点方案通常使用前端 JavaScript 或移动端 SDK 追踪用户的页面浏览、点击、滚动、输入等行为，然后通过网络请求将这些数据发送到后端进行存储和分析。这种方案可以减少开发工作量，提高数据采集的覆盖范围和准确性
缺点：
- 对于服务端的压力是非常大的
- 需要上报所有页面的事件，网络请求的数据会很多
- 当有大量的用户同时进行行为操作时，服务器可能面临大量的请求负载，这可能导致网络延迟或响应时间增加
- 存储需求增加：无埋点方案会产生大量的行为数据，这需要服务器有足够的存储空间来保存这些数据。
优化：
- 数据压缩和优化：在传输数据之前，可以对数据进行压缩和优化，减少数据的大小和传输量。
说说你项目是如何使用的？
-
系统接入sdk后，不用进行代码开发即可以进行埋点数据的采集，需要埋点信息管理平台，对埋点配置进行开发、配置、调试、部署
-
通过iframe接入可视化埋点的实施系统，埋点平台与sdk之间可以使用postmessage互通消息
-
通过鼠标可视化圈选需要埋点的dom节点，配置参数等信息完成埋点开发