Integrating AdMob into your Phonegap app
There are multiple ways to monetize the application. When we are deciding which one to use, we need to acknowledge few factors: who are our customers, what kind of type of app we have, how much money we want to earn, etc. With all of these factors, we generate a checklist. For most apps, the checklist indicates we should use some kind of advertising inside of the app. And for that, one of the best solutions is AdMob.
AdMob brings together best-in-class technology in a single platform, so you can gain insights about your users, drive more in-app purchases, and maximize your ad revenue. No longer will you have to rely on a combination of tools or use precious development resources to build your own solution.
To integrate AdMob into your Phonegap application, you need to use a plugin Cordova-AdMob-pro. There are many Phonegap plugins for AdMob, but this is one of the best supported and well designed. It’s supported on all major and advertising important platforms.
- Android
- iOS
- Windows Phone
It has some really nice features:
Easy-to-use: Display Ad with a single line of javascript code.
Powerful: Support banner, interstitial, and video Ad.
Max revenue: Support mediation with up to 8 leading mobile Ad services.
Multi-size: Multiple banner size, also support custom size.
Flexible: Fixed and overlapped mode, put a banner at any position with overlap mode.
Smart: Autofit on orientation change.
Same API: Exactly same API with other Ad plugins, easy to switch from one Ad service to another.
Up to date: Latest SDK and Android Google play services.
Good support: Actively maintained, prompt response.
Installation
You can install the plugin with Cordova CLI issuing the following command.
Cordova plugin add com.google.cordova.admob
You will also need an AdMob account and an Id for your app. To get those, register for an account at https://www.google.com/admob/platform.html and follow the instructions.
Optional
You can also install and integrate some additional optional mediations to maximize revenue.
cordova plugin add com.google.cordova.admob-facebook
cordova plugin add com.google.cordova.admob-flurry
cordova plugin add com.google.cordova.admob-iad
cordova plugin add com.google.cordova.admob-inmobi
cordova plugin add com.google.cordova.admob-mmedia
cordova plugin add com.google.cordova.admob-mobfox
But for now, let's see some usage examples.
Usage
We first need to initialize the plugin and setup all the required settings to make AdMob work correctly. Follow the steps very careful, incorrect setup will mean that you will not be making any money.
With every Phonegap application, you need to use the deviceready event.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8" />
<title>My AdMob Application</title>
<script type=”text/javascript” src=”cordova.js”></script>
</head>
<body>
<h1>My AdMob Application</h1>
</body>
<script>
var enabledAdMob = true; // easily enable/disable AdMob
var admobid = {};
if( /(android)/i.test(navigator.userAgent) )
{
admobid = { // for Android
banner: ‘ca-app-pub-xxx/xxx’, // or DFP format “/6253334/dfp_example_ad”
interstitial: ‘ca-app-pub-xxx/yyy’
};
}
else if(/(ipod|iphone|ipad)/i.test(navigator.userAgent))
{
admobid = { // for iOS
banner: ‘ca-app-pub-xxx/zzz’, // or DFP format “/6253334/dfp_example_ad”
interstitial: ‘ca-app-pub-xxx/kkk’
};
}
else
{
admobid = { // for Windows Phone
banner: ‘ca-app-pub-xxx/zzz’, // or DFP format “/6253334/dfp_example_ad”
interstitial: ‘ca-app-pub-xxx/kkk’
};
}
function initApp()
{
if (enabledAdMob)
{
AdMob.createBanner({
adId: admobid.banner,
position: AdMob.AD_POSITION.BOTTOM_CENTER,
autoShow: true
});
}
}
document.addEventListener(‘deviceready’, initApp, false);
</script>
</html>
Get Prayag chaudhary’s stories in your inbox
Join Medium for free to get updates from this writer.
This is it. This is fully working integration of the AdMob (of course, change the banner and interstitial settings to include your AdMob ad information).
Ad Placement
We can easily control the placement of the add with the position parameter. We have the following options:
Top left (TOP_LEFT)
Top center (TOP_CENTER)
Top right (TOP_RIGHT)
Left (LEFT)
Center (CENTER)
Right (RIGHT)
Bottom left (BOTTOM_LEFT)
Bottom center (BOTTOM_CENTER)
Bottom right (BOTTOM_RIGHT)
Custom XY position (POS_XY)
We can use the position which suits our application the most. Also, playing with the position is really great for A/B testing and increasing the revenue.
Size of the banner
Again, AdMob provides many options for the banner. We can easily create an all-screen banner with the following code.
// prepare and load your ad resource in background to minimize the wait time and increase conversion
if(AdMob) AdMob.prepareInterstitial( {adId:admobid.interstitial, autoShow:false} );
// show the interstitial when you want it
if(AdMob) AdMob.showInterstitial();
It will show the full-screen ad when you call showInterstitial() method. You can also set AutoShow to true to immediately show the ad without the additional call.
We can also control the size of the ad. We use the adSize parameter when creating a banner.
if(AdMob) AdMob.createBanner( {
adId:admobid.banner,
adSize:’MEDIUM_RECTANGLE’,
overlap:true,
position:AdMob.AD_POSITION.BOTTOM_CENTER,
autoShow:true} );
There are also additional sizes:
Smart banner (SMART_BANNER)
Banner (default) (BANNER)
Medium rectangle (MEDIUM_RECTANGLE)
Full banner (FULL_BANNER)
Leaderboard (LEADERBOARD)
Skyscraper (SKYSCRAPER)
Controlling the banner
We can easily perform additional actions to show/hide or remove the banner with few simple methods.
removeBanner();
showBanner(position);
showBannerAtXY(x, y);
hideBanner();
Testing ads
Of course while development we don’t want to show real ads and infect your conversion rates. AdMob enables to show demo or testing ads. To enable this, pass isTesting:true while creating the banner. It will ignore about profile settings and show some dummy testing ads.
Conclusion
AdMob is one of the most loved and successful advertising solutions for mobile apps. It enables easy integration and setup, good conversion rates and mostly it enables developers to earn revenue.
Thank you for reading,
if you like to read how to crack an interview or get some tips, how to perform and how to give quick answers then,
You can read my blog #how_to_crack_an_interview
