三种前端埋点方式

什么是埋点

埋点是数据采集领域(尤其是用户行为数据采集领域)的术语,指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。比如用户某个icon点击次数、观看某个视频的时长等等。
我们可以知道埋点实际上是对特定事件或者行为的数据监控和上报,常见的埋点上报方式有ajax、img、navigator.sendBeacon三种

1、基于ajax的埋点上报

因为埋点实际上是对关键节点的数据进行上报,是和服务端交互的一个过程,所以我们可以和后端约定一个接口通过ajax去进行数据上报。

封装一个方法:

function buryingPointAjax(data) {return new Promise((resolve, reject) => {// 创建ajax请求const xhr = new XMLHttpRequest();// 定义请求接口xhr.open("post", '/buryingPoint', true);// 发送数据xhr.send(data);});
}

使用时,直接调用即可

let info = {}
buryingPointAjax(info) // 这样就成功上报了info的对象

缺点
一般而言,埋点域名并不是当前域名,因此请求会存在跨域风险,且如果ajax配置不正确可能会浏览器拦截。因此使用ajax这类请求并不是万全之策。

2、通过一些支持跨域的标签去实现数据上报功能

我们可以通过一些支持跨域的标签去实现数据上报功能。
script link img就是我们上报数据的最好对象

script及link的缺陷
因为埋点涉及请求,因此我们需要保证script和link标签的src可以正常请求。
如果需要请求script和link,我们需要将标签挂载到页面上。

let a = document.createElement('script')
a.src = 'xxxx.js'

创建一个script标签,未挂载到页面上,不会发起请求

document.body.appendChild(a)

当我们将这个标签挂载到页面上时,发起了请求。

结论:当我们使用script和link进行埋点上报时,需要挂载到页面上,而反复操作dom会造成页面性能受影响,而且载入js/css资源还会阻塞页面渲染,影响用户体验,因此对于需要频繁上报的埋点而言,script和link并不合适。

基于img做埋点上报
通常使用img标签去做埋点上报,img标签加载并不需要挂载到页面上,基于js去new image(),设置其src之后就可以直接请求图片。

var img=new Image();
img.src="xxx.png";

控制台创建一个image标签,可以看到即便未被挂载到页面上依旧发起了请求。

结论
因此当我们做埋点上报时,使用img是一个不错的选择。
1、img兼容性好
2、无需挂载到页面上,反复操作dom
3、img的加载不会阻塞html解析,但img加载后并不渲染,他需要等待Render Tree生成完后才和Render Tree一起渲染出来

注:通常埋点上报会使用gif图,合法的GIF只需要43个字节

3、基于Navigetor.sendBeacon的埋点上报

Navigator.sendBeacon是目前通用的埋点上报方案,Navigator.aendBeacon方法接受两个参数,第一个参数是目标服务器的URL,第二个参数是所要发送的数据(可选),可以是任意类型(字符串、表单对象、二进制对象等等)。
navigator.sendBeacon() 方法可用于通过 HTTP POST将少量数据 异步传输到 Web 服务器。
**作用:**主要用于将传统数据发送到Web服务器,同时避免了用传统技术(如:XMLHttpRequest)发送分析数据的一些问题。

**补充:**sendBeacon 如果成功进入浏览器的发送队列后,会返回true;如果受到队列总数、数据大小的限制后,会返回false。返回true后,只是表示进入了发送队列,浏览器会尽力保证发送成功,但是否成功了,不会有任何返回值。

优势
相较于img标签,使用navigator.sendBeacon会更规范,数据传输上可传输资源类型会更多。
对于ajax在页面卸载上报,ajax有可能没上报完,页面就卸载了导致请求中断,因此ajax处理这种情况时必须作为同步操作。

sendBeacon是异步的,不会影响当前页到下一个页面的跳转速度,且不受区域限制。这个方法还是异步发出请求,但是请求与当前页面脱离关联,作为浏览器的任务,因此可以保证数据会发出去,不拖延卸载流程。

总结

前端埋点上报常使用ajax,img,navigator.sendBeacon。
不推荐使用ajax。
如果考虑兼容性的话,img是不二之选。
目前最合适的方案是navigator.sendBeacon不仅是异步的,而且不受区域限制,而且作为浏览器的任务,因此可以保证会把数据发出去,不影响页面卸载。

常见埋点行为

1、点击触发埋点
绑定点击事件,当点击目标元素时,触发埋点上报。
2、页面停留时间上报埋点
路由文件中,初始化一个startTime,当页面离开时通过路由守卫计算停留时间。
3、错误监听埋点
通过监听函数去接收错误信息。
例如:vue错误捕获、JS异常与静态资源加载异常、请求错误捕获
4、内容可见埋点
通过交叉观察器去监听当前元素是否出现在页面

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/124269.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【网络安全】Seeker内网穿透追踪定位

Seeker追踪定位对方精确位置 前言一、kali安装二、seeker定位1、ngrok平台注册2、获取一次性邮箱地址3、ngrok平台登录4、ngrok下载5、ngrok令牌授权6、seeker下载7、运行seeker定位8、运行隧道开启监听9、伪装链接10、用户点击(获取定位成功)11、利用经…

10.30 知识总结(标签分类、css介绍等)

一、 标签的分类 1.1 单标签 img br hr <img /> 1.2 双标签 a h p div <a></a> 1.3 按照标签属性分类 1.3.1 块儿标签 即自己独自占一行 h1-h6 p div 1.3.2 行内(内联)标签 即自身文本有多大就占多大 a span u i b s 二、 标签的嵌套 标签之间是可以互相…

iTransformer: INVERTED TRANSFORMERS ARE EFFECTIVE FOR TIME SERIES FORECASTING

#论文题目&#xff1a;ITRANSFORMER: INVERTED TRANSFORMERS ARE EFFECTIVE FOR TIME SERIES FORECASTING #论文地址&#xff1a;https://arxiv.org/abs/2310.06625 #论文源码开源地址&#xff1a;https://github.com/thuml/Time-Series-Library #论文所属会议&#xff1a;Mach…

基于单片机的智能清洁小车设计—控制系统设计

收藏和点赞&#xff0c;您的关注是我创作的动力 文章目录 概要 一、研究的主要内容和目标二、总体方案设计2.1智能清洁小车的硬件系统组成2.2智能清洁小车的硬件结构图 三、 小车结构设计5.1基本布局和功能分析5.2小车二维及三维图小车三维图&#xff1a; 四、 原理图程序 五、…

在CentOS 7中手工打造和运行xml文件配置的Servlet,然后使用curl、浏览器、telnet等三种工具各自测试

下载Openjdk并配置环境变量 https://jdk.java.net/java-se-ri/11-MR2是官网下载Openjdk 11的地方。 sudo wget https://download.java.net/openjdk/jdk11.0.0.1/ri/openjdk-11.0.0.1_linux-x64_bin.tar.gz下载openjdk 11。 sudo mkdir -p /usr/openjdk11创建目录&#xff…

UE5 日记(人物连招:蒙太奇动画通知(含视频链接))

教程https://www.youtube.com/watch?vsWpENaVGj2M&listPLiSlOaRBfgkcPAhYpGps16PT_9f28amXi&index10&ppiAQB 相关蓝图 连招逻辑 动画通知类 逻辑分析 1.用户输入 已搭载战斗系统模块,可以收到输入指令 2.连击 第一次攻击&#xff1a; 第一次攻击&#xff0c;…

Qt中设置鼠标透明度的应用及示例

Qt中设置鼠标透明度的应用及示例 介绍设置鼠标透明度的方法应用场景遮罩层可视化效果 结论 介绍 Qt是一个功能强大的跨平台应用程序开发框架&#xff0c;可以用于开发各种类型的应用程序。在Qt中&#xff0c;我们可以设置鼠标的透明度&#xff0c;即将鼠标事件传递给下方的控件…

vulnhub momentum 靶机复盘

环境配置 到学校了 原来的桥接配置要改 这里记录几个点备忘 1.virtualbox 桥接 未指定 重新安装驱动VBoxNetLwf.inf 2.配置完靶机启动失败 手动安装VBoxNetLwf.inf 不要用virtualbox自带的netlwfinstall 3.配置完nmap扫不到 rw init/bin/bash 进去看看网卡配置 信息收集…

Docker底层原理:UFS的使用

文章目录 前言检查系统是否支持OverlayFS准备两个目录加载OverlayFS模块创建OverlayFS使用OverlayFS卸载OverlayFS 前言 Linux中常用的联合文件系统有OverlayFS和Aufs(Another Union File System), OverlayFS是Linux内核自带的联合文件系统, 而Aufs则是第三方提供的联合文件系…

C语言_字符串和内存函数

文章目录 前言一. strlen二. strcpy三.strcat四. strcmp &#xff08;字符串比较&#xff09;五. strncpy六. strncmp七. strstr八. strtok九 . strerror perror十. 字符分类函数十一. memcpy (内存拷贝&#xff09;十二. memmove(可以重叠拷贝 也可以实现不重叠的内存拷贝) 前…

VC++程序崩溃时,使用Visual Studio静态分析dump文件

Window环境下的C程序如果发生异常崩溃&#xff0c;首先会和客户联系&#xff0c;让帮忙取特定目录下的dump文件和log文件来分析崩溃的原因。不过发生崩溃的话&#xff0c;从log一般分析不出特定原因&#xff0c;这时候dump文件就起作用了。可以通过Visual Studio和Windbg来静态…

java八股文(基础篇)

面向过程和面向对象的区别 面向过程&#xff1a;在解决问题时&#xff0c;特别自定义函数编写一步一步的步骤解决问题。 面向对象&#xff1a;其特点就是 继承&#xff0c;多态&#xff0c;继承&#xff0c;在解决问题时&#xff0c;不再注重函数的编写&#xff0c;而在于注重…

高效学习工具之Anki新手入门指南(ios端,包括ipad、ihpone设备)————创建、使用、备份、相关资料

文章目录 0 背景0.1 闭环学习0.2 什么是anki 1 开始使用1.1 导入1.2 创建空白组1.3 创建卡片&#xff08;&#xff09;1.3.1 利用anki创建卡片的两种方法1.3.2 复习材料分类 1.4 开启v3算法&#xff0c;设置排程1.4 自定义排程 2 操作卡牌&#xff08;位于卡牌界面中“游览”&a…

数据库认证 | Oracle OCP好考吗

数据库对于很多技术人员来说都不陌生&#xff0c;但是你想深入了解的话&#xff0c;那么考个证书也许就是一个不错的选择。 如果能考个Oracle OCP认证的话&#xff0c;那也确实不错。那么Oracle OCP好考吗&#xff1f;下面我们就来了解一下吧。 01 Oracle OCP好考吗 OCP考试还…

C++快餐——C++11(2)

如期待奇迹发生&#xff0c;那唯有不停伸手去抓紧&#xff0c;去把握才行。 文章目录 类成员变量缺省值default关键字delete关键字final关键字可变参数模板STL容器中empalce相关接口函数优点 lambda表达式捕获列表注意&#xff01;&#xff01;&#xff01;底层实现 总结 类成员…

leetcode-栈与队列

C中stack 是容器么&#xff1f; 栈&#xff0c;队列往往不被归类为容器&#xff0c;而被归类为container adapter(容器适配器)。因为由底层的容器实现&#xff0c;同时使用适配器模式的设计模式&#xff0c;封装了一层。 我们使用的stack是属于哪个版本的STL&#xff1f;SGI ST…

电路的电线的拼接

不积跬步无以至千里&#xff0c;今天小编也是复习今天学习的内容&#xff0c;废话不多说&#xff0c;看博客吧&#xff01;&#xff01;&#xff01; 目录 准备条件 操作 成品 准备条件 操作 将定制的套管插入导线当中&#xff0c;24V或者0V是尖端的端子&#xff0c;后面根…

基于SSM的养老院管理系统

基于SSM的养老院管理系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringSpringMVCMyBatisVUE工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 摘要 养老院管理系统是一个基于SSM&#xff08;Spring、Spring MVC、MyBatis&…

微信定时发圈,快人一步不落索

现在的社交媒体运营已经成为了私域流量获取的重要手段&#xff0c;而微信作为最大的社交平台之一&#xff0c;更是吸引了众多使用者。但是&#xff0c;你是否曾经感叹过每天手动发朋友圈的繁琐&#xff1f;是否希望能够事先设置好定时发送的功能&#xff0c;让你的朋友圈自动更…

Spring Boot 3系列之一(初始化项目)

近期&#xff0c;JDK 21正式发布&#xff0c;而Spring Boot 3也推出已有一段时间。作为这两大技术领域的新一代标杆&#xff0c;它们带来了许多令人振奋的新功能和改进。尽管已有不少博客和文章对此进行了介绍&#xff0c;但对于我们这些身处一线的开发人员来说&#xff0c;有些…