教你怎么前端实现埋点上报

公众号:程序员白特,可加前端技术交流群

前言

只有了解用户,我们才能服务好用户,而最接近用户的我们,自然要承担起更多的责任。

那么在一个企业中,我们要如何去了解用户呢?
最直接有效的方式就是了解用户的行为,了解用户在网站中做了什么,呆了多久。
而如何去实现这一操作,这就涉及到我们前端的埋点了。

埋点方式

在聊如何进行埋点前,我们先介绍下什么是埋点?

所谓’埋点’是数据采集领域(尤其是用户行为数据采集领域)的术语,指的是针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。. 比如用户某个icon点击次数、观看某个视频的时长等等。

基于此我们可以知道埋点是实际上是对特定事件或者行为的数据监控和上报,常见的埋点上报方式有ajax,img,navigator.sendBeacon下面介绍下这三种埋点上报方式。

基于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这类请求并不是万全之策。

基于img的埋点上报

上面可以看到如果使用ajax的话,会存在跨域的问题。而且数据上报前端主要是负责将数据传递到后端,并不过分强调前后端交互。

因此我们可以通过一些支持跨域的标签去实现数据上报功能。

script,link,img就是我们上报的数据的最好对象

先说结论,这里推荐使用img标签去实现。

script及link的缺陷

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

验证缺陷

不妨验证下,我们在管理台中加入以下代码:

let a = document.createElement('script')
a.src = 'https://lf-headquarters-speed.yhgfb-cn-static.com/obj/rc-client-security/web/stable/1.0.0.28/bdms.js'

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

书接上文,当我们将这个标签挂载中页面上时:

document.body.appendChild(a)

这时发起了请求

结论

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

基于img做埋点上报

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

验证img优势

控制台去创建一个image标签,如下:

var img=new Image();
img.src="https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/img/MaskGroup.13dfc4f1.png";

可以看到即便未被挂载到页面上依旧发起了请求。

结论

因此当我们做埋点上报时,使用img是一个不错的选择。

  • img兼容性好
  • 无需挂载到页面上,反复操作dom
  • img的加载不会阻塞html的解析,但img加载后并不渲染,它需要等待Render Tree生成完后才和Render Tree一起渲染出来

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

基于Navigator.sendBeacon的埋点上报

Navigator.sendBeacon是目前通用的埋点上报方案,Navigator.sendBeacon方法接受两个参数,第一个参数是目标服务器的 URL,第二个参数是所要发送的数据(可选),可以是任意类型(字符串、表单对象、二进制对象等等)。

介绍

navigator.sendBeacon()  方法可用于通过 HTTP POST 将少量数据 异步 传输到 Web 服务器。

作用

它主要用于将统计数据发送到 Web 服务器,同时避免了用传统技术(如:XMLHttpRequest)发送分析数据的一些问题。

补充

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

例子

以掘金为例:

这里发了一个post请求,将小量的数据发到服务端,用于统计数据

优势

相较于img标签,使用navigator.sendBeacon会更规范,数据传输上可传输资源类型会更多。

对于ajax在页面卸载时上报,ajax有可能没上报完,页面就卸载了导致请求中断,因此ajax处理这种情况时必须作为同步操作.

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

注意

该方法在支付宝中可能会被拦截,如果发现支付宝数据上报异常,可以尝试排查这块。

总结

前端埋点上报常使用ajax,img,navigator.sendBeacon

不推荐使用ajax

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

常见埋点行为

点击触发埋点

绑定点击事件,当点击目标元素时,触发埋点上报。

function clickButton(url, data) {navigator.sendBeacon(url, data)
}

页面停留时间上报埋点

路由文件中,初始化一个startTime,当页面离开时通过路由守卫计算停留时间。

let url = ''// 上报地址
let startTime = Date.now()
let currentTime = ''
router.beforeEach((to, from, next) => { if (to) {currentTime = Date.now()stayTime = parseInt(currentTime - startTime)navigator.sendBeacon(url, {time: stayTime})startTime = Date.now()}
})

错误监听埋点

通过监听函数去接收错误信息。

vue错误捕获
app.config.errorHandler = (err) => { navigator.sendBeacon(url, {error: error.message, text: 'vue运行异常' })
}
JS异常与静态资源加载异常
window.addEventListener('error', (error) => { if (error.message) { navigator.sendBeacon(url, {error: error.message, text: 'js执行异常' })} else { navigator.sendBeacon(url, {error: error.filename, text: '资源加载异常' })} 
}, true)
请求错误捕获
axios.interceptors.response.use((response) => {if (response.code == 200) {return Promise.resolve(response);} else {return Promise.reject(response);}},(error) => {// 返回错误逻辑navigator.sendBeacon(url, {error: error, text: '请求错误异常' })}
);

内容可见埋点

通过交叉观察器去监听当前元素是否出现在页面

// 可见性发生变化后的回调 
function callback(data) { navigator.sendBeacon(url, { target: data[0].target, text: '内容可见' }) 
} 
// 交叉观察器配置项 
let options = {}; 
// 生成交叉观察器 
const observer = new IntersectionObserver(callback); 
// 获取目标节点 
let target = document.getElementById("target"); 
// 监听目标元素 
observer.observe(target);

后续

开发的时候可以封装这三种上报方法

// sendBeacon 上报
export async function sendBeacon( {url = '', params }: reportParams) {if (navigator?.sendBeacon && url) {const isSuccess = await navigator?.sendBeacon(url, JSON.stringify(params));if (isSuccess) return true;}return false;
}// img 上报
export function sendImg({ img = '', params }: reportParams) {return new Promise<boolean>((resolve, reject) => {const imageData  = objectToQueryString(params)const img_o = new Image();img_o.onload = () => resolve(true);img_o.onerror = () => reject(false);img_o.src = `${img}?${imageData}`;})
}// ajax 上报
export function sendAjax({ req = '', params }: reportParams) {return new Promise<boolean>((resolve, reject) => {if (req) {postAction(req, params).then(() => resolve(true)).catch(() => reject(false));} else {reject(false);}});
}

使用的时候再导出一个真实上报函数,有由用户决定使用什么上报组合

// 基础上报函数
export async function reportEvent(params: reportParams, reportType:string[] = [IMG, BEACON, AJAX]) {let finalType = falsefor (const key in reportType) {if (!finalType) {try {await EVENT_REPORT_FUNCTION_MAP[key](params).then(()=>{finalType = true})} catch (error) {console.error(error)}}}return finalType
}

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

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

xinput1_3.dll丢失怎么办?7种不同解决方法分享

xinput1_3.dll是微软Microsoft DirectX的一个重要动态链接库&#xff08;DLL&#xff09;文件&#xff0c;它主要与DirectInput API相关&#xff0c;为Windows操作系统中的游戏和应用程序提供对各种输入设备的支持。以下是关于xinput1_3.dll的详细全面介绍&#xff1a; 1、属性…

如何开始深度学习,从实践开始

将“如何开始深度学习”这个问题喂给ChatGPT和文心一言&#xff0c;会给出很有专业水准的答案&#xff0c;比如&#xff1a; 要开始深度学习&#xff0c;你可以遵循以下步骤&#xff1a; 学习Python编程语言的基础知识&#xff0c;因为它在深度学习框架中经常被使用。 熟悉线性…

力扣hot100 -- 哈希

目录 &#x1f33c;两数之和 暴力 二分 哈希 &#x1f33c;字母异位词分组 unordered_map 排序 unordered_map 计数 &#x1f33c;最长连续序列 unordered_set 跳过前驱 排序 dp &#x1f33c;两数之和 1. 两数之和 - 力扣&#xff08;LeetCode&#xff09; 暴…

春运也要“信号升格”:中兴通讯助运营商打造高铁精品网

一年一度的春运&#xff0c;承载了游子的思乡情。据官方预计&#xff0c;今年春运跨区域人员流动量将达到90亿人次&#xff0c;创下历史新高&#xff0c;铁路、公路、水路、民航等营业性客运量全面回升&#xff0c;其中铁路预计发送旅客4.8亿人次&#xff0c;日均1200万人次&am…

rust语言tokio库底层原理解析

目录 1 rust版本及tokio版本说明1 tokio简介2 tokio::main2.1 tokio::main使用多线程模式2.2 tokio::main使用单线程模式 3 builder.build()函数3.1 build_threaded_runtime()函数新的改变功能快捷键合理的创建标题&#xff0c;有助于目录的生成如何改变文本的样式插入链接与图…

.NET Core 实现 JWT 认证

写在前面 JWT&#xff08;JSON Web Token&#xff09;是一种开放标准, 由三部分组成&#xff0c;分别是Header、Payload和Signature&#xff0c;它以 JSON 对象的方式在各方之间安全地传输信息。通俗的说&#xff0c;就是通过数字签名算法生产一个字符串&#xff0c;然后在网络…

使用Python进行数据的描述性分析,用少量的描述性指标来概括大量的原始数据

在进行数据分析时&#xff0c;当研究者得到的数据量很小时&#xff0c;可以通过直接观察原始数据来获得所有的信息。但是&#xff0c;当得到的数据量很大时&#xff0c;就必须借助各种描述性指标来完成对数据的描述工作。用少量的描述性指标来概括大量的原始数据&#xff0c;对…

计算机网络相关题目及答案(第五章)

第五章 复习题: R2. 基于逻辑上集中控制的控制平面意味着什么?在这种有情况下,数据平面和控制平面是在相同的设备或在分离的设备中实现的吗?请解释。 答:基于逻辑上集中控制的控制平面意味着控制平面的具体实现不在每个路由器中, 而是在某个集中的地方(服务器). 这种情…

廖雪峰Python教程实战Day 2 - 编写Web App骨架,运行后不显示网页如何解决

教程代码如下&#xff1a; import logging; logging.basicConfig(levellogging.INFO)import asyncio, os, json, time from datetime import datetimefrom aiohttp import webdef index(request):return web.Response(bodyb<h1>Awesome</h1>)asyncio.coroutine de…

【每日一题】LeetCode——链表的中间结点

&#x1f4da;博客主页&#xff1a;爱敲代码的小杨. ✨专栏&#xff1a;《Java SE语法》 | 《数据结构与算法》 | 《C生万物》 ❤️感谢大家点赞&#x1f44d;&#x1f3fb;收藏⭐评论✍&#x1f3fb;&#xff0c;您的三连就是我持续更新的动力❤️ &#x1f64f;小杨水平有…

【数据结构】二叉树的三种遍历(非递归讲解)

目录 1、前言 2、二叉树的非递归遍历 2.1、先序遍历 2.2、中序遍历 2.3、后序遍历 1、前言 学习二叉树的三种非递归遍历前&#xff0c;首先来了解一下递归序&#xff1a; 递归序就是按照先序遍历的顺序&#xff0c;遇到的所有结点按顺序排列&#xff0c;重复的结点也必须记…

JavaScript 跨窗口通信(Cross-Window Communication)

&#x1f9d1;‍&#x1f393; 个人主页&#xff1a;《爱蹦跶的大A阿》 &#x1f525;当前正在更新专栏&#xff1a;《VUE》 、《JavaScript保姆级教程》、《krpano》、《krpano中文文档》 ​ ​ ✨ 前言 在现代 Web 开发中&#xff0c;跨窗口通信是一种常见需求。它允许在…

怎么看待梅西?回家第一天,谢谢自己!新村主任!——早读

回家第一天 引言代码第一篇 平安中原 一图读懂 | 2024年全省公安局处长会议第二篇 人民日报 【夜读】这一年&#xff0c;谢谢自己第三篇 人民日报 来了&#xff01;新闻早班车要闻社会政策 结尾 引言 今天爬的很晚&#xff0c;没想到新闻早班车也排的那么低 回家第一天 昨天出去…

代码随想录算法训练营DAY16 | 二叉树 (3)

一、LeetCode 104 二叉树的最大深度 题目链接&#xff1a;104.二叉树的最大深度https://leetcode.cn/problems/maximum-depth-of-binary-tree/ 思路&#xff1a;采用后序遍历递归求解。 class Solution {int ans 0;public int maxDepth(TreeNode root) {if(root null){retur…

猫头虎分享已解决Bug ‍ || ValueError: Found array with dim 3. Estimator expected <= 2

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …

嵌入式学习之Linux入门篇笔记——15,Linux编写第一个自己的命令

配套视频学习链接&#xff1a;http://【【北京迅为】嵌入式学习之Linux入门篇】 https://www.bilibili.com/video/BV1M7411m7wT/?p4&share_sourcecopy_web&vd_sourcea0ef2c4953d33a9260910aaea45eaec8 1.什么是命令&#xff1f; 命令就是可执行程序。 比如 ls -a…

armbian ddns

参考https://mp.weixin.qq.com/s/0Uu_nbGH_W6vAYHPH4kHqg Releases jeessy2/ddns-go GitHub mkdir -p /usr/local/ddns-go cd /usr/local/ddns-gowget https://github.com/jeessy2/ddns-go/releases/download/v6.1.1/ddns-go_6.1.1_freebsd_armv7.tar.gztar zxvf ddns-go_…

用友U8+OA doUpload.jsp 文件上传漏洞

免责声明&#xff1a;文章来源互联网收集整理&#xff0c;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;所产生的一切不良后果与文章作者无关。该…

mac电脑flutter环境配置,解决疑难问题

准备工作 首先搭建flutter的环境需要使用到flutter的sdk&#xff0c;可以直接跳去官网下载&#xff1a;Choose your first type of app - Flutter 中文文档 - Flutter 中文开发者网站 - Flutter&#xff0c;下载时要注意你电脑所使用的芯片是Intel的还是苹果的芯片。 下载好的…

(C++)集合数据文件存储工具

前言 一个简单的实现简便 "map集合" 数据存储本地。 适合不会SQL但又想实现数据存储本地的同学。 操作使用都非常简单。 文件只做了简单的加密处理&#xff0c;如果需要复杂加密的同学可以修改加密函数。 项目结构 1.创建头文件——CAB.h // // Created by xw o…