Adform – HTML5 Custom Header (628x162, 970x250, 1272x328)

PRODUCTION
GUIDE
Adform – HTML5 Custom
Header (628x162,
970x250, 1272x328)
Production Guide
1
Table of Contents
HTML5 Custom Header (628x162, 970x250, 1272x328)
2
User Experience
2
Creative assets
2
Banner asset
2
Additional Information
3
Other
4
2015.03.27
Production Guide
2
HTML5 Custom Header (628x162,
970x250, 1272x328)
The format is a responsive HTML ad.
User Experience
The format is a responsive HTML ad unit with video, which can be scaled across three page widths
(2, 3, 4- column views) and displayed as a 628x162 ad, 970x250 ad, or 1272x328 ad. On “Close”
button click, the ad collapses to the initial stage displaying an 88x31 “Show Ad” button. The
expanded stage can be called out as many times as the “Show Ad” button is clicked. The ad can
offer additional rich media experience. It accommodates a link to the predefined landing page.
Creative assets
The following items are to be delivered by a creative agency:


Banner asset containing manifest.json file and HTML file zipped together with images,
scripts and other material;
The ad must have a 970 (w) x 250 (h) backup image file assigned through the assets in
Adform system. This backup image is used on IE8.
Note: manifest.json file and HTML file should be in the root directory of the .zip file.
Banner asset

Manifest.json file should define the ad dimensions and the HTML file which is used as a
banner source:
{
"version": "1.0",
"title": "Custom_Header_V1",
"description": "Custom Header; Version 1.0",
"width": 1272,
"height": 328,
2015.03.27
Production Guide
3
"events": {
"enabled": 1,
"list": {
"1": "expand",
"2": "collapse"
}
},
"clicktags": {
"clickTAG": "http://www.adform.com"
},
"source": "Custom_Header_V1.html"
}

HTML file should include Adform HTML library which enables the banner to receive a
clickTAG variable:
<script src="http://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js"></script>

Single Expanding javascript component helps to easily create animated single file expanding
banner. In order to use SingleExpanding component, add component script to the HTML
asset and initialize component by calling SingleExpanding.init() method. To destroy single
expanding component SingleExpanding.destroy() method should be used.
<script>
var preloadQueue = [ 'SingleExpanding' ];
document.write('<script src="'+ (window.API_URL ||
'http://s1.adform.net/banners/scripts/rmb/Adform.DHTML.js?bv='+ Math.random())
+'"><\/script>');
</script>
Info: For more information about Single File expanding component please refer to this link.
Additional Information
The format requires two additional scripts to be loaded before the tag. In order to do that, navigate
to the “Tags” section in the Adform system. Select the needed tag and click the “JavaScriptURLS”
button. Paste in the following script URLs and tick the “Load before banner” check-box.
CUSTOM SCRIPT URLS:
http://s1.adform.net/Banners/Elements/Files/26844/411993/MsnHtmlOutercontainerfix.js
2015.03.27
Production Guide
4
http://s1.adform.net/Banners/Elements/Files/26844/416369/custom_header_v2.js?bn=%%ADFTA
GID%%;
In order to deliver HTML5 banners fully compliant with the specs, follow the instructions on Build
HTML5 banners in Adform Test and Support Center:
http://creative.adform.com/support/
Other
For any questions please contact [email protected]
2015.03.27