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 — точка входа, которую ad-сервер открывает в iframe фиксированного размера. В обычно есть meta-тег для Google Ads. Кликабельность реализуется через clickTag: ad-сервер подменяет переменную clickTag в JS на трекинговый URL во время показа; JS вызывает window.open(clickTag). Размер ZIP и ассетов ограничен спецификациями IAB Display Creative (initial 200KB, polite до 2.2MB). Для production обычно ассеты должны быть self-contained внутри ZIP — внешние CDN-ссылки часто запрещены, кроме whitelisted доменов.

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