Admob Ads on AppMobi
267 views
Skip to first unread message
profwholesale
May 11, 2012, 3:34:20 AM5/11/12
to Google AdMob Ads Developers
greetings!
I have created an app using AppMobi XDK. How do I add Admob Ads on my
Apps?
Thanks
I have created an app using AppMobi XDK. How do I add Admob Ads on my
Apps?
Thanks
profMobi
May 15, 2012, 10:07:13 AM5/15/12
to Google AdMob Ads Developers
Adding AdMob ads is not as simple as just dropping the AdMob
JavaScript library into your application. You'll want to add some
code to handle the click event on the advertisement so that the
feature opens in a new browser object rather than in the main browser
window of your application. You can do that by blocking all remote
pages (http://www.appmobi.com/documentation/device.html?
#device.blockRemotePages) and then listening for the
appmobi.device.remote.block event (http://www.appmobi.com/
documentation/device.html?x=9969#device.remote.block).
Here is an example index.html file that should work. Give it a try:
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Ad Mob Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select: none; }
input, textarea { -webkit-user-select:text; }
/* Set up the page with a default background image */
body {
background-color:#fff;
color:#000;
font-family:Arial;
font-size:12pt;
margin:0px;padding:0px;
background-image:url('images/background.jpg');
}
</style>
<script type="text/javascript" charset="utf-8" src="http://localhost:
58888/_appMobi/appmobi.js"></script>
<script type="text/javascript">
/* This code is used to run as soon as appMobi activates */
var onDeviceReady=function(){
try
{
//lock orientation
AppMobi.device.setRotateOrientation("portrait");
AppMobi.device.setAutoRotate(false);
}
catch(e){}
AppMobi.display.useViewport(320,320);
try {
AppMobi.device.blockRemotePages(true,"");
} catch(e) {}
console.log(AppMobi.device.uuid.indexOf("emulated"));
if (AppMobi.device.uuid.indexOf("emulated") == 0)
{
document.getElementById("imgTest").style.display="block";
}
AppMobi.device.hideSplashScreen();
};
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
document.addEventListener("appMobi.device.remote.block",function(evt){
if (evt.success == true)
{
AppMobi.device.showRemoteSite(evt.blocked,50,50,50,50);
}
else
{
alert(evt.message);
}
},false);
</script>
</head>
<body>
<img id="imgTest" style="position:absolute;top:0px;left:
0px;display:none;" src="images/001.png"
onclick="AppMobi.device.showRemoteSite('http://mobile.google.com',
50,50,50,50);" />
<script type="text/javascript">
var admob_vars = {
pubid: 'a1499f014240b72', // publisher id
bgcolor: 'FFFFFF', // background color (hex)
text: '000000', // font-color (hex)
ama: false, // set to true and retain comma for the AdMob Adaptive Ad
Unit, a special ad type designed for PC sites accessed from the
iPhone. More info: http://developer.admob.com/wiki/IPhone#Web_Integration
test: true // test mode, set to false to receive live ads
};
</script>
<script type="text/javascript" src="http://mmv.admob.com/static/iphone/
iadmob.js" />
</body>
</html>
JavaScript library into your application. You'll want to add some
code to handle the click event on the advertisement so that the
feature opens in a new browser object rather than in the main browser
window of your application. You can do that by blocking all remote
pages (http://www.appmobi.com/documentation/device.html?
#device.blockRemotePages) and then listening for the
appmobi.device.remote.block event (http://www.appmobi.com/
documentation/device.html?x=9969#device.remote.block).
Here is an example index.html file that should work. Give it a try:
<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>Ad Mob Example</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<style type="text/css">
/* Prevent copy paste for all elements except text fields */
* { -webkit-user-select: none; }
input, textarea { -webkit-user-select:text; }
/* Set up the page with a default background image */
body {
background-color:#fff;
color:#000;
font-family:Arial;
font-size:12pt;
margin:0px;padding:0px;
background-image:url('images/background.jpg');
}
</style>
<script type="text/javascript" charset="utf-8" src="http://localhost:
58888/_appMobi/appmobi.js"></script>
<script type="text/javascript">
/* This code is used to run as soon as appMobi activates */
var onDeviceReady=function(){
try
{
//lock orientation
AppMobi.device.setRotateOrientation("portrait");
AppMobi.device.setAutoRotate(false);
}
catch(e){}
AppMobi.display.useViewport(320,320);
try {
AppMobi.device.blockRemotePages(true,"");
} catch(e) {}
console.log(AppMobi.device.uuid.indexOf("emulated"));
if (AppMobi.device.uuid.indexOf("emulated") == 0)
{
document.getElementById("imgTest").style.display="block";
}
AppMobi.device.hideSplashScreen();
};
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
document.addEventListener("appMobi.device.remote.block",function(evt){
if (evt.success == true)
{
AppMobi.device.showRemoteSite(evt.blocked,50,50,50,50);
}
else
{
alert(evt.message);
}
},false);
</script>
</head>
<body>
<img id="imgTest" style="position:absolute;top:0px;left:
0px;display:none;" src="images/001.png"
onclick="AppMobi.device.showRemoteSite('http://mobile.google.com',
50,50,50,50);" />
<script type="text/javascript">
var admob_vars = {
pubid: 'a1499f014240b72', // publisher id
bgcolor: 'FFFFFF', // background color (hex)
text: '000000', // font-color (hex)
ama: false, // set to true and retain comma for the AdMob Adaptive Ad
Unit, a special ad type designed for PC sites accessed from the
iPhone. More info: http://developer.admob.com/wiki/IPhone#Web_Integration
test: true // test mode, set to false to receive live ads
};
</script>
<script type="text/javascript" src="http://mmv.admob.com/static/iphone/
iadmob.js" />
</body>
</html>
Reply all
Reply to author
Forward
0 new messages