手动埋点的demo
- 软件开发
- 2025-09-08 11:00:01
上代码 <!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(' 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>
