Recently I updated one of my applications to use the Cordova Plugin AdMobFree to show advertisements in my Ionic app to generate revenue. There are several plugins available to Ionic developers to use for showing ads from AdMob but this one provided the core features I needed without a bunch of bells and whistles I didn’t. This post will go over the steps I took in order to get the plugin to work in my project. If you run into any issues let me know and I’ll see if I missed a step.

To start, let me be clear that this is geared to projects developed utilizing the Ionic 3 framework. It should work for Ionic 2 applications as well but I would not base an Ionic 4 application off of this code given all the changes that have been made for that framework.

Installation

$ ionic cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="<YOUR_ADMOB_APP_ID_AS_FOUND_IN_ADMOB>"
$npm install --save @ionic-native/admob-free@4

Make sure you include your APP ID from AdMob. You can get the value by going to AdMob then clicking on the application under Apps and going to App Settings.

In your config.xml file you should see a section for cordova-plugin-admob-free that has the ADMOB_APP_ID variable defined with the value you passed in during the installation. If not then run the remove command for the plugin and try adding it again.  

One thing worth remembering is that if you run into build issues where errors are reported about the Android version or support libraries used then you’ll want to install the Cordova Android Support Gradle Release npm package.  

When it comes to installing your Android platform I recommend installing version 6.3.0. 

$ ionic cordova platform add android@6.3.0

With that you should have all of the packages and configuration completed.  It is now time to dive into the code.

Code

The first changes to your code have to be made in the app.modules.ts file.  You’ll need to import the plugin and add it to the providers section.

import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free';

@NgModule({
    declarations: [...],
    imports: [...],
    bootstrap: [...],
    entryComponents: [...],
    providers:  [...
        AdMobFree,
        ....]
    })

On the page you want to show the ads you’ll only need to make changes to the underlying TypeScript file.  You’ll first want to import the necessary packages.

import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free';

constructor(...,
    private admob:  AdMobFree) {}

private createBanner() {
    let logger:LoggingProvider=this.logProvider;

    try {
        let bannerConfig:any= {
            id: <android banner id>,
            autoShow: true,
            isTesting: true
        };

        this.admob.banner.config(bannerConfig);
        this.admob.banner.prepare()
            .then(() => {
                //We have a banner :)
            }).catch((error) => {
                // Handle the error case
            });
        });
    }
    catch (exception) {
        // Something bad happened
    }
}

And that is it.  You should have a basic banner displaying on the application.  Once you are ready to go to production you’ll want to change the isTesting parameter to false so real advertisements come through.

If you want to give the option for your users to go advertisement free there is an easy method call to remove the banner.

this.admob.banner.remove(); 

When I get some time I’ll try to put up an example project or put in a pull request for a demo on the AdMobFree repo.  Until then, let me know if I missed anything and I’ll update the instructions.