广告曝光统计须基于intersectionobserver判定视口可见性，设threshold:0.1防抖动，用dataset.tracked防重复，sendbeacon确保上报成功。
广告曝光统计：用 Intersection Observer 监听可见性
直接在广告 <img> 或容器上加 onload 不可靠——图片可能缓存、懒加载未触发、或广告根本没展示给用户。真实曝光必须基于「进入视口」判定。
现代方案是用 IntersectionObserver，它不依赖滚动事件节流，性能好，兼容性也足够（Chrome 51+/Firefox 55+/Edge 79+）：
const adObserver = new IntersectionObserver((entries) => {
entries.forEach(entry => {
if (entry.isIntersecting && !entry.target.dataset.tracked) {
// 发送曝光埋点
navigator.sendBeacon('/log?event=ad_impression&id=header-banner');
entry.target.dataset.tracked = '1';
}
});
}, { threshold: 0.1 }); // 至少 10% 面积可见时触发
document.querySelectorAll('.ad-banner').forEach(el => adObserver.observe(el));
-
threshold: 0.1比0更稳妥——避免因像素级抖动误报 - 务必加
dataset.tracked标记，防止同一广告多次曝光重复上报 - 优先用
navigator.sendBeacon()，页面卸载前也能发出去；不用fetch或Image打点（可能被中断）
点击归因：绑定事件时注意事件冒泡和防重复
广告点击统计不能只靠 onclick 属性——它无法区分真实点击与右键、中键、键盘激活，也难做去重。
推荐在广告容器上监听 click，并过滤无效行为：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
adContainer.addEventListener('click', function(e) {
if (e.button !== 0 || e.ctrlKey || e.metaKey || e.altKey) return;
if (e.target.closest('a, button, [role="link"]') === null) return;
// 上报点击 + 跳转
navigator.sendBeacon('/log?event=ad_click&id=header-banner&url=' + encodeURIComponent(this.dataset.url));
setTimeout(() => {
window.location.href = this.dataset.url;
}, 0);
});
- 检查
e.button === 0排除右键/中键；ctrlKey等排除新标签页打开意图 - 用
e.target.closest()确保点击落在可交互元素内，避免背景空白区误触 -
setTimeout(..., 0)是关键：保证埋点请求先发出，再跳转；否则 Chrome 可能终止未完成的请求
第三方广告平台代码冲突怎么办
如果页面已引入 Google Ad Manager、Meta Pixel 或其他 SDK，再手动加自定义埋点，容易出现重复曝光、竞态请求、或 document.write 报错。
核心原则：不覆盖、不抢控权、等就绪：
- 检查全局变量是否存在（如
window.googletag、window.fbq），存在再调用其push方法，而非自己发请求 - 用
Promise.resolve().then()或requestIdleCallback延迟执行自定义逻辑，避开第三方 SDK 初始化高峰 - 避免在广告 HTML 片段里内联 JS；统一由主站 JS 控制，方便开关和灰度
为什么 document.referrer 在广告跳转后不可信
从广告页跳到落地页时，document.referrer 多数情况下是空或被浏览器屏蔽（尤其 iOS Safari、Chrome 隐私模式），不能用来反推来源广告位。
正确做法是在跳转 URL 中透传来源标识：
<a href="https://example.com/landing?utm_source=homepage&utm_medium=banner&utm_campaign=spring24" data-ad-id="home-top-1"> 广告文案 </a>
- 服务端记录该 URL 参数，比前端 JS 读
document.referrer稳定十倍 -
data-ad-id属性供 JS 埋点时取值，保持前后端口径一致 - 不要依赖
utm_*参数做唯一归因——它们易被用户修改；需配合服务端签名或 session 绑定
unobserve 清理和点击事件的 preventDefault 冲突。广告 DOM 动态替换频繁，不清理观察器会内存泄漏；而某些广告组件自己绑了 click 并调用 preventDefault，你的监听器可能收不到事件。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
