How to integrate AdMob ads into a Cordova Project for both Android and iOS?
Your best bet is to use a premade plugin for this. I have experience with one that works well for me on both iOS and Android using Cordova 6 as you mentioned.
Full instructions are here https://github.com/sunnycupertino/cordova-plugin-admob-simple or here https://www.npmjs.com/package/cordova-plugin-admob-simple
To install:
cd yourappfolder
cordova plugin add cordova-plugin-admob-simple
If you are using Eclipse, copy the google-play-services.jar into the libs folder.
Add the following line to the manifest file, just before the ending application tag
<meta-data android:name="com.google.android.gms.version" android:value="8487000" />
Now in your javascript, add the following functions:
//initialize the goodies
function initAd(){
if ( window.plugins && window.plugins.AdMob ) {
var ad_units = {
ios : {
banner: 'ca-app-pub-xxxxxxxxxxx/xxxxxxxxxxx', //PUT ADMOB ADCODE HERE
interstitial: 'ca-app-pub-xxxxxxxxxxx/xxxxxxxxxxx' //PUT ADMOB ADCODE HERE
},
android : {
banner: 'ca-app-pub-xxxxxxxxxxx/xxxxxxxxxxx', //PUT ADMOB ADCODE HERE
interstitial: 'ca-app-pub-xxxxxxxxxxx/xxxxxxxxxxx' //PUT ADMOB ADCODE HERE
}
};
var admobid = ( /(android)/i.test(navigator.userAgent) ) ? ad_units.android : ad_units.ios;
window.plugins.AdMob.setOptions( {
publisherId: admobid.banner,
interstitialAdId: admobid.interstitial,
adSize: window.plugins.AdMob.AD_SIZE.SMART_BANNER, //use SMART_BANNER, BANNER, IAB_MRECT, IAB_BANNER, IAB_LEADERBOARD
bannerAtTop: false, // set to true, to put banner at top
overlap: true, // banner will overlap webview
offsetTopBar: false, // set to true to avoid ios7 status bar overlap
isTesting: false, // receiving test ad
autoShow: false // auto show interstitial ad when loaded
});
registerAdEvents();
window.plugins.AdMob.createInterstitialView(); //get the interstitials ready to be shown
window.plugins.AdMob.requestInterstitialAd();
} else {
//alert( 'admob plugin not ready' );
}
}
//functions to allow you to know when ads are shown, etc.
function registerAdEvents() {
document.addEventListener('onReceiveAd', function(){});
document.addEventListener('onFailedToReceiveAd', function(data){});
document.addEventListener('onPresentAd', function(){});
document.addEventListener('onDismissAd', function(){ });
document.addEventListener('onLeaveToAd', function(){ });
document.addEventListener('onReceiveInterstitialAd', function(){ });
document.addEventListener('onPresentInterstitialAd', function(){ });
document.addEventListener('onDismissInterstitialAd', function(){
window.plugins.AdMob.createInterstitialView(); //REMOVE THESE 2 LINES IF USING AUTOSHOW
window.plugins.AdMob.requestInterstitialAd(); //get the next one ready only after the current one is closed
});
}
//display the banner
function showBannerFunc(){
window.plugins.AdMob.createBannerView();
}
//display the interstitial
function showInterstitialFunc(){
window.plugins.AdMob.showInterstitialAd();
}
Call init() from onDeviceReady()
Call showInterstitialFunc() and showBannerFunc() to show ads.
Remember that you must wait a bit before showing the interstitial, as it takes time to load.
Hope this helps.
This is the simplest way for me:
https://www.npmjs.com/package/cordova-plugin-admobpro-firebase I am already using it. It is easy to use for both IOS and Android...
Thanks to @ir2pid "this user takes upto 30% off revenue without stating so." so it is taking some of your revenue.