data-track属性本身不触发行为，仅作标记容器；真正埋点需js事件委托监听click/pointerdown，用closest('[data-track]')获取目标，结合sendbeacon上报防丢失，并统一字段命名。
直接在 HTML 标签里加 data-track 这类属性本身不触发任何行为，它只是个标记容器；真正起作用的是配套的 JavaScript 监听逻辑。没绑定事件处理或没配好上报机制，这些属性就只是“静默标签”，埋点数据根本发不出去。
怎么用 data-track 实现按钮点击自动埋点
核心是避免在每个 <button></button> 上写 onclick，改用事件委托统一捕获：
- 给目标元素加上
data-track="buy_now"和可选的业务字段，比如data-item-id="10023"、data-section="product_detail" - 监听
click（PC）和pointerdown（移动端兼容性更好，比touchstart更稳） - 用
e.target.closest('[data-track]')向上找最近的带埋点标记的祖先，避免子元素（如图标、文字 span）触发后拿不到正确上下文 - 上报前检查是否已触发过（防重复点击），可用
el.dataset.sent === 'true'临时标记，或用节流函数控制最小间隔
示例片段：
document.addEventListener('pointerdown', e => {
const el = e.target.closest('[data-track]');
if (!el || el.dataset.sent === 'true') return;
el.dataset.sent = 'true';
sendLog({
event: el.dataset.track,
id: el.dataset.itemId,
section: el.dataset.section,
url: location.href,
timestamp: Date.now()
});
});
曝光埋点为什么不能只靠 getBoundingClientRect
getBoundingClientRect() 返回坐标后简单判断 top 会误报：元素可能在隐藏 tab 页、被 <code>display: none 或 visibility: hidden 挡住，甚至还在 CSS 动画入场途中——用户根本没看到。
- 必须用
IntersectionObserver，它由浏览器原生调度，能感知真实渲染状态和可视区域变化 -
threshold: [0.1]表示至少 10% 区域进入视口才触发，比写死0更抗抖动 - 上报后立刻调用
io.unobserve(el)，否则滚动时反复触发；若需持续监听（如广告位轮播），则去掉这行并加防抖 - 注意兼容性：Safari 12.1+、Chrome 74+ 支持良好，老版本需降级 fallback（但 2026 年基本可忽略）
sendBeacon 为什么关键操作必须用它
用户点“提交订单”后立即切页、关标签页、锁屏，传统 fetch 或 XMLHttpRequest 会直接中断，导致埋点丢失——这不是概率问题，是必然发生。
-
navigator.sendBeacon()是唯一能在页面卸载前异步发出请求且不阻塞关闭的 API - 它只支持
POST，且 payload 必须是ArrayBuffer、Blob或FormData；传 JSON 需转成Blob：new Blob([JSON.stringify(data)], {type: 'application/json'}) - 它不返回 Promise，无法 catch 错误，所以得配合服务端幂等设计（同一
event_id重复接收应忽略） - 非关键事件（如 hover、scroll）不用它，避免滥用影响性能；批量上报仍走
fetch+ 本地缓存重试更合适
最容易被忽略的一点：所有埋点字段命名必须全局约定，比如统一用 page_url 而不是混用 url、currentUrl、location；否则后期查漏斗、做关联分析时，光对字段就要花半天时间清洗。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
