cordova-plugin-mmedia
Version:
Cordova plugin for MillennialMedia Ads, support Banner, Interstitial and Video Ad
186 lines (172 loc) • 5.16 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport"
content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width" />
<title>Hello World</title>
<script type="text/javascript" src="cordova.js"></script>
<style type="text/css">
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
background-color: gray;
color: white;
}
div#fullpage {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0px solid red;
text-align: center;
vertical-align: middle;
}
button {
font-size: 18px;
}
</style>
</head>
<body onload="onLoad()" onresize="onResize()">
<script>
function onLoad() {
if ((/(ipad|iphone|ipod|android)/i.test(navigator.userAgent))) {
document.addEventListener('deviceready', initApp, false);
} else {
initApp();
}
}
var ad_units = {
ios : {
banner : "177365",
interstitial : "177364"
},
android : {
banner : "177367",
interstitial : "177369"
}
};
// select the right Ad Id according to platform
var adid = (/(android)/i.test(navigator.userAgent)) ? ad_units.android : ad_units.ios;
function initApp() {
if (! mMedia) {
alert('mMedia plugin not ready');
return;
}
initAd();
// display the banner at startup
createSelectedBanner();
}
function initAd() {
var defaultOptions = {
// adId: adid.banner,
position : mMedia.AD_POSITION.BOTTOM_CENTER,
// x: integer, // valid when set position to 0 / POS_XY
// y: integer, // valid when set position to 0 / POS_XY
// autoShow: true // auto show interstitial ad when loaded, set to false if prepare/show
};
mMedia.setOptions(defaultOptions);
registerAdEvents();
}
// optional, in case respond to events or handle error
function registerAdEvents() {
document.addEventListener('onBannerFailedToReceive',
function(data) {
alert('error: ' + data.error + ', reason: ' + data.reason);
});
document.addEventListener('onBannerReceive', function() {
});
document.addEventListener('onBannerPresent', function() {
});
document.addEventListener('onBannerLeaveApp', function() {
});
document.addEventListener('onBannerDismiss', function() {
});
document.addEventListener('onInterstitialFailedToReceive',
function(data) {
alert('error: ' + data.error + ', reason: ' + data.reason);
});
document.addEventListener('onInterstitialReceive', function() {
});
document.addEventListener('onInterstitialPresent', function() {
});
document.addEventListener('onInterstitialLeaveApp', function() {
});
document.addEventListener('onInterstitialDismiss', function() {
});
}
function getSelectedPosition() {
var i = document.getElementById("adPosition").selectedIndex;
var items = document.getElementById("adPosition").options;
return parseInt(items[i].value);
}
function createSelectedBanner() {
var overlap = document.getElementById('overlap').checked;
mMedia.createBanner({
adId : adid.banner,
autoShow : true,
overlap : overlap,
position : getSelectedPosition()
}, function() {
}, function(data) {
alert(JSON.stringify(data));
});
}
function showBannerAtSelectedPosition() {
mMedia.showBanner(getSelectedPosition());
}
function showBannerAtGivenXY() {
var x = document.getElementById('x').value;
var y = document.getElementById('y').value;
mMedia.showBannerAtXY(x, y);
}
function prepareInterstitial() {
var autoshow = document.getElementById('autoshow').checked;
mMedia.prepareInterstitial({
adId : adid.interstitial,
autoShow : autoshow
});
}
function onResize() {
var s = document.getElementById('sizeinfo');
s.innerHTML = "web view: " + window.innerWidth + " x "
+ window.innerHeight;
}
</script>
<div id="fullpage">
<p>Demo for mMedia Plugin</p>
Banner<br />
<input type='checkbox' id='overlap' checked />overlap<br/>
<button onclick="createSelectedBanner();">create banner</button><br/>
<button onclick="mMedia.removeBanner();">remove banner</button>
<hr />
<select id="adPosition">
<option value='1'>Top Left</option>
<option value='2'>Top Center</option>
<option value='3'>Top Right</option>
<option value='4'>Left</option>
<option value='5'>Center</option>
<option value='6'>Right</option>
<option value='7'>Bottom Left</option>
<option value='8' selected>Bottom Center</option>
<option value='9'>Bottom Right</option>
</select>
<button onclick="showBannerAtSelectedPosition();">show</button>
<br /> (<input id='x' type='text' size=3 />,<input id='y'
type='text' size=3>)
<button onclick="showBannerAtGivenXY();">show At XY</button>
<br />
<button onclick="mMedia.hideBanner();">hide banner</button>
<hr />
<p>Interstitial</p>
<input type='checkbox' id='autoshow' checked />auto show when ready<br />
<button onclick="prepareInterstitial();">Prepare</button>
<button onclick="mMedia.showInterstitial();">Show</button>
<div id='sizeinfo'></div>
</div>
</body>
</html>