上个月朋友找我说他们公司官网要加一套广告系统需求拆出来其实挺朴素首页要弹窗文章页要底部横幅用户关掉后当天别再出现还要能统计曝光和点击。他问我这活儿复杂吗我说复杂也不复杂简单也不简单关键是网页广告的实现技术你得理清楚尤其是JavaScript这一层细节一个都偷不了懒。这篇文章就当是我那段时间的工作笔记把网页广告从方案选型、样式布局到JavaScript代码示例、常见问题排查完整过一遍给同样在捣鼓广告模块的同学参考。1. 网页广告这块业务到底在做什么先把实现思路理清楚1.1 广告形式那么多怎么选最合适网页广告按形态分常见的有弹窗、角落漂浮、顶部底部横幅、文章内嵌原生、全屏插屏、下拉浮层这几种。每种形态背后的交互成本和用户打扰程度完全不同选型不能拍脑袋。弹窗广告适合强提醒场景比如活动上线、新品发布用户进来的第一时间就得看到。通常做法是透明遮罩层加居中卡片强制用户把注意力放到弹窗上再点关闭转化率最高但打扰度也最大用多了用户直接关页面。角落漂浮广告温和很多固定在视口右下角或左下角用fixed定位带展开收起按钮用户可以随手关掉适合常驻引导比如关注公众号、下载App。底部横幅在移动端尤其常见不遮挡正文用户滚动时自然看到牺牲的曝光量换来的是更低的用户反感度。选哪种形态核心看两个指标业务目标是追求曝光还是追求点击以及内容容错度。资讯类页面尽量别遮挡正文电商活动页则可以把弹窗当作第一优先级。实际项目里我习惯先给产品列个简单矩阵把广告形态、目标、用户打扰级别、技术成本放一起让需求方自己选比来回讨论高效得多。1.2 技术方案选型原生JavaScript还是广告平台SDK网页广告最怕的不是写不出代码而是被平台规则、浏览器策略、性能瓶颈反复卡住。技术选型上通常有三条路。第一条是纯自研用原生JavaScript或TypeScript从零封装广告模块配合配置项下发广告位参数。真实业务里我比较推荐这条路因为广告形态更新太频繁自研掌控力最强不会像某些第三方SDK一样出现版本幽灵依赖。缺点是工作量稍大埋点体系、设备兼容、异常监控都要自己兜底。第二条是接入现成广告平台SDK比如AdSense这类成熟服务。优点是真的省心广告主物料、结算、反作弊平台全包你只要放一段脚本。缺点是可控性差样式常被模板限制投放策略由平台算法主导你的内容形态和广告匹配度不一定理想。第三条是混合模式自研展示容器广告位内容来自配置后台部分楼层交给广告平台托管。我在很多内容站上见过这种架构实测最灵活。后面讲的内容主要围绕自研容器加配置驱动展开这是多数开发能直接照着落地的方案。还有个细节要考虑广告模块和现有框架的关系。如果站点本身是Vue或React这类SPA框架把广告写成框架组件更顺手。如果站点是传统多页应用后端模板渲染那种封装一个原生JS广告初始化脚本在页面底部引入反而兼容性最好不依赖框架生命周期。我自己的习惯是广告模块尽量独立别和业务代码紧密耦合这样页面改版时广告模块能原封不动搬走。2. 广告位骨架搭建样式与布局的细节2.1 常见广告位的CSS实现套路先梳理几种典型广告位的骨架结构不讨论视觉设计只说定位和层级。弹窗广告标准结构是两层全屏半透明遮罩加居中广告卡片。遮罩用position: fixed铺满视口z-index给到9000甚至9999广告卡片用transform: translate(-50%, -50%)配合left: 50%; top: 50%居中。这个方案的好处是无论视口怎么变广告都不会抖动。代码骨架大致是这样.ad-modal-mask { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.55); z-index: 9000; display: flex; align-items: center; justify-content: center; } .ad-modal-card { width: 320px; max-width: 90vw; background: #fff; border-radius: 12px; overflow: hidden; position: relative; }角落漂浮广告更简单position: fixedright: 20pxbottom: 20px容器给个合适的z-index。这里容易踩一个坑固定定位元素在低版本Android WebView里容易出现位移或闪烁。解决方案是给容器加backface-visibility: hidden同时尽量用right和bottom固定不要用top/bottom双值动态计算。底部横幅要特别处理安全区。iPhone的刘海屏和底部Home条会遮挡内容CSS里可以用env(safe-area-inset-bottom)环境变量.ad-bottom-banner { position: fixed; left: 0; right: 0; bottom: 0; padding-bottom: env(safe-area-inset-bottom); z-index: 8000; background: #fff; box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08); }如果忽略这个安全区广告底部的关闭按钮很容易被手势条挡住用户怎么点都关不掉直接引发投诉。2.2 层级、动画与响应式那些坑广告层的层级管理是网页广告实现技术里最容易翻车的点之一。我一般按这个原则来分配主内容层控制在100以内header和nav给1000弹窗遮罩给9000漂浮层给8000页面内部的toast提示给10000以上。这样即使第三方脚本里不小心设置了一个较高的z-index最多是盖住漂浮层不至于把页面完全弄乱。进场动画方面建议只做透明度变化和轻微位移不要搞复杂旋转和缩放。原因有两点一是复杂动画在弱终端上会造成主线程卡顿二是CSS动画容易让fixed定位元素在部分浏览器里产生新的包含块导致定位意外失效。这里有个经典问题当某个DOM元素带有transform属性时它内部的固定定位子元素会相对它定位而不是视口。很多同行遇到广告明明fixed了却跑到奇怪位置的问题八成是父级存在transform属性。响应式方面广告位尺寸尽量不要写死。PC端和移动端的视觉尺寸差异很大更合理的做法是给广告容器一个最小高度和最大宽度物料图片用object-fit: contain适配避免被拉伸变形。另外广告位的高度如果上屏前不确定容易引发页面重排建议给容器预留占位高度哪怕先用透明占位图填着也能明显改善布局稳定性对LCP和CLS这类性能指标也有帮助。3. 广告核心逻辑的JavaScript代码示例详解3.1 可复用的广告管理对象这里给出一套可复用的AdManager类核心思路是配置驱动。广告位的类型、容器、展示频率、关闭后的记忆时长全部写在配置对象里脚本初始化时读取配置自动完成展示、关闭、统计这一整套流程。class AdManager { constructor(configs) { this.configs configs; this.shownSet new Set(); } init() { this.configs.forEach((cfg) { const container document.querySelector(cfg.selector); if (!container) return; const shouldShow this.checkFrequency(cfg); if (shouldShow) { this.show(cfg, container); } }); } checkFrequency(cfg) { if (!cfg.frequency || !cfg.frequency.type) return true; const type cfg.frequency.type; const key ad_freq_${cfg.name}; const record JSON.parse(localStorage.getItem(key) || {}); const now Date.now(); if (type once_per_session) { if (sessionStorage.getItem(key)) return false; sessionStorage.setItem(key, 1); return true; } if (type once_per_day) { const lastDate record.date; const today new Date().toDateString(); if (lastDate today) return false; localStorage.setItem(key, JSON.stringify({ date: today })); return true; } if (type interval_minutes) { const gap cfg.frequency.gapMinutes * 60 * 1000; if (record.lastShow now - record.lastShow gap) return false; localStorage.setItem(key, JSON.stringify({ lastShow: now })); return true; } return true; } show(cfg, container) { container.classList.add(cfg.showClass || ad-active); this.shownSet.add(cfg.name); this.track(cfg, impression); } }这个类的思路很直接构造函数接收一组广告位配置init方法遍历配置并判断是否展示checkFrequency处理不同的频率控制策略show方法负责真正的展示动作并触发曝光埋点。用的时候大概是这样的const adManager new AdManager([ { name: home_modal, selector: #home-modal, frequency: { type: once_per_session } }, { name: bottom_banner, selector: #bottom-banner, frequency: { type: interval_minutes, gapMinutes: 30 } } ]); adManager.init();这套设计有几个好处广告位新增不用改逻辑加一段配置就行频率策略是模块化的后续要加每周一三五展示这类规则只需要扩展checkFrequency埋点集中在show方法里后续接第三方统计也方便。3.2 弹窗广告与倒计时关闭逻辑弹窗广告最核心的交互是关闭逻辑这里要区分两种情况普通关闭和倒计时后才能关闭。普通关闭一般就是一个右上角的X按钮但很多广告需求会要求用户停留几秒后才能关闭避免一进来就秒关。倒计时按钮的实现方式有两种常见写法。第一种是提前渲染倒计时数字文案function initCountdownClose(btn, seconds, callback) { let remain seconds; const originalText btn.textContent; btn.disabled true; const timer setInterval(() { remain - 1; btn.textContent remain 0 ? ${remain}s : originalText; if (remain 0) { clearInterval(timer); btn.disabled false; btn.addEventListener(click, callback, { once: true }); } }, 1000); } initCountdownClose( document.querySelector(#modal-close-btn), 3, () { document.querySelector(#home-modal).classList.remove(ad-active); } );第二种是配合canvas绘制圆环倒计时视觉上更精致但实现原理一样都是通过setInterval或requestAnimationFrame更新剩余时间。这里有个容易忽略的细节弹窗出现后页面背景应该禁止滚动。常见做法是给body加overflow: hidden但这会导致滚动条消失页面宽度发生变化。更好的方案是记录滚动条宽度并补偿function lockScroll() { const scrollBarWidth window.innerWidth - document.documentElement.clientWidth; document.body.style.overflow hidden; document.body.style.paddingRight ${scrollBarWidth}px; } function unlockScroll() { document.body.style.overflow ; document.body.style.paddingRight ; }如果弹窗同时需要响应Esc键关闭监听keydown事件时要注意区分触发来源避免全局开关互相干扰。3.3 角落漂浮广告实现角落漂浮广告的核心技术点有两个一是展开和收起的状态切换二是广告关闭后的状态记忆。先看状态切换。function initFloatingAd(container, options {}) { const expandBtn container.querySelector(.ad-float-expand); const collapseBtn container.querySelector(.ad-float-collapse); const content container.querySelector(.ad-float-content); expandBtn.addEventListener(click, () { content.classList.add(ad-float-content-open); expandBtn.classList.add(ad-float-hide); }); collapseBtn.addEventListener(click, () { content.classList.remove(ad-float-content-open); expandBtn.classList.remove(ad-float-hide); }); if (options.autoHideAfter) { setTimeout(() { content.classList.remove(ad-float-content-open); expandBtn.classList.remove(ad-float-hide); }, options.autoHideAfter); } }默认展开、几秒后自动收起这是很多网站的通用交互。收起后保留一个小按钮用户想再打开点一下就行。关闭后的状态记忆通常是存储到localStorage。需要注意一点角落漂浮广告的关闭记忆不建议设太久因为它的打扰程度低用户可能过两天又愿意看了。一般存7天就够设置一个时间戳过期后自动重新展示。3.4 滚动触发与展示频率控制滚动触发广告的目标是在用户滚到页面特定位置时展示广告通常是阅读进度50%或即将到达评论区时。实现方式是通过IntersectionObserver监听一个哨兵元素比监听scroll事件性能好得多。function initScrollTriggerAd(sentinelSelector, adSelector, options {}) { const sentinel document.querySelector(sentinelSelector); const ad document.querySelector(adSelector); if (!sentinel || !ad) return; const observer new IntersectionObserver((entries) { entries.forEach((entry) { if (entry.isIntersecting !ad.classList.contains(ad-active)) { ad.classList.add(ad-active); if (options.onShow) options.onShow(); observer.disconnect(); } }); }, { threshold: 0.5 }); observer.observe(sentinel); }这里有个经验点threshold设0.5表示元素一半进入视口才触发实际项目中经常根据广告出现位置调整设太小容易提前触发设太大可能永远不触发。如果页面很长建议在滚动区域的中后部放哨兵元素。展示频率控制的另一种场景是广告轮播切换。比如文章页底部横幅有多套物料每隔几秒自动切换一套还要保证点击不中断。这里建议用setInterval配合手动切换事件并在用户点击时重置轮播计时器避免刚点完一下就被切走。function initAdCarousel(container, delay 5000) { const slides container.querySelectorAll(.ad-slide); let current 0; let timer setInterval(nextSlide, delay); slides.forEach((slide, index) { slide.addEventListener(click, () { clearInterval(timer); timer setInterval(nextSlide, delay); }); }); function nextSlide() { slides[current].classList.remove(ad-slide-active); current (current 1) % slides.length; slides[current].classList.add(ad-slide-active); } }这套逻辑不复杂但容易在边界条件上出错比如最后一页切换到第一页的循环判断、用户反复点击导致的定时器堆积实际编码时多加注意。4. 广告埋点统计与点击事件处理4.1 点击追踪怎么埋才不漏广告的效果评估离不开点击和曝光数据埋点是整个广告模块里最容易被低估的部分。很多初做广告的同事以为埋点就是给广告链接加个onclick事件实际上要处理的问题比这个多。首先曝光和点击要区分开。曝光是广告出现在用户视口里就算一次不管用户有没有看到点击是用户真实点击了一次。曝光埋点建议配合前面讲的IntersectionObserver来做广告元素进入视口时发送一次曝光请求而不是页面加载时就发送。原因很简单用户可能根本没滚到广告位置加载就算曝光会让数据虚高。点击埋点则是点击发生时就上报。其次要防止重复上报。IntersectionObserver触发曝光后要立即unobserve避免用户来回滚动导致同一次广告展示被统计多次。下面这个代码片段处理了这个问题let impressionSent false; observer new IntersectionObserver((entries) { entries.forEach((entry) { if (entry.isIntersecting !impressionSent) { impressionSent true; sendImpresssion(adId); observer.unobserve(entry.target); } }); }, { threshold: 0.3 });4.2 数据回传与渠道标识数据回传最简单的方案是动态创建一个Image对象把参数拼在URL上请求既能上报数据又不会造成页面跳转。这种方案的兼容性极好比fetch和XMLHttpRequest都要稳因为图片请求不会受跨域预检和CORS策略影响。function sendTrack(eventType, adName, extra {}) { const params new URLSearchParams({ event: eventType, ad_name: adName, ts: Date.now(), ...extra }); const img new Image(); img.src /track?${params.toString()}; }用的时候sendTrack(impression, home_modal)就是曝光sendTrack(click, home_modal, { channel: campaign_01 })就是点击。渠道标识一般从外链参数里解析出来比如用户是从朋友圈还是短视频平台进来的通常是通过URLSearchParams从location.search里读取存到sessionStorage里广告点击时一起带回服务端这样归因才准确。广告点击的跳转逻辑建议统一走一个中转函数不要直接在广告链接上写死目标地址。目的是为了在跳转前把点击事件上报、做防重复点击校验还能支持后续的灰度策略。5. 广告遇到拦截与控制台操作常见问题与排查实录5.1 javascript:void(0) 这类伪协议问题市面上大量广告物料来自第三方链接经常写成hrefjavascript:void(0)或hrefjavascript:;本意是让按钮不跳转、只触发绑定的事件。这种写法在老浏览器里没有大问题但在Chrome 85之后的版本里会提示请启用JavaScript以继续或直接不执行影响用户点击关闭按钮的正常交互。排查思路很明确不要在href里写JavaScript伪协议改成普通href加事件监听或者干脆用button元素。如果广告代码是从第三方物料里带进来的视觉上必须用a标签可以写成href#none然后阻止默认行为。document.querySelectorAll(a.ad-link).forEach((link) { link.addEventListener(click, (e) { e.preventDefault(); const target link.getAttribute(data-target); // 处理点击上报后跳转 }); });用>function handleVideoEnded() { const video document.querySelector(video); if (!video || video.currentTime video.duration * 0.9) return; sendTrack(video_complete, adName); // 后续关闭或跳转 }这样即使用户手动触发ended事件只要播放进度没到位业务逻辑也不会执行广告主的真实播放数据也不至于被刷。5.3 广告不显示或层级被盖住的经典排查广告不显示的原因通常集中在三处CSS没有加载、JavaScript初始化报错、广告位被拦截插件屏蔽。用开发者工具看控制台是最快的定位方式先看有没有红色报错再看Elements面板里广告容器有没有插入相关节点。如果是层级被盖住优先检查两个点广告容器的z-index是否高于页面其他元素的z-index以及广告容器祖父级有没有transform、filter、will-change属性。前面说过transform会创建新的层叠上下文子元素的z-index再高也只在祖父级的层叠上下文内有效这是滚动广告被遮挡的最常见原因。还有一种比较隐蔽的情况广告容器在display: none的父元素里初始化时JavaScript判断元素可见性直接返回false导致广告逻辑没执行。排查手段是给广告容器写一条独立的可见性判断判断时尽量使用getBoundingClientRect()而不是offsetParent后者在某些旧浏览器里并不准确。6. 个人经验与后续扩展建议做网页广告这几年我发现真正考验开发者的往往不是写一两段动画或弹窗代码而是把整套逻辑做得稳定、可控、不惹用户烦。这里分享几个我自己的做法。广告位配置尽量走后台下发不要写死在代码里。物料地址、展示策略、开始结束时间都做成配置项运营改文案就不用找开发发版省下的沟通成本非常可观。所有广告位都要做兜底降级。如果广告接口超时或拉取失败页面不能白屏也不能因为一个广告位的问题卡住整个页面脚本。我的习惯是所有广告位初始化都包一层try-catch并且给接口设置超时时间超时就跳过该广告位。最后提醒一点广告体验直接关系到站点口碑。弹窗用得越克制用户对广告的反感度越低。技术手段能实现很多花哨的展示方式但真正留住用户的永远是产品对用户注意力的尊重。这个方向后续还能扩展的方向不少比如接入服务端渲染的广告样式、基于用户行为做广告位智能排序、把广告系统和推荐算法打通。从技术角度讲这些都值得折腾但基础始终是先把展示、关闭、追踪这套底层做扎实。