HTML5 横幅创意测试样本

ZIP 中的 HTML5 横幅是上传至 Google Ads、Campaign Manager 360 (DCM)、DV360、Xandr 等广告服务器的标准格式。每个 ZIP 包含 index.html + 资源,并实现 clickTag 契约。样本覆盖各种复杂度:从带点击的静态图片到 CSS 和原生 JS 动画、带视频的 rich media,以及具有两种状态的 expandable 横幅。解压并在浏览器中打开 index.html 以在本地检查渲染效果。

示例文件:简单静态横幅 300x250 — 图片 + clickTag
简单静态横幅 300x250 — 图片 + clickTag
2.5 Kb
示例文件:静态 leaderboard 728x90 — 图片 + clickTag
静态 leaderboard 728x90 — 图片 + clickTag
2.7 Kb
示例文件:CSS 动画 300x250 — 通过 @keyframes 实现三帧,无 JS
CSS 动画 300x250 — 通过 @keyframes 实现三帧,无 JS
3.0 Kb
示例文件:CSS 动画 skyscraper 160x600 — 垂直滑动
CSS 动画 skyscraper 160x600 — 垂直滑动
2.6 Kb
示例文件:JS 动画 300x250 — 通过 class 切换实现交错显现
JS 动画 300x250 — 通过 class 切换实现交错显现
2.7 Kb
示例文件:Half-page 300x600 — 内置 tween 引擎、polite load、多层动画
Half-page 300x600 — 内置 tween 引擎、polite load、多层动画
1.7 Kb
示例文件:Rich media 300x250 含视频 — autoplay muted + mute 按钮,clickTag
Rich media 300x250 含视频 — autoplay muted + mute 按钮,clickTag
1.3 Kb
示例文件:Expandable 300x250 → 600x500 — hover/tap 两种状态,独立 CTA
Expandable 300x250 → 600x500 — hover/tap 两种状态,独立 CTA
3.3 Kb

🧠 HTML5 横幅工作原理

ZIP 内部始终有一个 index.html — 广告服务器在固定尺寸的 iframe 中打开的入口点。<head> 中通常有一个用于 Google Ads 的 meta 标签 <meta name="ad.size" content="width=W,height=H">。可点击性通过 clickTag 实现:广告服务器在展示时把 JS 中的 clickTag 变量替换为跟踪 URL;JS 调用 window.open(clickTag)。ZIP 和素材的大小受 IAB Display Creative 规范限制(initial 200KB,polite 最高 2.2MB)。在生产环境中,素材通常必须 self-contained 于 ZIP 内 — 外部 CDN 链接通常被禁止,白名单域名除外。

📦 ZIP index.html + 资源 ⬆️ Ad Server Google Ads DCM / DV360 🌐 页面中的 iframe 固定大小 ad.size meta 🖱️ 点击 window.clickTag 服务器替换 🎯 Landing page + 跟踪 点击