Test APK Buy Now

Integration

Ionic 5 Full App uses Admob Pro plugin for AdMob integration. This plugin can be used for Google Ads, including AdMob / DFP (DoubleClick for publisher) and mediations to other Ad networks.

This plugin takes a percentage out of your earnings if your app profits more than $1,000. Read more about this on the plugin's repo. For a completely free alternative, see AdMobPro Free.

In Ionic 5 Full App, AdMob functionality is present in src/app/pages/addons/admob

Install the plugin

$ ionic cordova plugin add cordova-plugin-admobpro
$ npm install @ionic-native/admob-pro

Import the plugin methods in your page/component with 

import { AdMobPro } from '@ionic-native/admob-pro/ngx';

constructor(private admob: AdMobPro) {...}

Showing Ads in page

You can create 4 types of Ads using AdMob in Ionic

  • Banner: Rectangular ads that can be anchored to the top or bottom of the screen.

  • Interstitial: Static ads that can appear at natural breaks or transition points, creating engaging brand experiences without disrupting the app experience.

  • Interstitial Video - Interstitial ads, but with video

  • Rewarded: Ads that users can choose to engage with in exchange for in-app rewards, like bonus points or an extra “life” in a game.

Ad IDs

You should use development Ad Ids during development. You can find development ad ids here. All development IDs are saved in src/app/services/util in Full App

When you are developing your app, make sure you are using the development ad IDs ONLY. Otherwise you end up clicking your own ads for testing, and Google may ban you for that.

To create a banner ad, you need a banner id from your AdMob account. This Id is different for both Android and iOS.

Normally, apps display banner ads by default on page load. For demo purpose, we have employed banner ads on click. 

 banner() {
    let adId;
    if (this.platform.is('android')) {
      adId = this.util.adMobId.android.banner;
    } else if (this.platform.is('ios')) {
      adId = this.util.adMobId.ios.banner;
    }
    this.admob.createBanner({
      adId: adId,
      isTesting: true // remove in production 
    })
      .then(() => {
        this.admob.showBanner(this.admob.AD_POSITION.BOTTOM_CENTER);
      })
      .catch((err) => {
        console.log(err);
      });
  }

isTesting : true is important. You cannot use development IDs in production. To hide the banner ad, simple call this.admob.hideBanner();

To create an interstitial ad, you need an interstitial id from your AdMob account. This Id is different for both Android and iOS. Interstitial ads are fullscreen ads and are more effective.

Normally, apps display interstitial ads on transition e.g. a game level crossed, or a video seen etc. For demo purpose, we have employed interstitial ads on click.

 interstitial() {
    let adId;
    if (this.platform.is('android')) {
      adId = this.util.adMobId.android.interstitial;
    } else if (this.platform.is('ios')) {
      adId = this.util.adMobId.ios.interstitial;
    }
    this.admob.prepareInterstitial({
      adId: adId,
      isTesting: true // remove in production 
    })
      .then(() => {
        this.admob.showInterstitial();
      })
      .catch((err) => {
        console.log(err)
      });
  }

isTesting : true is important. You cannot use development IDs in production. To hide the interstitial ad, you need to click the X button in the ad.

Loading an interstitial ad can take time, hence you should call this.admob.prepareInterstitial way before calling this.admob.showInterstitial();

Interstial Video Ads are shown in the same way as Interstitial static ones, only the Ad ID is different.

To create a reward ad, you need a reward Ad id from your AdMob account. This Id is different for both Android and iOS. Reward ads are fullscreen ads and are shown when you want to reward the user if they see the complete video.

For demo purpose, we have employed reward ads on click.

reward() {
    let adId;
    if (this.platform.is('android')) {
      adId = this.util.adMobId.android.reward;
    } else if (this.platform.is('ios')) {
      adId = this.util.adMobId.ios.reward;
    }
    this.admob.prepareRewardVideoAd({
      adId: adId,
      isTesting: true // remove in production 
    })
      .then(() => {
        this.admob.showRewardVideoAd();
      })
      .catch((err) => {
        console.log(err)
      });
  }

isTesting : true is important. You cannot use development IDs in production. To hide the reward ad, you need to click the X button in the ad.

Loading a reward ad can take time, hence you should call this.admob.prepareRewardVideoAd way before calling this.admob.showRewardVideoAd();

Catch Ad events

You can catch following Ad events using AdMob plugin

  • onAdLoaded

  • onAdFailLoad

  • onAdPresent

  • onAdDismiss

  • onAdLeaveApp

For demo purpose, Full App employs onAdDismiss when the Ad is closed. It fetches the data returned by the Ad

More information on this plugin and related issues can be found on its Github repo

PreviousSetting up Google AdmobNextSocial Sharing

Last updated