Mobile Rich Media Ad Interface Definitions (MRAID) is an initiative led by the International Advertising Bureau. This initiative defines a common API (application programming interface) for rich media ads that run on mobile apps. MRAID is a set of standardized commands that work with both HTML5 and JavaScript. These commands communicate what the ads do (for example, expand or resize) within the apps they're being served in. By using MRAID, you can quickly and easily run ads across applications from different publishers.
An HTML5 banner can't perform the usual actions in a mobile app environment. But by building a banner with MRAID specifications, you can provide the banner with a set of standardized commands so that it can complete the expected actions on a mobile app, such as:
-
Display
-
Click and close
-
Resize and expand
-
Measure viewability
Note
You can have MRAID banners displayed on mobile web, too. (Adform provides the API, even if MRAID isn't implemented on the website.) However, an MRAID banner may not be as flexible as HTML5 or other types of banners if the setup is complex.
Click the banner to preview some examples of rich media and standard ads in Adform Creative Showroom:
|
Loreal |
20th Century Fox |
Lyric |
|---|---|---|
|
|
|
|
To have your banner work well in a mobile application, firstly, include mraid.js in the <head> section of the banner code:
<head>
<meta charset="UTF-8">
<script src="mraid.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="HandheldFriendly" content="True" />
</head>
For the complete MRAID specifications, see IAB documentation.
Here's a code snippet on how to correctly get additional assets for banners that are in the mobile category:
var asset1 = Adform.getAsset(1); // For the first asset. var asset2 = Adform.getAsset(2); // For the second asset.
You can add video to your MRAID banner as you would with any HTML banner. Adform locates video given in the banner and attaches event tracking by default.
To add a ClickTag to an MRAID banner, use the following code:
var banner = document.getElementById('banner');
var container = document.getElementById('container');
banner.addEventListener('click', function() {
mraid.open(Adform.getClickURL('clickTAG'));
});
container.addEventListener('click', function() {
mraid.open(Adform.getClickURL('clickTAG2'));
});
To make a banner adapt to different screen sizes, do the following:
-
Make the content inside the banner responsive.
To have the content adapt to the size of the banner, use percentages instead of pixels when you define the element size. For example:
#defaultUnit { position: absolute; width: 100%; height: 100%; overflow: hidden; } -
Make the banner container responsive.
Change the banner size to 1x1 either in the manifest or in the asset settings:
{ "version": "1.0", "title": "Standard MRAID HTML banner", "description": "", "width": 1, "height": 1, "events": { "enabled": 0, "list": { } }, "clicktags": { "clickTAG": "http:\/\/www.adform.com" }, "source": "index.html" }You can make only one dimension (width or height) responsive.
Note
Interstitial banners always expand to 100% in width and 100% in height of the device's screen. (These banners show in full screen mode.) However, for a preview size, enter the 320x480 dimensions (default business size) in manifest.json.
-
Define the correct placement size. This responsibility falls to the publisher. The publishing app must define its placement size.
This is a bit different for full screen ads as they just try to expand to fit the whole screen. Although the publishers need to make sure that the app allows such behavior.
If you have an HTML5 standard banner, you can use it on a mobile app, but you must adapt it to work properly. To convert a banner from DHTML to MRAID, update the code in the banner as follows.
Note
The changes explained might not be sufficient for more complex banners. If you encounter difficulties, contact Adform Support.
Replace this line of code:
<script src="//s1.adform.net/banners/scripts/rmb/Adform.DHTML.js"></script>
With this line of code:
<script src="mraid.js"></script>
var banner = document.getElementById('banner');
clickTAGvalue = dhtml.getVar('clickTAG', 'http://www.example.com');
landingpagetarget = dhtml.getVar('landingPageTarget', '_blank');
banner.onclick = function() {
window.open(clickTAGvalue,landingpagetarget);
}
var banner = document.getElementById('banner');
banner.addEventListener('click', function() {
mraid.open(Adform.getClickURL('clickTAG'));
});