当前位置：首页 > news >正文

手动埋点的demo

news 来源：原创 2025/5/10 13:18:20

上代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>埋点示例</title>
</head>

<body>
  <!-- 多种埋点触发元素 -->
  <button id="track-button">点击事件埋点</button>
  <form id="demo-form">
    <input type="text" placeholder="输入内容" name="username">
    <button type="submit">提交表单</button>
  </form>
  <div class="ad-banner" style="height: 1000px; margin-top: 1200px;">滚动到此处触发曝光埋点</div>

  <script>
    // ====================== 核心工具函数 ======================
    // 生成唯一用户ID (持久化存储)
    const getUserId=() => {
      let userId=localStorage.getItem('userId');
      if(!userId) {
        userId=`user_${Math.random().toString(36).substr(2,9)}`;
        localStorage.setItem('userId',userId);
      }
      return userId;
    };

    // 获取页面基本信息
    const getPageContext=() => ({
      url: window.location.href,
      referrer: document.referrer,
      screen: `${window.screen.width}x${window.screen.height}`,
      userAgent: navigator.userAgent
    });

    // ====================== 埋点主函数 ======================
    function trackEvent (eventType,customData={}) {
      // 合并公共数据和自定义数据
      const eventData={
        // 基础信息
        event_type: eventType,
        timestamp: new Date().toISOString(),

        // 用户信息
        user_id: getUserId(),
        session_id: sessionStorage.getItem('sessionId')||(() => {
          const id=`session_${Date.now()}`;
          sessionStorage.setItem('sessionId',id);
          return id;
        })(),

        // 设备与页面信息
        ...getPageContext(),

        // 自定义数据
        ...customData
      };

      // 发送到测试API（实际项目替换为真实接口）
      fetch('https://httpbin.org/post',{
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify(eventData)
      })
        .then(res => res.json())
        .then(data => console.log('埋点成功:',data.json))
        .catch(err => console.error('埋点失败:',err));
    }

    // ====================== 多种埋点场景示例 ======================
    // 1. 点击事件埋点
    document.getElementById('track-button').addEventListener('click',() => {
      trackEvent('button_click',{
        button_id: 'track-button',
        button_text: '点击事件埋点'
      });
    });

    // 2. 表单提交埋点
    document.getElementById('demo-form').addEventListener('submit',(e) => {
      e.preventDefault();
      const formData=new FormData(e.target);
      trackEvent('form_submit',{
        form_id: 'demo-form',
        form_data: Object.fromEntries(formData)
      });
    });

    // 3. 广告曝光埋点（滚动到视口时触发）
    const adBanner=document.querySelector('.ad-banner');
    const observer=new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if(entry.isIntersecting) {
          trackEvent('ad_impression',{
            ad_id: 'banner_1',
            position: entry.boundingClientRect.y
          });
          observer.unobserve(adBanner); // 仅触发一次
        }
      });
    });
    observer.observe(adBanner);

    // 4. 页面生命周期埋点
    // 页面加载完成
    trackEvent('page_view',{
      page_type: 'homepage',
      load_time: performance.timing.loadEventEnd-performance.timing.navigationStart
    });

    // 页面离开时
    window.addEventListener('beforeunload',() => {
      trackEvent('page_leave',{
        time_spent: Date.now()-performance.timing.navigationStart
      });
    });
  </script>
</body>

</html>