HTML and CSS Reference
In-Depth Information
The point of all this SDK vendor information is that these SDKs need to be referenced by the HTML5 ad creative
you deliver. This communication between the ad and the SDK vendor happens by way of an API, and it typically
communicates through the ad's JavaScript code. For mobile rich media ads that expand, close, and offer video and
gaming, the application housing the ad needs to understand what state the ad is in based on user interaction. This
may seem familiar because I discussed working with the VPAID API inside the publisher's video player in Chapter 7.
Basically, same rules apply here, the ad needs to communicate to the publisher's app so the experience isn't jarring
to the end user. The problem is that with all of these different vendors in the space, it's hard to understand what API
works across all of them, if one even exists. This is where the fragmentation occurs within the mobile in-application
space. This can vary tremendously across networks and devices, which makes it very tough for an advertiser to secure
a media buy that will run flawlessly everywhere.
For example of working with a “home brew” solution, when working with the Pandora application, you can use
the code snippet shown in Listing 9-1 to run a basic expand/collapse rich media ad within its mobile application.
Listing 9-1. Pandora App API Example
<!DOCTYPE HTML>
<html>
<head>
<meta name = "viewport" content = "width=device-width">
</head>
<body>
<button onclick=expandPandora()>Open Panel</button>
<button onclick=closePandora()>Close Panel</button>
</body>
<script>
document.addEventListener('DOMContentLoaded', function() {
}, false)
function expandPandora() {
try {
PandoraApp.setViewportHeight(300)
} catch (e) {
console.log (e + " No PandoraApp Reference")
};
initExpand();
}
function initExpand () {
console.log('initExpand')
}
function closePandora () {
try {
PandoraApp.setViewportHeight(50);
} catch (e) {
console.log(e + " No PandoraApp Reference")
};
 
Search WWH ::




Custom Search