HTML and CSS Reference
In-Depth Information
expand, close, or even play a video. MRAID isn't meant to trample HTML5 or the current APIs; instead, it's there to aid
in the development for ad designers where certain HTML5 fragmentation may still exist.
MRAID is meant to be simplistic and implemented easily and has no dependency on various SDKs. In fact, the
only requirement for MRAID is that the SDK the application chooses should be MRAID compliant and recognize
the API calls from within the ad code. This information would come only from the publisher or possibly the IAB who
keeps tabs on who is MRAID certified and not. However, most SDK vendors I mentioned earlier are working toward
MRAID compliance, so working within their platforms should be fine going forward.
So, now that you know a little bit about why MRAID is important to ad designers, let's review some basic MRAID
code in the following section and in Listing 9-2.
■
Note
at the time of writing, the SDK sections marked with * are said to be compliant supporting the IaB's MraID.
MRAID Code
Being that all SDKs going forward should be MRAID compliant, it's worth reviewing the MRAID code for interfacing
with compliant SDKs in applications. Listing 9-2 outlines a rudimentary expandable ad using basic MRAID
API functions.
Listing 9-2.
MRAID JavaScript API Example
<!DOCTYPE HTML>
<html>
<head>
<meta name = "viewport" content = "width=device-width">
</head>
<body>
<div id='cta' hidden data='
http://johnpercival.org
'
>Click Here</button></div>
<section id='banner'><button onclick=expandMRAID()>Open Panel</button></section>
<section id='panel'><button onclick=closeMRAID()>Close Panel</button></section>
</body>
<script>
function checkMRAID (){
if (mraid.getState() != 'ready') {
console.log("MRAID Ad: adding event listener for ready");
/* mraid still loading, registering for ready event */
mraid.addEventListener('ready', init);
} else if (mraid.getState() === 'ready') {
console.log("MRAID Ad: already ready, calling init");
init();
} else {
console.log("MRAID Ad: I think its ready, calling init");
init();
}
}
function init () {
mraid.removeEventListener('ready', init);
