- 很多时候为了能够更好的满足公司的需求,一般采取自研
- 好处,比如可以结合一些其余sdk,比如圈选sdk,自研sdk等,也可以支持自定义行为上报,精细化数据结构等等
架构设计思想
总体以发布订阅? 为什么要用发布订阅呢?
总体上,初始注册插件,开始订阅,只有触发对应事件了,才挨个进行发布,触发
通用思路是
- 先去监听对应的事件,之后通过consume 来进行消费对应的数据,最后再去 监听触发consume 消费.
如何来监听用户访问来路呢
依赖于reffer 字段,记录用户访问来路,以及document.performance.navagation.type 字段获取
用户来路方式
我们可以直接使用 window.performance.navigation.type 来获取用户在我们网页上的来路方式
该属性返回一个整数值,可能有以下4种情况
-
0: 点击链接、地址栏输入、表单提交、脚本操作等。 -
1: 点击重新加载按钮、location.reload。 -
2: 点击前进或后退按钮。 -
255: 任何其他来源。即非刷新/非前进后退、非点击链接/地址栏输入/表单提交/脚本操作等。
如何来监听用户访问的 pv 呢
通过这个,主要对于spa应用来讲,在监听路由 popstate事件去触发 记录,何时,从什么网址,访问。
上报策略
- 现在共几种常见的上报方式,以及为什么要选取这种方式来进行上报呢?
- sendBeacon
navigator.sendBeacon()方法可用于通过 HTTP POST 将少量数据 [异步] 进行发送 - 当用户代理成功把数据加入传输队列时,
sendBeacon()方法将会返回true,否则返回false。
对于开发者来说保证在文档卸载期间发送数据一直是一个困难,也是SendBeacon 存在的意义,但是其弊端在于一个是兼容性问题,不过本身终端浏览器版本 统一,其实还有一个原因是大小有限制,不过,目前本地测试发现当字节数达到 2^16 次方就会超出,返回为false,它是异步请求发送,不会阻塞下一个页面的加载,是什么意思?
img
- img本身,本质是一个get请求,其次内容直接拼接到url 里面所以对于浏览器是有限制的 chrome限制为8182字节,所以超出,会失败,并且至于跨域问题,服务端,会自行处理,那有哪些方式呢
上报时机
- 先分类,行为,错误,性能
- pv,以及自定义事件(比如?), 错误,肯定是及时上报接口请求,单次统计意义不大,所以需要缓存多条统一上报,性能自然是页面加载完毕后再去进行上报
上报优化
- 前端,后端
- 前端采用:requestIdcallback ,此函数处于浏览器空闲时机再去上报,数据,避免阻塞页面本身加载,但是其兼容性问题,要用setimeout来进行兜底
- 后端:开启http2 进行头部压缩技术