An option for the Standard Display format that allows for the creation of a custom HTML5 banner via the Zip-file upload tool. Use these specs whenever a fixed size placement (MPU, skyscraper, leaderboard, billboard or any other standard ad unit) needs bespoke animation, interaction or layout that the Image and Video templates cannot deliver.
Where a brief only calls for a single image or a single video per size, use the Standard Display - Simple Image & Video specs instead. Those templates need no development work and include overlays, endframes and audio controls out of the box.
Best suited for
- Campaigns that need animation, sequencing or interactivity inside a conventional display slot.
- Rich media concepts such as carousels, countdowns, expanding panels and product pickers at standard sizes.
- Executions with multiple clickable areas, each with its own destination.
Supported ad units
The format will render at the width and height configured in the creative parameters. Common sizes include 300x250, 300x600, 160x600, 320x50, 320x320, 336x280, 728x90, 970x250 and 980x240. Follow the publisher spec for any bespoke sizes.
Recommended default creative dimensions
Build each creative at the exact pixel dimensions of the placement it is delivering to. A 300x250 MPU should be built at 300x250, a 970x250 billboard at 970x250, and so on.
Supply one zip file per size. Each size is set up as its own creative in the platform, so a campaign running across five ad units needs five zip files. Do not attempt to serve one zip across multiple sizes.
Export raster assets at 2x the display size (e.g. 600x500 artwork for a 300x250 banner) so the creative stays sharp on high density screens, and keep individual images below 250 KB.
Format description and guidance
The zip is rendered inside an iframe that Adnami sizes to the width and height set in the creative parameters. Build to those dimensions and the creative will fill the slot exactly.
Structure your banner as shown below (this example is a 300x250 MPU):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Banner 300x250</title>
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
#banner {
position: relative;
width: 300px;
height: 250px;
overflow: hidden;
cursor: pointer;
}
#banner img {
position: absolute;
opacity: 0;
transition: opacity .6s ease-out;
}
#banner img.is-visible {
opacity: 1;
}
#logo { top: 20px; left: 20px; width: 120px; }
#cta { bottom: 20px; left: 20px; width: 140px; }
</style>
</head>
<body>
<div id="banner">
<img id="logo" src="assets/logo.png" alt="" />
<img id="cta" src="assets/cta.png" alt="" />
</div>
<script>
// ADNAMI CLICK TRACKING MACRO - DO NOT MODIFY //
const clickTagPrefix = "${CLICK_URL}",
// Landing Page - modify as required
clickURL = (window.adnmClick) ? window.adnmClick : "https://www.example.com",
// ID of your clickable HTML element - modify as required
clickElement = document.getElementById("banner");
// Click function
clickElement.addEventListener("click", function(e){
const exitUrl = clickTagPrefix + clickURL;
window.open(exitUrl, '_blank');
})
// Reveal the frames in sequence once the assets have loaded.
window.addEventListener("load", function () {
const frames = clickElement.querySelectorAll("img");
frames.forEach(function (frame, index) {
setTimeout(function () { frame.className = "is-visible"; }, index * 500);
});
});
</script>
</body>
</html> All creative assets (images, videos, scripts etc) used by your banner must be included within the creative Zip-file. Linking to assets hosted on external servers is not permitted, and may result in your ad being blocked by some vendors. The only exception to this rule is for webfonts hosted by font libraries for licensing purposes, such as Adobe Typekit, Google Fonts and MyFonts.
Relative asset paths and Content Security Policy. Relative paths inside the zip resolve against a <base href> that Adnami injects at serve time. A small number of publishers block base-uri via CSP. When that happens Adnami automatically rewrites relative paths to absolute ones for <img>, <script>, <source> and <link> elements and for url() references in inline <style> blocks. Relative paths inside external .css and .js files cannot be rewritten, so inline your CSS and JavaScript, or reference assets from inline styles, to stay safe on every publisher.
Video
Video is implemented as a standard HTML5 <video> element with the MP4 bundled inside the zip, exactly as you would on any web page. There is no separate video upload for this format, so the encoded file counts in full against the creative file weight budget. Encode accordingly, and keep the clip short.
To report video metrics (quartiles, completions and view-through rate) and to hold playback until the creative is in view, add the snippet from our API for measuring VTR guide, where video is a reference to the video element to be tracked. The API is only available once the creative is hosted on Adnami, so the fallback keeps local testing error free.
<video id="ad-video" src="assets/video.mp4"
width="300" height="250"
autoplay muted playsinline></video>
<script>
const video = document.getElementById("ad-video");
try {
__adnamiAdsAPI.v1.tracker.trackVideoElement(video);
__adnamiAdsAPI.v1.videoController.playIfInview(video);
} catch (e) {
console.log(`Failed to apply video tracking to ${video} - Offline`);
}
</script> Keep autoplay on the element as a fallback. When the API is unavailable, for example when previewing the zip on your own machine, the attribute is what starts the video instead.
Set muted and playsinline on any video that should start on its own. Browsers block autoplay for unmuted video, and without playsinline iOS will take the video fullscreen. Audio must only ever start in response to a user action, so provide an unmute control rather than playing with sound by default.
Do not use the loop attribute on a tracked video. Native looping suppresses the video’s ended event, so completions are never registered and view-through rate reports as zero. There is no need to loop the video yourself either. Once the video element is handed to the Adnami video controller it will automatically loop the video up to 5 times, in line with the animation limits below.
Click tags and tracking
The banner example above uses the single click URL method from our click tracking guide. The ${CLICK_URL} macro is replaced with the click tracker at serve time, and window.adnmClick carries the Click URL entered in the platform so the landing page does not need to be hard coded. If the URL contains unsafe characters, wrap it in encodeURIComponent().
For a creative with a single destination you may skip the click code entirely and leave Add automatic click button set to Enabled. The platform then places an invisible click layer over the creative and handles the exit and its tracking for you.
For interactive creatives, and for any creative with more than one destination, set Add automatic click button to Disabled and implement the clicks in the creative. The click layer otherwise sits above the whole banner and will block interaction with carousels, video controls and buttons. Give each clickable element its own listener, as in the multiple click URL method from the guide:
// ADNAMI CLICK TRACKING MACRO - DO NOT MODIFY //
const clickTagPrefix = "${CLICK_URL}",
// Landing Pages - modify as required
clickURL1 = "https://www.example.com/1",
clickURL2 = "https://www.example.com/2",
// IDs of your clickable HTML elements - modify as required
clickElement1 = document.getElementById("button1"),
clickElement2 = document.getElementById("button2");
// Click functions
clickElement1.addEventListener("click", function(e){
const exitUrl = clickTagPrefix + clickURL1;
window.open(exitUrl, '_blank');
})
clickElement2.addEventListener("click", function(e){
const exitUrl = clickTagPrefix + clickURL2;
window.open(exitUrl, '_blank');
}) Only total clicks are tracked for creatives with multiple exits. To measure clicks per destination, use third-party click trackers or UTM parameters on each URL.
Creative Lab Webinars
Join our resident Head of Creative, John Feltham, as he walks through the process of building HTML5 creatives.
Getting hands on with responsive HTML5
Diving Deeper into Responsive HTML5
Max total file weight
Max 3.5 MB per creative (recommended <1 MB for fast loading and optimal performance). Standard display placements are frequently subject to tighter publisher limits than high impact inventory, so confirm the ceiling for the buy before build. Everything inside the zip counts towards this limit, video included. All assets should be compressed and optimised to the lowest possible file weight.
Animation
Maximum of 5 loops.
Maximum animation time 30 seconds. This may vary by publisher, and many standard display placements cap animation at 15 seconds.
Asset type
HTML5, Adnami hosted by sharing a zip-file. HTML should be minified and optimised for fast loading.
Other Requirements
Do not link to any files or scripts hosted on external domains. All assets used should be included within the creative zip-file, or hosted on Adnami domains. Linking to resources on non-approved vendors may result in ads being blocked by Google Ads Manager and DV360.
Audio
Any audio must be user-initiated.
Trafficking checklist
1. Create a Standard Display placement and choose the required ad unit.
2. Select the Zip File banner type.
3. Upload the zip built for that size, and add the click URL.
4. Set Add automatic click button to Disabled for interactive creatives.
5. Preview the creative before trafficking to production, and repeat for each size in the buy.
Template Details
Zip File
General
| Parameter | Purpose | Default |
|---|---|---|
| File | Upload a zipped HTML bundle (HTML/CSS/JS plus assets) that powers the file. Keep the archive within platform size limits. | |
| 1.0 Click Url (optional) | Destination URL triggered when the user interacts with this element. Include https:// and any tracking parameters. | |
| 1.1 Add automatic click button | Adds an invisible button on top of the creative that opens the Click URL. Note this can block interaction with the creative, for interactive creative set to Disabled and ensure click URLs are implemented at creative level. | Enabled | choices: Enabled, Disabled |