行为监控sdk-设计思考

74 阅读3分钟
  1. 很多时候为了能够更好的满足公司的需求,一般采取自研
  2. 好处,比如可以结合一些其余sdk,比如圈选sdk,自研sdk等,也可以支持自定义行为上报,精细化数据结构等等

架构设计思想

总体以发布订阅? 为什么要用发布订阅呢?

总体上,初始注册插件,开始订阅,只有触发对应事件了,才挨个进行发布,触发

通用思路是

  1. 先去监听对应的事件,之后通过consume 来进行消费对应的数据,最后再去 监听触发consume 消费.

如何来监听用户访问来路呢

依赖于reffer 字段,记录用户访问来路,以及document.performance.navagation.type 字段获取

用户来路方式

我们可以直接使用 window.performance.navigation.type 来获取用户在我们网页上的来路方式

该属性返回一个整数值,可能有以下4种情况

  • 0: 点击链接、地址栏输入、表单提交、脚本操作等。

  • 1: 点击重新加载按钮、location.reload。

  • 2: 点击前进或后退按钮。

  • 255: 任何其他来源。即非刷新/非前进后退、非点击链接/地址栏输入/表单提交/脚本操作等。

如何来监听用户访问的 pv 呢

通过这个,主要对于spa应用来讲,在监听路由 popstate事件去触发 记录,何时,从什么网址,访问。

上报策略

  1. 现在共几种常见的上报方式,以及为什么要选取这种方式来进行上报呢?
  2. sendBeacon navigator.sendBeacon()  方法可用于通过 HTTP POST 将少量数据 [异步] 进行发送
  3. 当用户代理成功把数据加入传输队列时,sendBeacon()  方法将会返回 true,否则返回 false

image.png 对于开发者来说保证在文档卸载期间发送数据一直是一个困难,也是SendBeacon 存在的意义,但是其弊端在于一个是兼容性问题,不过本身终端浏览器版本 统一,其实还有一个原因是大小有限制,不过,目前本地测试发现当字节数达到 2^16 次方就会超出,返回为false,它是异步请求发送,不会阻塞下一个页面的加载,是什么意思?

img

  1. img本身,本质是一个get请求,其次内容直接拼接到url 里面所以对于浏览器是有限制的 chrome限制为8182字节,所以超出,会失败,并且至于跨域问题,服务端,会自行处理,那有哪些方式呢

上报时机

  1. 先分类,行为,错误,性能
  2. pv,以及自定义事件(比如?), 错误,肯定是及时上报接口请求,单次统计意义不大,所以需要缓存多条统一上报,性能自然是页面加载完毕后再去进行上报

上报优化

  1. 前端,后端
  2. 前端采用:requestIdcallback ,此函数处于浏览器空闲时机再去上报,数据,避免阻塞页面本身加载,但是其兼容性问题,要用setimeout来进行兜底
  3. 后端:开启http2 进行头部压缩技术