docMRAID HTML5 Resize Ad (300x75 > 300x250)
download 
Report Transcription
MRAID HTML5 Resize Ad (300x75 > 300x250)
PRODUCTION
GUIDE
Adform – MRAID HTML5
Resize Ad (300x75 >
300x250)
Production Guide
1
Table of Contents
MRAID HTML5 Resize Ad (300x75 > 300x250)
2
User Experience
2
Initial stage
2
Expanded stage
2
Creative assets
2
Banner asset
2
Specs
3
MRAID
3
Additional Information
4
Other
4
2015.04.07
Production Guide
2
MRAID HTML5 Resize Ad (300x75
> 300x250)
The format consists of the following parts:
HTML asset;
Images (optional).
User Experience
Initial stage
A user opens the application and sees the collapsed 300x75 banner in the placement. On click, the
banner expands to 300x250.
Expanded stage
Once expanded, the banner can offer various rich media experience. The expanded part
accommodates a link to the predefined landing page. The ad maintains this size until the “Close”
button is clicked. The ad expands as many times as the user clicks the collapsed part.
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.
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
2015.04.07
Production Guide
3
{
"version": "1.0",
"title": "MRAID resize banner 300x75 to 300x250",
"description": "",
"width" : "300",
"height": "75",
"events": {
"enabled": 1,
"list": {}
},
"clicktags": {
"clickTAG": "http:\/\/www.adform.com/",
"clickTAG2": "http:\/\/www.adform.com/"
},
"source": "index.html"
}
clickTAG on the expanded part required.
“Close” button required. Note that you need to style close button when using
mraid.resize()
You should include the MRAID library in the banner <head> section:
<script src="mraid.js"></script>
Adform library enables the banner to receive a clickTAG variable:
<script>
var banner = document.getElementById('banner');
banner.onclick = function() {
mraid.open("");
</script>
Specs
MRAID
MRAID specifications are available in the MRAID Documentation.
2015.04.07
Production Guide
4
Additional Information
For iOS devices it is advised to choose bigger images in order to make the use of Retina displays of
high resolution.
Other
For any questions please contact [email protected].
2015.04.07
