1.0.4 • Published 2 years ago
tracker_web5 v1.0.4
项目名称
web 埋点
功能介绍
- pv 统计 pv 的统计根据业务方需求有两种方式,第 1 种是完全由业务方自己来控制,在页面加载或变化的时候调用通用埋点方法来上报。第 2 种是通过初始化配置开启自动 pv 统计,由 sdk 来完成这一部分的埋点上报。
- uv 统计 sdk 会提供了一个设置用户 uid 的方法 setUserId 暴露给业务使用,当业务平台获取到登录用户的信息后,调用该方法,则会在后续的埋点请求中都带上 uid,最后在埋点分析的时候以该字段进行 uv 的统计。但是这样的 uv 统计是不准确的,因为忽略了用户未登录的情况,统计出来的 uv 值是小于实际的,因此需要在用户未登录的情况下也给一个区分标识
- 业务埋点
- 热力图上报:监听页面中任意位置的用户点击事件,记录下点击的元素和位置,最后根据点击次数的多少,得到页面中的点击分布热力图。这一块的实现原理比较简单,只需要在埋点 sdk 中开启对所有元素对点击事件对监听即可,比较关键的一点是要计算出鼠标的点击 x、y 位置坐标,同时也可以把当前点击的元素名称或者 class 也一起上报,以便做更精细化的数据分析。
- dom 点击上报:dom 点击上报就是通过在 dom 元素上添加指定属性来达到自动上报埋点数据的功能。具体来说就是在页面的 dom 元素,配置一个 tracker-key = 'xxx' 的属性,表示需要进行该元素的点击上报,适用于上报通用的埋点数据(没有自定义的埋点数据),但是又不需要热力图上报的程度。这种配置方式是为了节省了要主动调用上报方法的步骤,但是如果埋点中有自定义的数据字段,还是应该在代码中去调用 sdk 的埋点上报方法。实现的方式也很简单,通过对 body 上点击事件进行全局监听,当触发事件时,判断当前 event 的 getAttribute('tracker-key')值是否存在,如果存在则说明需要上报埋点事件,调用埋点上报方法即可。
- 上报埋点方式: 优先使用 img 标签,当字符长度超过 2083 时,改用 beacon 请求,若浏览器不支持 beacon 请求,最好换成原生的 ajax 请求进行兜底。
安装方法
使用 npm : npm install track_web5@latest
用法
import Tracker from "tracker_web5";
const tracker = new Tracker({
appid: "default", // 应用标识,用来区分埋点数据中的应用
uuid: "", // 设备标识,自动生成并存在浏览器中,
extra: {}, // 用户自定义上传字段对象
enableHeatMapTracker: false, // 是否开启热力图自动上报
enableLoadTracker: false, // 是否开启页面加载自动上报,适合多页面应用的pv上报
enableHistoryTracker: false, // 是否开启页面history变化自动上报,适合单页面应用的history路由
enableHashTracker: false, // 是否开启页面hash变化自动上报,适合单页面应用的hash路由
requestUrl: "xx", // 埋点请求后端接口
});
// 在用户登录后使用,设置用户标识,
tracker.setUserId("9527");
tracker.sendTracker("click", "module1", { a: 1, b: 2, c: "ccc" });
埋点字段设计
字段 | 含义 |
---|
|appid |应用标识| |uuid |设备 id| |userId| 用户 id| |browserType |浏览器类型| |browserVersion |浏览器版本| |browserEngine |浏览器引擎| |language |语言| |osType |设备类型| |osVersion |设备版本号| |eventTime |埋点上报时间| |title |页面标题| |url |页面地址| |domPath |事件触发的 dom| |offsetX |事件触发的 dom 的 x 坐标| |offsetY |事件触发的 dom 的 y 坐标| |eventId |事件标识| |eventType |事件类型| |extra |用户自定义字段对象|