I am writing a multiplatform app in Cordova using the latest version (6) and am having a lot of trouble trying to get AdMob ads to work on iOS and Android. I have downloaded the code samples for AdMob, but controlling it from the javascript stumps me. I understand something about the plugin architecture, but I just can't seem to get it to work.
Please help.
Ionic - Cordova AdMob. The Cordova AdMob plugin is used for integrating ads natively. We will use the admobpro plugin in this chapter, since the admob is deprecated. Using AdMob. To be able to use ads in your app, you need to sign up to admob and create a banner. When you do this, you will get an Ad Publisher ID.
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 integrate Google AdMob into your app, the first thing you need to do is install the Google Mobile Ads framework into the Xcode project. For the starter project, I have already added the framework using CocoaPods.
Add your AdMob app ID (identified in the AdMob UI) to your app's AndroidManifest.xml file. To do so, add a <meta-data> tag with android:name="com.google.android.gms.ads.APPLICATION_ID". You can find your app ID in the AdMob UI. For android:value, insert your own AdMob app ID, surrounded by quotation marks.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With