JavaScript利用img实现前端页面埋点功能

2024-08-01 11:37:32

做数据分析的时候，可能会遇到一个问题：如何获取足量的有效数据。简单记录用户登录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发送埋点请求的两种方式，可以使用script实现本案例。

到此这篇关于JavaScript利用img实现前端页面埋点功能的文章就介绍到这了,更多相关JavaScript埋点功能内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

js前端埋点监控解析

一.为什么需要埋点&监控在开始正文之前,我们先想想为什么需要埋点&监控? 当我们在分析复盘一个产品是否成功的时候,不同的角色考虑的方向是不同的. 站在产品的视角,经常会问如下几个问题: 1.产品有没有用户使用 2.用户用得怎么样 3.系统会不会经常出现异常 4.如何更好地满足用户需求服务用户当站在技术视角时,经常会问如下几个问题: 1.系统出现异常的频率如何 2.异常出现后如何快速进行定位追踪 3.如何分析解决问题而当站在老板的视角时,问题可能又会变为: 1.我的存量用户多少,未来还
javascript 利用Image对象实现的埋点(某处的点击数)统计

需求:统计用户页面某处的点击数或者执行到程序中某个点的次数特点:根据实际情况,创建多个Image对象,原则谁空闲谁做事.解决因过快发送埋点数据导致部分埋点缺失的问题. 实现:(注下面的代码依赖jQuery) 复制代码代码如下: var Statistic= { arrImg:[], log:function(from){ //如果参数为空,则不处理 if(typeof(from)=="undefined" || from=="") return; var me=
HTML+JS实现监控切屏功能

目录项目描述记录离开页面创建html 监控是否离开页面监控是否切屏记录时间离开次数项目描述该项目是我在网上看其他博客的时候无意中看到的,看见别人居然能实现这种操作很好奇项目要求做到监控网页状态记录离开次数离开时间记录离开页面实现这个切换页面功能需要用到一个web的APIvisiblitychange visibilitychange - Web API 接口参考 | MDN (mozilla.org) Document.visibilityState - Web AP
vue+flv.js+SpringBoot+websocket实现视频监控与回放功能

目录需求: 思路: 准备工作: 实现: 最后: 需求: vue+springboot的项目,需要在页面展示出海康的硬盘录像机连接的摄像头的实时监控画面以及回放功能. 之前项目里是纯前端实现视频监控和回放功能.但是有局限性.就是ip地址必须固定.新的需求里设备ip不固定.所以必须换一种思路. 通过设备的主动注册,让设备去主动连接服务器后端通过socket推流给前端实现实时监控和回放功能: 思路: 1:初始化设备.后端项目启动时就调用初始化方法.2:开启socket连接.前端页面加载时尝试连接so
详解JavaScript发送埋点请求的两种方式

目录一.用法 1.动态创建<img> 2.动态创建<script> 二.区别区别1 区别2 三.选择哪种方式四.总结对于统计页面数据这样的情景(俗称埋点),我们常用的方式就是动态创建<img>或<script>,至于原因,一般有以下几点: 1.埋点一般不用关心请求的结果 2.可以实现跨域请求 3.无需使用ajax就能达到发请求的目的 4.都是原生实现,兼容性好现就两种方式做一下对比和总结: 一.用法 1.动态创建<img> 方式1:通过
js内存泄漏场景、如何监控及分析详解

目录前言哪些情况会引起内存泄漏 1. 意外的全局变量 2. 遗忘的定时器 3. 使用不当的闭包 4. 遗漏的 DOM 元素 5. 网络回调如何监控内存泄漏如何分析内存泄漏,找出有问题的代码实例分析总结前言 Q:什么是内存泄漏? 字面上的意思,申请的内存没有及时回收掉,被泄漏了 Q:为什么会发生内存泄漏? 虽然前端有垃圾回收机制,但当某块无用的内存,却无法被垃圾回收机制认为是垃圾时,也就发生内存泄漏了而垃圾回收机制通常是使用标志清除策略,简单说,也就是引用从根节点开始是否可达来判定
JavaScript利用img实现前端页面埋点功能

目录数据类型技术方案如何设计完整代码总结做数据分析的时候,可能会遇到一个问题:如何获取足量的有效数据.简单记录用户登录IP肯定是不能满足要求的,这个时候就需要我们在前端页面埋点,也就是数据采集点.如何来实现一个前端埋点功能,本文就带你上手试试. 数据类型首先,我们需要明确埋点需要哪些数据,这个和具体的业务需求有关.但是我们设计的时候,还是应该尽量考虑: pv:页面访问量 uv:用户访问量自定义事件页面性能加载数据报错信息埋点数据范围清晰了,那么怎么来实现埋点呢? 技术方案
JavaScript实现鼠标滚轮控制页面图片切换功能示例

本文实例讲述了JavaScript实现鼠标滚轮控制页面图片切换功能.分享给大家供大家参考,具体如下: 鼠标上的滚轮是一个不错的东东,为什么这么说,因为它能帮助我们快速的浏览网页,快速的进行长篇文章的阅读.对于web前端的我们来说又怎么能不注重这个鼠标滚轮呢,那么它能如何让用户更好的浏览网页呢? 最常见就是图片的切换了,能通过滚动滚轮进行图片的浏览,省得用户还要去点下一张,做这种繁琐的步骤.来看个简单的例子吧. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML
JS实现前端页面的搜索功能

效果图如下所示: <input type="text" id="campus" class="layui-input" onkeyup="ck(this.value);" placeholder="请输入要查找的英语屋">//输入触发框 <div class="layui-input-block layui-form" id="cam" lay-fi
JavaScript前端页面搜索功能案例【基于jQuery】

本文实例讲述了JavaScript前端页面搜索功能.分享给大家供大家参考,具体如下: 今天给大家分享一篇关于前端页面搜索的案例,有了这个案例,在表格数据中可以进行快速查找,比在浏览器中使用ctrl+F体验比较好. 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面搜索实例</title>
JavaScript+html实现前端页面随机二维码验证

分享炫酷的前端页面随机二维码验证,供大家参考,具体内容如下直接上代码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title>  <script type="text/javascript"
JavaScript+html实现前端页面滑动验证

本文实例为大家分享了JavaScript+html实现前端页面滑动验证的具体代码,供大家参考,具体内容如下分享炫酷的前端页面滑动验证直接上代码 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title>  <
JavaScript+html实现前端页面滑动验证（2）

本文实例为大家分享了炫酷的前端页面滑动验证的具体代码,供大家参考,具体内容如下分享炫酷的前端页面滑动验证前面已经发过一种,这里再发一种,只是特效不一样还是直接上代码: <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <style> /*
JavaScript+html实现前端页面滑动验证(2)

本文实例为大家分享了炫酷的前端页面滑动验证的具体代码,供大家参考,具体内容如下分享炫酷的前端页面滑动验证前面已经发过一种,这里再发一种,只是特效不一样还是直接上代码: <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> <style> /*
web前端页面生成exe可执行文件的方法

在 HTML5的崛起.JavaScript要一统天下之际,有一个名为[跨平台]的技术越来越火.为什么会这么火?因为软件开发者只需一次编写程序,即可在 Windows.Linux.Mac.IOS.Android 等平台运行,大大降低了程序员的工作量,也使公司的产品可以快读迭代.曾经跨平台技术的不被看好,如今随着手机.电脑硬件的发展而快速发展.这一切,几乎由HTML5技术推动,当然,JavaScript 这个语言,是最大的功臣. 基于 HTML5 的跨平台技术比较出名的有 PhoneGap.Cord

JavaScript利用img实现前端页面埋点功能

目录

数据类型

技术方案

如何设计

完整代码

总结

相关推荐

随机推荐