一个利用1x1像素图片实现前端埋点数据上报

我们可以在页面加载时收集关键数据，如用户IP、访问时间、来源页面、设备类型和浏览器信息等。

这些数据被整理成查询参数，附加到一个1x1像素图片的URL上。

当浏览器加载这张隐形图片时，自动向服务器发送请求，从而完成数据上报。

这种方法简单高效，利用了浏览器加载图片的天然机制，无需复杂配置即可实现埋点功能，同时对页面性能影响极小。

  (function () {
    $(document).ready(function () {
      // 准备数据，新增了用户IP、访问时间、来源页面、设备类型、浏览器信息等参数
      const pageData = {
        site_id: "<?= $site_id; ?>",
        article_id: "<?= $article_id; ?>",
        referrer: document.referrer || 'direct', // 来源页面URL
        screen_resolution: `${window.screen.width}x${window.screen.height}`, // 屏幕分辨率
      };

      // 构造查询参数字符串
      const queryString = $.param(pageData); // 将对象转为 URL 查询参数
      const pixelUrl = 'http://test.com/log/add?' + queryString;

      // 创建 1x1 像素的图片元素
      const img = new Image(1, 1); // 创建 1x1 像素的图片
      img.src = pixelUrl; // 设置图片 URL，触发请求
      img.style.display = 'none'; // 隐藏图片
      img.alt = ''; // 无障碍访问优化

      // 可选：添加到页面（通常不需要显示）
      document.body.appendChild(img);

      // 可选：记录加载状态
      img.onload = function () {
        console.log('页面展示记录成功（像素图片加载）');
      };
      img.onerror = function () {
        console.error('页面展示记录失败（像素图片加载失败）');
      };
    });
  })();

代码中，我们创建了一个隐藏的1x1像素图片元素，动态设置其URL为包含埋点数据的API地址。

图片加载成功或失败时，还可以通过回调函数记录状态，确保数据上报的可靠性。