How to integrate AdMob ads into a Cordova Project for both Android and iOS?

问题

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.

回答1:

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.

回答2:

This is the simplest way for me: https://www.npmjs.com/package/cordova-plugin-admobpro-firebase

I am already using it. It is totaly free and easy to use for both IOS and Android...

来源：https://stackoverflow.com/questions/36269166/how-to-integrate-admob-ads-into-a-cordova-project-for-both-android-and-ios