An option for the Total Takeover format, that allows for the creation of a custom HTML5 takeover, via the Zip-file upload tool or a third party tag. The Total Takeover combines a full-screen Wallpaper behind the publisher page with a Top Banner at the top of the article and one or more Mid Banners further down the page. The wallpaper remains visible behind both the Top Banner and Mid Banner, so all three placements can be designed to feel like a single, connected campaign.
Guide to skins
- The difference between our Seamless Skin & Fluid Skin formats
- The respective templates (i.e. Seamless Image Skin, Seamless Sliding Skin, Fluid Skin Image, Fluid Skin Video, etc.) within our Seamless & Fluid Skin formats
- Tips and best practice for using overlays
Creative Lab Webinars
Join our resident Head of Creative, John Feltham, as he walks through the process of building HTML5 creatives.
Diving Deeper into Responsive HTML5
Getting hands on with responsive HTML5
Recommended default creative dimensions
Wallpaper:
2560x1440px (Responsive HTML5 Zip File or 3rd Party Tag)
Top Banner:
Image or Video: matches the country billboard size below (JPG, WEBP or MP4)
HTML5: width 100%, height 100% (HTML Zip File or 3rd Party Tag), responsive up to a maximum width of 1280 pixels
Mid Banner:
Image or Video: 1280x720px (JPG, WEBP or MP4)
HTML5: width 100%, height 100% (HTML Zip File or 3rd Party Tag)
Top Banner sizes vary across publishers and between countries, so please read carefully to ensure your assets are produced correctly.
For HTML5 Top Banners, the creative width should be responsive (width: 100%) up to a maximum width of 1280 pixels. The height will match the billboard height from the list below.
Billboard placement sizes by country:
- 🇦🇹 AT: 1000x250px
- 🇨🇭 CH: 1000x250px
- 🇩🇪 DE: 1000x250px
- 🇩🇰 DK: 930x180px
- 🇫🇮 FI: 1000x400px
- 🇫🇷 FR: 970x250px
- 🇳🇱 NL: 970x250px
- 🇳🇴 NO: 980x300px
- 🇵🇱 PL: 970x250px
- 🇸🇪 SE: 1000x240px
- 🇬🇧 UK: 970x250px
Format description and guidance
The Total Takeover is made up of three placements that the user sees at the same time:
- The Wallpaper - a full-screen background that stays in view as the user scrolls, usually carrying branding in the left and right side panels.
- The Top Banner - the main banner at the top of the article. This is the most prominent placement and usually carries the headline, logo and call-to-action.
- The Mid Banner - one or more in-article banners further down the page that extend the campaign as the user keeps reading.
The Wallpaper sits behind both the Top Banner and Mid Banner, and remains visible behind both of them. This means each banner can either be designed with a transparent background so the wallpaper shows through behind it, or with a fully opaque background that sits on top of the wallpaper like a traditional banner. Mixing these approaches is one of the easiest ways to make a takeover feel like a single, connected campaign rather than three unrelated creatives.
The HTML5 option allows each placement to be built as a fully custom responsive creative. All three placements (Wallpaper, Top Banner and Mid Banner) must be built with the width and height set to 100%, so that they scale responsively based on the size of the container they are placed in.
For the Wallpaper, the centre of the creative sits behind the publisher article for most of the page, but is partially revealed each time a Mid Banner scrolls into view (Mid Banners can be designed with transparent areas to expose the wallpaper behind them). This means the left and right side panels are the safest place for branding that must stay visible at all times, while the centre of the wallpaper can be used for additional artwork that ties in with the Mid Banners as they appear.
To help line the Wallpaper, Top Banner and Mid Banner up with the publisher page, the following variables are made available to the Wallpaper creative at runtime:
const contentWidth = window.contentWidth || 1000,
topHeight = window.topHeight || 250;
contentWidth is the width (in pixels) of the publisher content column that covers the centre of the wallpaper, and topHeight is the height of the Top Banner. These can be used to position branding around the visible side panels.
Note - these variables are only available to creatives uploaded to Adnami as a zip-file. Third party tags must use static values that correspond to the publisher specs.
If your Top Banner or Mid Banner contains interactive elements (eg video controls, carousels, multiple clicktags etc), they should be built as separate banners that sit on top of the wallpaper. Simple decorative elements can also be incorporated as part of the wallpaper itself.
All creative assets (images, videos, scripts etc) used by your creative must be included within the zip-file uploaded for each placement. 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, MyFonts etc.
Max total file weight
3.5 MB per placement. For best performance, all assets should be compressed and optimized to the lowest possible file weight.
Animation
Maximum animation time 30 seconds (may vary by publisher).
Asset type
Responsive HTML5 (either Adnami hosted by sharing a zip-file or served via 3rd party tags).
HTML must be minified and optimized for polite load.
Click tags and tracking
For Adnami hosted creatives, see our clicktags and tracking guide.
The Total Takeover format supports three separate clickURLs & trackers - one for the Wallpaper, one for the Top Banner and one for the Mid Banner.
To enable video tracking metrics, see our API for measuring VTR guide.
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
User-initiated.
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 |
Third Party Tag
General
| Parameter | Purpose | Default |
|---|---|---|
| Click url (optional) | Destination URL triggered when the user interacts with this element. Include https:// and any tracking parameters. | |
| Creative Positioning | Controls how the creative positioning aligns inside the frame. Pick the focal point that keeps the subject in view. | default | choices: default, center |
| Third Party Tag | Ad server or measurement tag injected for the third party tag. Paste the snippet exactly as provided. | |
| Background Colour | This colour will be visible in the behind the if there is any empty space. | #00000000 |