本文介绍如何利用HTML img标签在前端实现数据埋点功能。相比Ajax，img方式能避免跨域限制并提升IE兼容性。文章详细解析了PV、UV及性能数据的采集设计，并通过StatisticsSDK示例代码展示具体实现，同时指出禁用图片加载时的潜在缺陷及script替代方案。
在进行数据分析时，常面临如何获取充足有效数据的挑战。仅记录用户登录IP显然无法满足需求，因此需要在前端页面进行埋点，即设置数据采集点。本文将演示如何具体实现这一功能。
数据类型
首先需明确埋点所需的数据类型，这取决于具体业务需求。但在设计时，应尽可能涵盖以下关键指标：
- PV：页面访问量
- UV：用户访问量
- 自定义事件
- 页面性能加载数据
- 报错信息
明确了埋点数据的范围后，接下来探讨具体的实现方式。
技术方案
不建议使用Ajax发送HTTP请求将埋点数据传至服务端，主要原因如下：
- 存在跨域风险，例如调用第三方接口时。
- 存在兼容性问题，例如使用fetch发送请求时不兼容IE浏览器。
其他原因虽存在，但非主要因素。此处建议使用<img>或<script>来实现埋点数据的发送。这两者属于原生HTML属性，兼容性优于Ajax且支持跨域。若细究img与script的差异，可参考详解JavaScript发送埋点请求的两种方式，本文选定img作为实现手段。
如何设计
编码前应先规划代码结构，以确保思路清晰。在埋点数据中，性能分析和错误监听相对复杂。性能分析可借助performance.timing进行获取。
performance的各个属性作用节点可参考下图：
错误监听的实现可参考文章：如何监听Vue项目报错的4种方式。
完整代码
class StatisticsSDK {
constructor() {
this.initPerformance(); // 性能分析
this.initError(); // 错误监听
}
// 初始化性能分析
initPerformance() {
const url = 'xxx';
this.send(url, performance.timing)
}
// 初始化错误监听
initError() {
window.addEventListener('error', event => {
const {error, lineno, colno} = event;
this.error(error, {lineno, colno})
})
// Promise 未catch的错误
window.addEventListener('unhandledrejection', event => {
this.error(new Error(event.reason), {type: 'unhandledrejection'})
})
}
// 发送埋点数据，作为公共方法被调用
send(url, params = {}) {
params.id = Date.now(); // 当前时间戳
const arr = [];
for (let key in params) {
arr.push(`${key}=${params[key]}`);
}
const newUrl = `${url}?${arr.join('&')}`; // 参数拼接在请求地址上
// 使用img发送埋点数据
// const img = new Image();
// img.src = newUrl;
const img = document.createElement('img');
img.src = newUrl;
}
// 页面访问量
pv() {
const url = 'xxxx'
// 调用send发送
this.send(url, {key: 'pv', value: location.href})
}
// 自定义事件
event(key, value) {
const url = 'xxxx'; // 服务端地址
// 调用send发送
this.send(url, {key, value})
}
// 未捕获的错误，或者用户自行发送错误埋点数据时
error(error, info = {}) {
const url = 'xxx';
const {message, stack} = error;
this.send(url, {message, stack, ...info})
}
}
const s = new StatisticsSDK();总结
本文主要利用img实现埋点数据发送，虽考虑了跨域与兼容性问题，但仍存在较大缺陷：若用户禁用网页图片加载，则无法正常发送埋点数据。在此情况下，可改用script实现本案例，两者差异可参考详解JavaScript发送埋点请求的两种方式。
到此这篇关于JavaScript利用img实现前端页面埋点功能的文章就介绍到这了,更多相关JavaScript埋点功能内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！