Integration

Capacitor 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 Capacitor Full App, AdMob functionality is present in src/app/pages/pro/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/util.service.ts 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.

Banner Ad

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();

Interstitial Ad

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 statis ones, only the Ad ID is different.

Rewards Ad

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

Capacitor Admob Nuance

By default, this Cordova AdMob plugin is mentioned as not compatible with Capacitor. But that can be resolved with a small modification before device build.

The problem is the dependency plugin cordova-plugin-extension, it has a gradle file at src/android/rjfun-libs.gradle which indicates Cordova to compile the cordova-generic-ad.jar, but doing that makes it search in a relative place instead of in the right place.

Capacitor already compiles the .jar files that are on the right place, so what that gradle file does is not really needed. What you can do is to delete the content of node_modules/cordova-plugin-extension/src/android/rjfun-libs.gradle as workaround. After that you can build the app with the plugin working correctly.