前端埋点数据上传应该怎样实现?
这是一篇埋点总结,刚处理了公司内项目的埋点方案(神策),思考一下如果我自己实现一个埋点,会有什么方案?
通常埋点监控的主要功能是:统计PV(页面访问次数)、UV(页面访问人数)、用户点击操作行为等等。还可以进行页面性能分析(首屏加载时间,白屏时间)。监控收集错误报警信息。
怎样发送数据
使用img的src做请求发送
优点:不用做特殊处理,没有跨域的限制,script标签,img标签都可以直接发送跨域的GET请求,兼容性比较好,有些页面可能禁用了脚本,这时script标签久不能使用了。img就没有这个限制。
当我们使用img的src标签访问的时候,就会触发访问这个get请求。这个时候服务端就会接收到前端发送的请求。
例子:
const send = (url,data) => {const imgStr = Object.entries(data).map(([key, value]) => `${key}=${value}`).join("&");const img = new Image();img.src = `${url}?${imgStr}`;
}
更加方便的web beacon(网络信标)
网络信标(web beacon),又称网页臭虫(web bug),是可以暗藏在任何网页元素或邮件内的1像素大小的透明GIF或PNG图片,常用来收集目标电脑用户的上网习惯等数据,并将这些数据写入Cookie。网络信标在邮件跟踪和垃圾邮件中较为常用。
navigator.sendBeacon()方法可以通过HTTP POST将少量的数据异步传输到web服务器。
目前它主要用于将统计数据发送到web服务器,同事避免使用传统技术(如:XMLHttpRequest)发送分析数据的一些问题。
navigator.sendBeacon(url, data)
//data可选 data参数是将要发送的 ArrayBuffer、ArrayBufferView、Blob、DOMString、FormData 或 URLSearchParams 类型的数据
当用户代理成功把数据加入传输队列时,sendBeacon将会返回true/false
sendBeacon的优点:
- 使用sendBeacon()方法会使用户代理在浏览器空闲时异步的向服务器发送数据,不会和主要业务代码抢占资源,
- 在页面卸载的时也能保证请求成功发送,同时不会延迟页面的卸载或影响下一页面的载入性能。
参考:https://developer.mozilla.org/zh-CN/docs/Web/API/Navigator/sendBeacon
注意:sendBeacon是有浏览器兼容问题的,所以我们使用的时候为了完善,还是要用img这种方式来进行兜底。
埋点使用
ok,上面我们说完怎样发送数据,现在我们来操作一下。写一个小demo
页面性能监控数据上传
const send = (url, query) => {const navigatorSend = navigator?.sendBeacon(url, query);if (!navigatorSend) {const str = Object.entries(query).map(([key, value]) => `${key}=${value}`).join("&");const img = new Image();img.str = `${url}=${str}`;}}const reportPerformance = () => {send(url, {...performance.timing,uuid: 'xxx'});}
前端埋点数据上传应该怎样实现?相关推荐
- 前端js实现图片上传
前端js实现图片上传的原理是通过input标签的type=file属性将input标签定义为上传文件,对input进行onchange事件的监听,当input的value值改变时代表用户已经上传了图片 ...
- 前端(react)上传到阿里云OSS存储 实例
需求背景 由于现有的后台管理系统,上传的视频越来越大,加上上传视频较慢,后端小哥提出直接从前端上传视频或者其他文件到阿里云OSS存储. 阿里云OSS 阿里云OSS文档介绍,这里不做过多赘述 安装 原本 ...
- 怎么把前端文件传到服务器,前端怎么把文件上传到服务器
前端怎么把文件上传到服务器 内容精选 换一换 本教程旨在演示使用GDS(General Data Service)工具将远端服务器上的数据导入GaussDB(DWS)中的办法,帮助您学习如何通过GDS ...
- 前端 + 后端 实现分片上传(断点续传/极速秒传)
先记录下,后面有时间再去实现 可参考链接:vue上传大文件/视频前后端(java)代码 前端 + 后端 实现分片上传(断点续传/极速秒传) 前端slice分片上传,后端用表记录分片索引和分片大小和分片 ...
- 二阶段补充:文件上传服务端处理,后端文件上传、前端两种文件上传方式
1.文件上传 2.后端文件上传 两种方案: 兼容性较好的commons-fileupload,支持所有版本的Servlet,即所有版本的Tomcat 优点: 兼容性 缺点 需要外部jar,比较麻烦.代 ...
- 前端埋点数据收集及上报方案
本文作者:随风丶逆风 本文链接:https://juejin.cn/post/6938075086737899534 什么是埋点 埋点,它的学名是事件追踪(Event Tracking),主要是针对特 ...
- 前端埋点数据收集及上报方案实战
什么是埋点 埋点,它的学名是事件追踪(Event Tracking),主要是针对特定用户行为或业务过程进行捕获.处理和发送的相关技术及实施过程.埋点是数据领域的一个专业术语,也是互联网领域的一个俗称. ...
- 上传图片到linux返回url,Springboot 将前端传递的图片上传至Linux服务器并返回图片的url(附源码)...
问题由来: 用户个人信息需要添加头像功能 当前端程序是微信小程序时,前端将直接将图片 url 传送至服务端 但是当前端是 Web 页面时,前端传递的参数是一张图片,服务端需要将图片保存至 Linux ...
- springboot+前端实现文件(图片)上传到指定目录
第一步 前端写html的代码 <!-- 联系方式--><div class="layui-form-item"><label for="fi ...
最新文章
- 0x58 数据结构优化DP
- Vuex-全局状态集中式管理神器,做vue项目不知道Vuex真的out了
- python 去掉list元素的双引号_一天快速入门 Python
- js简单验证码的生成和验证
- 如何在Windows11和Windows10上获取驱动程序更新
- VMweare 典型创建 Kali Linux 虚拟机
- Shiro系列-Shiro中Realm如何使用
- 三星uboot1.1.6源码分析——start.s(4)——从NAND复制源码到RAM(3)
- el表达式 循环_EL表达式+JSTL+Ajax 047
- 黑马程序员-java-基础《一》
- 活锁(live lock)是什么
- 限流算法: 漏桶算法和令牌桶算法
- 换页符'\f'的问题
- 百度竞价需抓住消费者心理
- Cocos 环境搭建 流程~~~~~
- Ubuntu下安装Maskrcnn_benchmark(pytorch)踩坑分享
- linux统计代码耗时函数,统计函数执行耗时
- 利用Fama-French五因子模型的alpha进行行业轮动
- 连快递小哥都会的OS,你还不会(一)
- 移动开发APP的开发框架