广告脚本须全局异步引入一次，容器需静态声明且class/id严格匹配，Postback用不可见img打点，全站必须HTTPS。
广告脚本必须异步加载，且不能重复引入
多数联盟（如百度百青藤、Google AdSense）的 JS 脚本设计为单例运行，重复 <script src="xxx"></script> 会导致 slotbydup 或 adsbygoogle 初始化失败，广告不展示。常见错误是：在多个组件里各自引入脚本，或在 Vue/React 中每次渲染都动态插入 script 标签。
正确做法是只在全局入口（如 index.html 的 <head> 或 <body> 顶部）引入一次，并加 async 和 defer：
<script type="text/javascript" src="//cpro.baidustatic.com/cpro/ui/cm.js" async defer></script>
- 不要在 Vue 组件
mounted里用document.createElement('script')动态加载同一脚本 - 若使用构建工具（如 Vite/Webpack），避免将联盟脚本打包进 bundle，应始终外链
- 检查浏览器 DevTools 的 Network 面板，确认该 JS 只请求一次且状态码为 200
广告容器必须提前声明，且 class/id 必须与代码位配置完全一致
联盟代码依赖 DOM 元素作为“占位符”，比如百度要求 container: "_gpunkxjudct" 对应一个 <div class="_gpunkxjudct"></div>。如果容器未渲染完成就执行 push()，广告会静默失败，控制台无报错但广告空白。
典型场景包括：
立即学习“前端免费学习笔记（深入）”；
- Vue/React 中容器在
v-if或useState切换后才出现，但push()已提前执行 - 容器被 CSS
display: none或visibility: hidden隐藏，部分联盟（如腾讯 H5 SDK）会跳过不可见容器 - class 名含空格、大小写错误，或用了 ID 却在代码中传了 class 值（如传
id="ad-1"却写container: "ad-1"）
建议统一用 class 容器，并确保它在 <body> 中静态存在，再在其后紧跟广告单元代码：
<div class="ad-banner"></div>
<script type="text/javascript">(window.slotbydup = window.slotbydup || []).push({id: "u6341556", container: "ad-banner", async: true});</script>
Postback 转化回传必须用 <img> 打点，不能用 fetch 或 XMLHttpRequest
广告联盟的 Postback URL（如 https://xml.adnetwork.com/post?click_id=abc123&value=299）本质是服务端日志采集，浏览器端只需触发一次 GET 请求，无需响应体解析。用 fetch 不仅可能被 CORS 阻止，还会因缺少凭据（credentials: 'include'）导致 Cookie 未携带，使归因失效。
安全可靠的做法是创建一个不可见 <img> 标签：
<img src="https://xml.adnetwork.com/post?click_id=abc123&value=299" width="0" height="0" alt="" style="display:none">
- 必须在页面加载完成（
DOMContentLoaded或load事件后）立即插入，避免用户跳转丢失 - URL 中的参数需从当前页面 URL 解析（如
new URLSearchParams(location.search).get('click_id')），不能硬编码 - 避免多次触发同一 click_id，否则可能造成重复计费；可在触发后移除该
<img>或加标记防止重入
HTTPS 是硬性前提，HTTP 页面广告基本无法填充
所有主流联盟（百度、腾讯、Google）在 2026 年已强制要求媒体站点使用 HTTPS。HTTP 页面下，广告请求会被浏览器主动拦截（Mixed Content），或广告平台直接拒绝返回素材，表现为广告容器留白、控制台报 Blocked loading mixed active content。
即使你本地开发用 http://localhost 能看到广告，上线后也必然失败。检查项包括：
- 网站是否已部署有效 SSL 证书（非自签名）
- HTML 中所有资源（尤其是广告脚本）是否仍写死
http://协议（应改为//或https://） - 后端代理（如 Nginx）是否透传了
https协议头，导致前端 JS 误判为 HTTP 环境
最简验证方式：打开 Chrome DevTools → Security 标签页，确认显示 “Connection secure”。否则，广告填充率会趋近于零，且无明确错误提示。
