cordova-plugin-smart-adserver
Version:
Ultimate Cordova Plugin for Smart AdServer to monetize hybrid apps. Show mobile Ad with single line of JavaScript. Compatible with Cordova CLI, PhoneGap Build, Intel XDK/Crosswalk, Google ChromeApp, Ionic, Meteor, etc.
185 lines (171 loc) • 6.45 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|windows phone)/i.test(navigator.userAgent) )) {
document.addEventListener('deviceready', initApp, false);
} else {
initApp();
}
}
var ad_units = {};
if( /(android)/i.test(navigator.userAgent) ) {
ad_units = { // for Android
siteId: 73569,
banner: '549527/15140',
interstitial: '549527/12145'
};
} else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent)) {
ad_units = { // for iOS
siteId: 73568,
banner: '549526/15140',
interstitial: '549526/12145'
};
} else {
alert('Windows phone not supported');
}
function initApp() {
if (! SmartAdServer ) { alert( 'smart ad server plugin not ready' ); return; }
initAd();
// display the banner at startup
createSelectedBanner();
}
function initAd(){
var defaultOptions = {
siteId: ad_units.siteId,
baseUrl: 'http://mobile.smartadserver.com',
position: SmartAdServer.AD_POSITION.BOTTOM_CENTER,
// offsetTopBar: false, // avoid overlapped by status bar, for iOS7+
bgColor: 'black', // color name, or '#RRGGBB'
isTesting: true, // set to true, to receiving test ad for testing purpose
// autoShow: true // auto show interstitial ad when loaded, set to false if prepare/show
};
SmartAdServer.setOptions( defaultOptions );
registerAdEvents();
}
// optional, in case respond to events or handle error
function registerAdEvents() {
// new events, with variable to differentiate: adNetwork, adType, adEvent
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('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;
var offsetTopBar = document.getElementById('offsetTopBar').checked;
SmartAdServer.createBanner( {adId:ad_units.banner, overlap:overlap, offsetTopBar:offsetTopBar, adSize: getSelectedAdSize(), position:getSelectedPosition()} );
}
function createBannerOfGivenSize() {
var w = document.getElementById('w').value;
var h = document.getElementById('h').value;
SmartAdServer.createBanner( {adId:ad_units.banner,
adSize:'CUSTOM', width:w, height:h,
position:getSelectedPosition()} );
}
function showBannerAtSelectedPosition() {
SmartAdServer.showBanner( getSelectedPosition() );
}
function showBannerAtGivenXY() {
var x = document.getElementById('x').value;
var y = document.getElementById('y').value;
SmartAdServer.showBannerAtXY(x, y);
}
function prepareInterstitial() {
var autoshow = document.getElementById('autoshow').checked;
SmartAdServer.prepareInterstitial({adId:ad_units.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 SmartAdServer Plugin</p>
Banner<br /> Standard: <select id="adSize">
<option value='SMART_BANNER'>SMART_BANNER</option>
<option value='BANNER'>BANNER</option>
</select><br /> <input type='checkbox' id='overlap' />overlap<br/>
<input type='checkbox' id='offsetTopBar' />offsetTopBar<br/>
<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="SmartAdServer.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="SmartAdServer.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="SmartAdServer.showInterstitial();">Show</button>
<div id='sizeinfo'></div>
</div>
</body>
</html>