Rich media full page ad using HTML5
The full page mobile ads supports the latest HTML5 and CSS3 features, including audio and video elements, CSS animations, etc. The behavior of the ad views closely mimic the behavior of the browser on the platform (iOS and Android). Note that you can make a responsive ad creative so that it fills the full size of the ad screen and scales on smaller screens. The ad can be scrolled down just like any responsive mobile web site and you can even use a campaign landing page as an ad creative so the user doesn't have to click to your site. Ads are downloaded to readers’ devices in advance and only once per campaign. This enables multi-megabyte creative sizes without downloading delays.
The creative should be delivered in zip file. The root of the zip file should contain the index.html file. Any additional HTML files should be stored in the root folder as well. All other assets can be stored in subfolders. The maximum filesize for the zip file is 5 MB.
You can deliver backup still image for the rich media ad if your ad creative doesn't support some devices or platforms.
When using iframe tags, embedding interactions or URL's in the iframe should be avoided.
MRAID compatibility is required.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- This tag is required, and it must be included in document
before any other script which uses MRAID is included -->
<script src="mraid.js"></script>
<script type="text/javascript">
function onMraidInit() {
if (mraid.getState() === 'loading') {
mraid.addEventListener('ready', onSdkReady);
} else {
onSdkReady();
}
}
function onSdkReady() {
// Wait for the ad to become viewable for the first time
if (mraid.isViewable()) {
adDidAppear();
} else {
mraid.addEventListener('viewableChange', function(viewable) {
if (viewable) {
adDidAppear();
} else {
adDidDisappear();
}
});
}
}
function adDidAppear() {
// The ad is now on screen
}
function adDidDisappear() {
// The ad is now off-screen
}
// This function starts MRAID initialization
onMraidInit();
</script>
</head>
<body>
<!-- ad content goes here -->
</body>
</html>
Orientation
Both the portrait and landscape orientations should be implemented in the same creative. CSS Media Queries can be used to define the layouts for both orientations.
EXAMPLE
<link rel="stylesheet" media="all and (orientation:portrait)" href="css/portrait.css" /><link rel="stylesheet" media="all and (orientation:landscape)" href="css/landscape.css" />
Gesture event
Note that you should not prevent horizontal swipe gestures because this prevents the user from leaving the ad view. DO NOT use for example document.ontouchmove = function(e) {e.preventDefault();}. '
Richie Preview app for testing
You should always test the rich media ad creative on iOS and Android devices using our Richie Ads Preview app.
Richie Preview for iOS