/ ionic

Ionic 3 - AdMobFree

When integrating Google AdMob into your Ionic applications, there are two supported with Ionic Native types. Firstly, AdMobPro which takes royalties after revenue of $1,000 or more. Secondly, AdMobFree which is a free plugin (hence the name) that doesn't require any revenue sharing. We'll be looking at AdMobFree in this article.

Create a New Ionic Project

Let's start off with a blank project:

# Create a new Ionic project
ionic start AdMobFree blank

# Change directory
cd AdMobFree
Integrating the Plugin

We can then integrate the AdMobFree plugin like so:

# Add the Cordova plugin
ionic cordova plugin add cordova-plugin-admob-free

# Add the Ionic Native types (--save for < [email protected])
npm install @ionic-native/admob --save

Initialise AdMobFree

Now that we've installed the required dependencies, we need to initialise this within our root Providers list:

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

@NgModule({
  ...
  providers: [
    ...
    AdMobFree
  ]

Showing Banner Ads

To show a banner advert in your application, navigate to the component or provider you're looking to use and inject AdMobFree and import AdMobFreeBannerConfig:

We can then initialise a config with the AdMobFreeBannerConfig type and set the relevant options. Place your AdMobId in the id section, and as we're in development I've set isTesting to true. Finally, I've opted to autoShow the banner when this function is called.

To add the configuration object to our AdMobFree object, we have to call this.adMobFree.banner.config(configObject). All we have to do from here is call our showBannerAd() function inside of our constructor or lifecycle hook.


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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(private adMobFree: AdMobFree) {
    this.showBannerAd();
  }

  async showBannerAd() {
    try {
      const bannerConfig: AdMobFreeBannerConfig = {
        //id: 'your-banner-id-here',
        isTesting: true,
        autoShow: true
      }

      this.adMobFree.banner.config(bannerConfig);

      const result = await this.adMobFree.banner.prepare();
      console.log(result);
    }
    catch (e) {
      console.error(e);
    }
  }

If you'd prefer to manually determine when to show the banner is shown, you can use this.adMobFree.banner.show() after the .prepare() callback.

Showing Interstitial Ads

We can also show full-screen interstitial adverts either alongside our banner(s), or in place of. To do this, we can follow a similar process:

  async showInterstitialAd() {
    try {
      const interstitialConfig: AdMobFreeInterstitialConfig = {
        //id: '',
        isTesting: true,
        autoShow: true
      }

      this.adMobFree.interstitial.config(interstitialConfig);

      const result = await this.adMobFree.interstitial.prepare();
      console.log(result);
    }
    catch (e) {
      console.error(e)
    }
  }

By simply calling the showInterstitialAd() function, a full-screen advert is shown to the user.

Showing Video Reward Ads

We can also show video reward ads to our user(s) with a similar implementation:

  async showVideoRewardsAd() {
    try {
      const videoRewardsConfig: AdMobFreeRewardVideoConfig = {
        //id: '',
        isTesting: true,
        autoShow: true
      }

      this.adMobFree.rewardVideo.config(videoRewardsConfig);

      const result = await this.adMobFree.rewardVideo.prepare();
      console.log(result);
    }
    catch (e) {
      console.error(e);
    }
  }

There we have it! You should now be able to show AdMob adverts in your Ionic applications, without having to pay any royalties.

Want access to more specific Ionic Native content? Get the Udemy course with tons of implementations available here.

Paul Halliday

Progress Telerik Developer Expert. Course author with students in 110+ countries. BSc (Hons) Computer Science @ UoS. Google accredited Mobile Site professional.

Read More