Integration of AdMob Pro plugin without ngCordova dependency

tutorials
1

I noticed many people ask about AdMob installation. Here is a small tutorial.

First of all, we need to install the plugin. Run this command in a shell:

cordova plugin add com.google.cordova.admob

Important: We need to use our banner creation code in $ionicPlatform.ready because it binds to deviceready event.
Important: AdMob Pro initializes at “window” object, not in window.plugins or window.cordova.plugins! So we need to use this: window.AdMob

$ionicPlatform.ready(function() {
    ...    
    // Detect AdMob
    if(window.AdMob) {
        
        // Detect platform
        var adMobId = "";
        if ( /(android)/i.test(navigator.userAgent ) ) { // for android
            adMobId = "codeForAndroid";
        } else if( /(ipod|iphone|ipad)/i.test(navigator.userAgent) ) { // for ios
            adMobId = "codeForIOS";     
        }
        
        // Create banner
        window.AdMob.createBanner({
        adId: adMobId, 
        position: AdMob.AD_POSITION.BOTTOM_CENTER, 
        autoShow: true });
    }
});

That’s it. Works like a charm :smile:

1 Like
2

It’s worked thanks for the quick code :slight_smile: How can I integrate AdMob for iOS?

adId: "device.platform" == "Android" ? "ANDROID_PUBLISHER_KEY" : "IOS_PUBLISHER_KEY";

Is it going to work?

3

It’s better to use this code:

var adMobId = "";
if ( /(android)/i.test(navigator.userAgent) ) {
    // for android
    adMobId = "codeForAndroid";
} else if( /(ipod|iphone|ipad)/i.test(navigator.userAgent) ) {
    // for ios
    adMobId = "codeForIOS";     
}
1 Like
4

Thank You Very Much :slight_smile:

5

Thank you for creating this tutorial! I am still struggling with getting AdMob to work in my Ionic app. I am building remotely with Phonegap Build. If I understand correctly, Phonegap Build won’t use the local installation of the Cordova plugin that was installed with this command:

cordova plugin add com.google.cordova.admob

Instead, I am trying to use the plugin from the site plugins.cordova.io. To do so, I’m including this line in my config.xml file:

<gap:plugin name="com.admob.pro" source="plugins.cordova.io"/>

If I am reading this blog correctly, I think this should work.

I am also testing on the Phonegap Developer app, which I think should support this. I have tried many different things, but nothing I do produces a banner ad, including the code above.

I am using iOS, testing on the device, and have am using an ad ID from admob in the format:

ca-app-pub-XXXXXXXXXXXXXXXXXXXXXXXX

When I go to the phonegap build website, and look at the app there (complied remotely using the phonegap remote build ios command, and go to the plugins section, I do see the com.admob.pro plugin listed there. I can also (I think) see the plugin register in the console when using phonegap serve and the PG Developer app

[phonegap] 200 /plugins/ADBMobile/sdks/Cordova/ADBMobile/Shared/ADBHelper.js

Any advise? What am I missing? The code above doesn’t seem to produce any errors. But it doesn’t display a banner ad either. Any help appreciated.

6

Are you sure that the Phonegap Developer App supports this plugin? Ionic View doesn’t support it so I tested it by deploying to my Android phone with ionic run android and to my iPhone though Xcode with a development profile.

I had a little bit of an issue getting it working for me (documented elsewhere in this forum if you look at my other posts) but its fine now. I’m not using PGB anymore but I have done.

I have one question for everyone - do you need different iOS and Android admob codes? I’m only using one interstitial and I’m using the same code for both and on my dev version it works fine on both phones.

7

Thanks for the response.

Are you sure that the Phonegap Developer App supports this plugin? Ionic View doesn’t support it so I tested it by deploying to my Android phone with ionic run android and to my iPhone though Xcode with a development profile.

No, I’m not sure of anything given that it’s not working. :wink: However, I’ve also compiled using Phonegap Build and the complied application does the same thing (nothing). Running the compiled application in debug mode in the Adobe’s weinre server, I am able to see that the window object does in fact have a child called AdMob under it, and it also has children such as the createBanner function. So from that I’m thinking that the plugin made it into the build successfully. But I’m not sure how else to go about troubleshooting.

8

Why not just put some console.logs in to see what happens and inspect it in Chrome inspect on Android? I set up logs (or alerts on the phone) to see where and what is happening.

Are you sure about your AdMob codes? When I set them up, and when I set up Google Analytics for an app, it takes about 24hrs for it to all work properly.

9

Thank you so very much, @SubEffect . I believe the whole issue was that I had to wait 24 hours for the ad to become “live.” Wow, knowing that would have saved me 10 hours worth of work. Today it is working. For future reference of others, it does not seem to work in the PG developer app - only when built and run on a device.

10

Yeah, it’s weird like that. I’m writing a long blog post about my experiences that list all this little quirks.

Glad its working now.

11

I used this code it is working well in my android app. But in my ios app xcode showing the error like ‘GoogleMobileAds/GoogleMobileAds.h’ file not found.