页面埋点总结

753 阅读1分钟

埋点体系:

组成:应用、数据分析平台、数据平台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>

根据埋点文档:事件的定义,属性有哪些,触发的场景,不同场景汇报哪些值