These guidelines apply to all HTML5 display creatives submitted to XR as ZIP bundles for ad serving.
1. Required Structure
Single Root File
Each creative must have a single root file named index.html.
All asset references (images, CSS, JS, fonts, video, etc.) must use relative paths.
✅ src="./images/bg.jpg"
❌ src="https://example.com/images/bg.jpg"
2. Ad Size Declaration
Creatives must declare dimensions using a <meta> tag in the <head> of index.html.
Example:
<head>
<meta charset="UTF-8" />
<meta name="ad.size" content="width=300,height=250" />
<title>300x250 HTML5 Banner</title>
</head>
width and height must match the placement size booked in the media plan.
3. Clickthrough Implementation
Using clickTag
The creative must read the clickthrough URL from the
clickTagquery parameter.Do not hardcode landing page URLs into the creative.
Ad servers and verification vendors rely on
clickTagto append tracking macros.
Recommended implementation (single exit)
Example:
<script>
(function () {
var params = new URLSearchParams(window.location.search);
var clickTag =
params.get('clickTag') || 'https://defaultlanding.com';
document.addEventListener('click', function () {
window.open(clickTag, '_blank');
});
})();
</script>
Multiple Exits (Optional)
If multiple clickthroughs are required, use
clickTag0,clickTag1, etc.Attach those to specific elements instead of adding multiple global listeners.
Example:
<script>
(function () {
var params = new URLSearchParams(window.location.search);
var clickTag0 = params.get('clickTag0') || 'https://defaultlanding.com/a';
var clickTag1 = params.get('clickTag1') || 'https://defaultlanding.com/b';
document.getElementById('cta-main').addEventListener('click', function (e) {
e.stopPropagation();
window.open(clickTag0, '_blank');
});
document.getElementById('cta-secondary').addEventListener('click', function (e) {
e.stopPropagation();
window.open(clickTag1, '_blank');
});
})();
</script>
Click Event Rules
A single global click listener is sufficient for most units.
Additional listeners are allowed for specific elements (e.g., multiple exits) as long as:
clickTag/clickTagNare used.Conflicts or double‑fires are avoided.
4. External Resources and Packaging
No Unapproved External Dependencies
All required assets must be included inside the creative ZIP unless explicitly whitelisted.
This includes:
JavaScript libraries (e.g., jQuery, GSAP)
Fonts
Images
CSS
Video files (when applicable)
Not allowed (unless pre‑approved):
Loading libraries directly from CDNs:
❌ <script src="https://cdn.example.com/jquery.min.js"></script>
❌ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
Loading image, CSS, or video assets via
http://orhttps://URLs.
If a shared CDN or font configuration is required, it must be specifically approved in advance.
Packaging Requirements
Submit one ZIP file per creative.
ZIP must contain:
index.html
All JS files
All CSS files
All images, fonts, and icons
Any other assets referenced by index.html
All references inside index.html, CSS, and JS must be relative paths to files in the ZIP.
Total file weight (initial load and polite/subload) must comply with IAB specifications and any placement‑specific limits.
5. Prohibited / Non‑Compliant Patterns
No Nested iFrames
HTML5 creatives must not contain an <iframe> element within index.html.
Why this is disallowed:
clickTaghandling breaks:The inner iframe does not automatically inherit the ad server’s query string.
JavaScript isolation:
Scripts inside an iframe cannot reliably communicate with the parent context.
Measurement failures:
Third‑party verification vendors (e.g., IAS, DV, MOAT) may not be able to inspect or measure content inside nested iframes.
Rendering and policy issues:
Platforms like Google Ad Manager can block, sanitize, or modify nested iframes.
Data integrity:
Click and impression metrics become unreliable due to an additional sandbox layer.
Therefore:
❌ Do not embed <iframe> tags in index.html.
✅ All content and logic must run directly in index.html and its included JS/CSS files.
No Hardcoded Landing URLs
Do not hardcode destination URLs in JS, HTML, or inline handlers:
❌ window.open('https://google.com');
❌ <a href="https://brand.com" target="_blank">
Always route clickthroughs through the clickTag parameter(s) so that platforms can:
Inject required tracking macros.
Swap or update destinations without re‑trafficking creative files.
No Cross‑Origin Asset Links
Do not link to creative assets via absolute HTTP(S) URLs:
❌ <img src="https://example.com/assets/banner.jpg" />
❌ <link rel="stylesheet" href="https://example.com/styles.css" />
All creative‑specific assets must be downloaded and referenced locally using relative paths within the ZIP.
Audio / Video Autoplay
Must follow IAB standards and common browser policies:
No autoplay with audio on page load.
Autoplay is allowed only when:
The media is muted, or
The user has explicitly interacted (e.g., click/tap) to initiate playback.
Provide clear controls for:
Play / Pause
Mute / Unmute
6. Summary: Vendor‑Facing Requirements
When preparing and delivering HTML5 display creatives, ensure that:
index.html is the entry point and contains:
<meta name="ad.size" content="width=...,height=...">No
<iframe>elements.
The creative:
Reads clickthrough URLs from
window.location.searchusingclickTag(andclickTag0,clickTag1, etc. when multiple exits are needed).Uses
window.open(clickTag, '_blank')(or equivalent) for clickthrough navigation.
The ZIP bundle:
Contains all assets (HTML, JS, CSS, images, fonts, etc.).
Uses only relative asset paths.
Meets IAB and placement‑specific file weight limits.
External resources:
Do not use external JS, fonts, or other assets from CDNs or third‑party domains unless explicitly whitelisted and approved in advance.
Media behavior:
Respects autoplay and user interaction rules for audio/video.
Following these standards helps ensure that campaigns run correctly and are compatible with Extreme Reach (XR), Google Ad Manager, The Trade Desk, IAS, DV, MOAT, and other major ad platforms and verification vendors.