前端埋点与数据上报的JavaScript实现_js数据分析

function trackEvent(eventType, params) {
  const logData = {
    eventType,
    timestamp: Date.now(),
    url: location.href,
    referrer: document.referrer,
    ...params
  };

  // 使用 navigator.sendBeacon 确保页面卸载时也能发送
  if (navigator.sendBeacon) {
    navigator.sendBeacon('/log', new Blob([JSON.stringify(logData)], { type: 'application/json' }));
  } else {
    // fallback 到 Image 或 fetch
    const img = new Image();
    img.src = '/log?data=' + encodeURIComponent(JSON.stringify(logData));
  }
}

// 使用示例
document.getElementById('submitBtn').addEventListener('click', () => {
  trackEvent('click', { elementId: 'submitBtn', pageSection: 'form-footer' });
});

document.addEventListener('click', function(e) {
  const target = e.target;
  // 检查是否有埋点标识属性
  const trackAttr = target.getAttribute('data-track');
  if (trackAttr) {
    try {
      const customParams = JSON.parse(trackAttr);
      trackEvent('auto-click', customParams);
    } catch (err) {
      trackEvent('auto-click', { label: trackAttr });
    }
  }
});

<button data-track='{"action": "buy-now", "product_id": 1001}'>立即购买</button>