cordova-plugin-mobilino-mopub
Version:
Cordova/PhoneGap Plugin for MoPub Ads
184 lines (170 loc) • 5.51 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:"agltb3B1Yi1pbmNyDAsSBFNpdGUY8fgRDA",
interstitial:"agltb3B1Yi1pbmNyDAsSBFNpdGUYsckMDA"
},
android : {
banner:"agltb3B1Yi1pbmNyDAsSBFNpdGUY8fgRDA",
interstitial:"agltb3B1Yi1pbmNyDAsSBFNpdGUYsckMDA"
}
};
// select the right Ad Id according to platform
var adid = (/(android)/i.test(navigator.userAgent)) ? ad_units.android : ad_units.ios;
function initApp() {
if (! MoPub) {
alert('MoPub plugin not ready');
return;
}
registerAdEvents();
createSelectedBanner();
}
// optional, in case respond to events or handle error
function registerAdEvents() {
document.addEventListener('onAdFailLoad', function(data){
alert('error: ' + data.error +
', reason: ' + data.reason +
', adNetwork:' + data.adNetwork +
', adType:' + data.adType +
', adEvent:' + data.adEvent); // adType: 'banner' or 'interstitial'
});
document.addEventListener('onAdLoaded', function(data){});
document.addEventListener('onAdPresent', function(data){});
document.addEventListener('onAdLeaveApp', function(data){});
document.addEventListener('onAdDismiss', function(data){});
}
// click button to call following functions
function getSelectedAdSize() {
var i = document.getElementById("adSize").selectedIndex;
var items = document.getElementById("adSize").options;
return items[i].value;
}
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;
MoPub.createBanner({
adId : adid.banner,
overlap : overlap,
adSize : getSelectedAdSize(),
position : getSelectedPosition()
});
}
function createBannerOfGivenSize() {
var w = document.getElementById('w').value;
var h = document.getElementById('h').value;
MoPub.createBanner({
adId : adid.banner,
width : w,
height : h,
position : getSelectedPosition()
});
}
function showBannerAtSelectedPosition() {
MoPub.showBanner(getSelectedPosition());
}
function showBannerAtGivenXY() {
var x = document.getElementById('x').value;
var y = document.getElementById('y').value;
MoPub.showBannerAtXY(x, y);
}
function prepareInterstitial() {
var autoshow = document.getElementById('autoshow').checked;
MoPub.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 MoPub Plugin</p>
Banner<br /> Standard: <select id="adSize">
<option value='SMART_BANNER'>SMART_BANNER</option>
<option value='BANNER'>BANNER</option>
<option value='MEDIUM_RECTANGLE'>MEDIUM_RECTANGLE</option>
<option value='FULL_BANNER'>FULL_BANNER</option>
<option value='LEADERBOARD'>LEADERBOARD</option>
<option value='SKYSCRAPER'>SKYSCRAPER</option>
</select><br /> <input type='checkbox' id='overlap' />overlap
<button onclick="createSelectedBanner();">create</button>
<br /> Custom Size: (<input id='w' type='text' size=3 /> x <input
id='h' type='text' size=3>)
<button onclick="createBannerOfGivenSize();">create</button>
<br />
<button onclick="MoPub.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="MoPub.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="MoPub.showInterstitial();">Show</button>
<div id='sizeinfo'></div>
</div>
</body>
</html>