埋点体系:
组成:应用、数据分析平台、数据平台SDK
埋点上报就是将应用层事件上传至上层平台的过程。
应用层事件:
- 页面事件:比如用户在应用某个页面的停留及活跃时长,指希望在项目初始化时注入一次,不需要再代码中进行维护。
- 触发事件:自定义的触发事件,比如点击某个特定的按钮等
处理页面事件的SDK- monitor-tracer
monitor-tracer 是一个用来监控页面及组件可见时长和活跃时长的前端SDK,同时也是Monitor前端埋点体系的一个核心组成部分。
例子:
- 标记需要监听的元素(单一的DOM元素) 在DOM元素中找到需要监听的元素,monitor-tracer SDK规定,一个组件如果需要统计活跃时长,则需要为其添加一个monitor-pv或data-monitor-pv属性。
<div monitor-pv='{"event":"one_pv","params":{...}}'
One
</div>
<div>Two</div>
总结:One添加了monitor-pv属性,会被记录并统计可见时长,而Two不会。
- 插件监听元素 需要安装@byted-cg/babel-plugin-tracer babel插件,此插件会在编译过程中寻找添加了monitor-pv属性的组件,并在其外层包裹一个自定义的标签。
处理触发事件的SDK-monitor
埋点上报流程: 埋点由应用层发送给monitor后,monitor首先会对数据进行处理,再调用数据平台SDK,将埋点事件上报给数据平台。
埋点注入方式
类指令式:
// 指令式埋点示例
<Button monitor-click={JSON.stringify({type:"func_operation",params:{value:3}})}></Button>
根据埋点文档:事件的定义,属性有哪些,触发的场景,不同场景汇报哪些值