小程序、h5埋点上送、数据统计、异常统计

accumulate_

已于 2025-02-22 16:50:51 修改

阅读量330

点赞数

CC 4.0 BY-SA版权

文章标签：前端埋点数据统计性能统计

于 2023-03-27 15:24:02 首次发布

本文链接：https://blog.csdn.net/accumulate_/article/details/129796181

文章介绍了两种在页面卸载时确保数据发送的技术。一是利用动态图片的unload事件处理器，保证数据在图片加载时发送；二是使用Navigator.sendBeacon方法，它发出异步POST请求，即使页面已卸载，数据仍能被发送到服务器。sendBeacon方法需要关注数据类型和Content-Type设置，并且只能判断是否进入发送队列，无法确认发送是否成功。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序

功能点击数据统计

onButtonClick: function (event) {
    // 获取点击元素的信息
    const { id, dataset } = event.currentTarget;

    // 埋点数据
    const trackData = {
      event: 'button_click',
      id: id,
      dataset: dataset,
      timestamp: new Date().getTime(),
    };

    // 上送埋点数据
    wx.request({
      url: 'https://',
      method: 'POST',
      data: trackData,
      success: function (res) {
        console.log('埋点数据上送成功', res);
      },
      fail: function (err) {
        console.error('埋点数据上送失败', err);
      },
    });
  },

页面性能指标
wx.getPerformance()

// 获取页面性能数据
const performance = wx.getPerformance();
const observer = performance.createObserver((entryList) => {
  const entries = entryList.getEntries();
  entries.forEach((entry) => {
    const performanceData = {
      entryType: entry.entryType,
      name: entry.name,
      startTime: entry.startTime,
      duration: entry.duration,
    };

    // 上送性能数据
    wx.request({
      url: 'https://',
      method: 'POST',
      data: performanceData,
      success: function (res) {
        console.log('性能数据上送成功', res);
      },
      fail: function (err) {
        console.error('性能数据上送失败', err);
      },
    });
  });
});

observer.observe({ entryTypes: ['render', 'script', 'navigation'] });

接口异常统计

// 获取页面性能数据
wx.request({
  url: 'https:',
  method: 'GET',
  success: function (res) {
    console.log('接口请求成功', res);
  },
  fail: function (err) {
    console.error('接口请求失败', err);

    // 埋点数据
    const trackData = {
      event: 'api_error',
      url: 'https://your-api-server.com/api',
      error: err,
      timestamp: new Date().getTime(),
    };

    // 上送异常数据
    wx.request({
      url: 'https://',
      method: 'POST',
      data: trackData,
      success: function (res) {
        console.log('异常数据上送成功', res);
      },
      fail: function (err) {
        console.error('异常数据上送失败', err);
      },
    });
  },
});

H5

navigator.sendBeacon

navigator.sendBeacon 是浏览器提供的一个用于异步发送少量数据的 API，通常用于在页面卸载（如页面关闭或跳转）时发送统计数据（如埋点数据）。它的主要特点是可靠且不阻塞页面卸载过程，适合用于在页面生命周期结束时发送数据。

navigator.sendBeacon 的特点
1. 异步发送：sendBeacon 是异步的，不会阻塞页面的卸载过程。
2. 可靠性高：即使在页面卸载时，浏览器也会尽力将数据发送到服务器。
3. 数据量限制：适合发送少量数据（通常限制在 64KB 左右）。
4. 无需响应处理：sendBeacon 不关心服务器的响应，因此不需要处理响应数据。
5. 跨域支持：支持跨域请求，但需要服务器配置 CORS

功能点击数据统计

document.addEventListener('click', function (event) {
  const target = event.target;

  // 埋点数据
  const data = {
    event: 'button_click',
    id: target.id,
    className: target.className,
    tagName: target.tagName,
    timestamp: new Date().getTime(),
  };

  // 上送埋点数据
  if(navigator && navigator.sendBeacon){
    /**如果数据类型是 string，则可以直接上报，此时该请求会自动设置请求头的 Content-Type 为 text/plain */
    return navigator.sendBeacon(url, data)

    /**如果用 Blob 发送数据，这时需要我们手动设置 Blob 的 MIME type，一般设置为 */
    const blob = new Blob([JSON.stringify(data)], {
      type: 'application/x-www-form-urlencoded',
    });
    return navigator.sendBeacon(url, blob);

    /**可以直接创建一个新的 Formdata，此时该请求会自动设置请求头的 Content-Type 为 */
    const formData = new FormData();
    Object.keys(data).forEach((key) => {
      let value = data[key];
      if (typeof value !== 'string') {
        // formData只能append string 或 Blob
        value = JSON.stringify(value);
      }
      formData.append(key, value);
    });
    return navigator.sendBeacon(url, formData);

  }else{
    request({
      url: url,
      data: params
    })
  }
});

页面性能指标

// 获取页面性能数据
const performanceData = window.performance.timing;

// 计算页面加载时间
const loadTime = performanceData.loadEventEnd - performanceData.navigationStart;

// 埋点数据
const data = {
  event: 'page_performance',
  loadTime: loadTime,
  timestamp: new Date().getTime(),
};

// 上送性能数据
if(navigator && navigator.sendBeacon){
    /**如果数据类型是 string，则可以直接上报，此时该请求会自动设置请求头的 Content-Type 为 text/plain */
    return navigator.sendBeacon(url, data)

    /**如果用 Blob 发送数据，这时需要我们手动设置 Blob 的 MIME type，一般设置为 */
    const blob = new Blob([JSON.stringify(data)], {
      type: 'application/x-www-form-urlencoded',
    });
    return navigator.sendBeacon(url, blob);

    /**可以直接创建一个新的 Formdata，此时该请求会自动设置请求头的 Content-Type 为 */
    const formData = new FormData();
    Object.keys(data).forEach((key) => {
      let value = data[key];
      if (typeof value !== 'string') {
        // formData只能append string 或 Blob
        value = JSON.stringify(value);
      }
      formData.append(key, value);
    });
    return navigator.sendBeacon(url, formData);

  }else{
    request({
      url: url,
      data: params
    })
  }

接口异常统计

request.then(() => {}).catch(() => {
	const data = {
      event: 'api_error',
      url: 'https://your-api-server.com/api',
      error: error.message,
      timestamp: new Date().getTime(),
    };
	// ...
	navigator.sendBeacon(url, data)
})