tapsell-plus-cordova-plugin
Version:
Ultimate Cordova Plugin for Tapsell Plus to monetize hybrid apps. Show mobile Ad with single line of JavaScript. Compatible with Cordova CLI, PhoneGap Build, Ionic, etc.
248 lines (205 loc) • 8.89 kB
HTML
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, viewport-fit=cover" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="msapplication-tap-highlight" content="no" />
<meta name="format-detection" content="telephone=no" />
<!-- to avoid the warning of content security policy -->
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-inline' 'unsafe-eval'">
<title>TapsellPlus Sample</title>
<script>
(function() {
if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile\/10\.0/)) {
var msViewportStyle = document.createElement("style");
msViewportStyle.appendChild(
document.createTextNode("@-ms-viewport{width:auto!important}")
);
document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
}
})();
</script>
<!-- optional -->
<script type="text/javascript" src="jquery-1.9.js"></script>
<!-- must-have, which will be created by cordova prepare/build -->
<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;
}
textarea {
width: calc(100% - 20px);
padding: 0px;
margin: 5px;
font-size: 11px;
}
select, button {
width: calc(50% - 20px);
padding: 5px;
margin: 5px;
font-size: 11px;
}
input[type=number] {
width: calc(25% - 40px);
padding: 5px;
margin: 5px;
font-size: 11px;
}
</style>
</head>
<body>
<script>
var responseId = null;
var zoneid = {};
zoneid = {
banner: '5c6faf41c16a660001bcf727',
interstitial: '5d8913bd4c36900001b6bfbd',
rewardvideo: '586e4ed5bc5c28712bd8d802',
};
function createSelectedBanner() {
var position = $('#adPosition').val();
var size = $('#adSize').val();
TapsellPlus.createBanner(zoneid.banner, position, size);
}
function createBannerAtPosition() {
TapsellPlus.createBannerAtXY(zoneid.banner, $('#adPositionX').val(), $('#adPositionY').val(), $('#adSize').val());
}
function onDeviceReady() {
console.log("Device is ready");
initializeEvents();
}
function initializeEvents() {
$(document).on('response', function(e) {
if (typeof e.originalEvent !== 'undefined') e = e.originalEvent;
var data = e.detail || e.data || e;
responseId = data.responseId;
consoleLog("response. adType: " + data.adType);
});
$(document).on('error', function(e) {
if (typeof e.originalEvent !== 'undefined') e = e.originalEvent;
var data = e.detail || e.data || e;
consoleLog("error. adType: " + data.adType + " Message: " + data.message);
});
$(document).on('onOpened', function(e) {
if (typeof e.originalEvent !== 'undefined') e = e.originalEvent;
var data = e.detail || e.data || e;
consoleLog("onOpened. adType: " + data.adType);
});
$(document).on('onClosed', function(e) {
if (typeof e.originalEvent !== 'undefined') e = e.originalEvent;
var data = e.detail || e.data || e;
consoleLog("onClosed. adType: " + data.adType);
});
$(document).on('onRewarded', function(e) {
if (typeof e.originalEvent !== 'undefined') e = e.originalEvent;
var data = e.detail || e.data || e;
consoleLog("onRewarded. adType: " + data.adType);
});
$(document).on('onError', function(e) {
if (typeof e.originalEvent !== 'undefined') e = e.originalEvent;
var data = e.detail || e.data || e;
consoleLog("onError. adType: " + data.adType + " Message: " + data.message);
});
TapsellPlus.initialize("mfohttsmherqqqlkgeeedprkssdbmkbdioaqkicfhcrbrjsrdedsjpeccacinlgfoordce");
$('#btn_create').click(createSelectedBanner);
$('#btn_createXY').click(createBannerAtPosition);
$('#btn_remove').click(function() {
TapsellPlus.removeBanner();
});
$('#btn_show').click(function() {
TapsellPlus.showBanner();
});
$('#btn_hide').click(function() {
TapsellPlus.hideBanner();
});
$('#btn_prepare').click(function() {
TapsellPlus.requestInterstitial(zoneid.interstitial);
});
$('#btn_showfull').click(function() {
TapsellPlus.showInterstitial(responseId);
});
$('#btn_preparevideo').click(function() {
TapsellPlus.requestRewardedVideo(zoneid.rewardvideo);
});
$('#btn_showvideo').click(function() {
TapsellPlus.showRewardedVideo(responseId);
});
$(document).on('backbutton', function() {
if (window.confirm('Are you sure to quit?')) navigator.app.exitApp();
});
}
function consoleLog(message) {
$('#textinfo').append(message + '\n');
}
$(document).ready(function() {
// on mobile device, we must wait the 'deviceready' event fired by cordova
if (/(ipad|iphone|ipod|android|windows phone)/i.test(navigator.userAgent)) {
document.addEventListener('deviceready', onDeviceReady, false);
} else {
onDeviceReady();
}
});
</script>
<div id="fullpage">
<h3>Demo for TapsellPlus Plugin</h3>
<p id='h3_banner'>Banner</p>
<select id="adSize">
<option value='1' selected>320x50</option>
<option value='2'>320x100</option>
<option value='3'>250x250</option>
<option value='4'>300x250</option>
<option value='5'>468x60</option>
<option value='6'>728x90</option>
<option value='7'>160x600</option>
</select>
<select id="adPosition">
<option value='0' selected>Top Left</option>
<option value='1'>Top Center</option>
<option value='2'>Top Right</option>
<option value='3'>Left</option>
<option value='4'>Center</option>
<option value='5'>Right</option>
<option value='6'>Bottom Left</option>
<option value='7'>Bottom Center</option>
<option value='8'>Bottom Right</option>
</select>
<br/>
<button id='btn_create'>Create Banner</button>
<button id='btn_remove'>Remove Banner</button>
<button id='btn_show'>Show Banner</button>
<button id='btn_hide'>Hide Banner</button>
<input type="number" placeholder="x" id="adPositionX" />
<input type="number" placeholder="y" id="adPositionY" />
<button id='btn_createXY'>Create Banner At XY</button>
<hr />
<p id='h3_full'>Interstitial</p>
<button id='btn_prepare'>Request InterstitialAd</button>
<button id='btn_showfull'>Show InterstitialAd</button>
<hr />
<p id='h3_video'>Rewarded Video</p>
<button id='btn_preparevideo'>Request RewardedAd</button>
<button id='btn_showvideo'>Show RewardedAd</button>
<p>
<textarea rows=6 cols=30 id='textinfo' readonly></textarea>
</p>
</div>
</body>
</html>