Ionic 6 Admob Plus Cordova Integration in Angular Application

In this tutorial, we will be discussing how to integrate Admob Plus Cordova plugin in an Ionic 6 Angular application. Admob Plus is a Cordova plugin that allows you to monetize your mobile app by displaying ads from Google Admob. This plugin supports both Android and iOS platforms.

How to Add Admob Plus in Ionic Angular App?

Following are the simple steps to integrate Admob Plus in Ionic Angular app using Cordova or Capacitor.

Step 1: Create a new Ionic 6 Angular application
Step 2: Install Admob Plus Cordova plugin
Step 3: Import Admob Plus Cordova plugin in your app
Step 4: Add Admob Plus Cordova plugin in providers
Step 5: Initialize Admob Plus Cordova plugin
Step 6: Show Interstitial Ad
Step 7: Show Banner Ad
Step 8: Add Ad Unit Ids
Step 9: Add Admob Plus Cordova plugin in Capacitor
Step 10: Test the App

Before we begin, make sure you have the following installed:

• Node.js
• Ionic 6 CLI
• Cordova CLI
• Google Admob account

Step 1: Create a new Ionic 6 Angular application

To create a new Ionic 6 Angular application, open the command prompt and run the following command:

ionic start myApp blank --type=angular

This will create a new Ionic 6 Angular application with the name “myApp” in a new directory.

Step 2: Install Admob Plus Cordova plugin

To install the Admob Plus Cordova plugin, run the following command in the root of your Ionic 6 Angular application:

ionic cordova plugin add cordova-plugin-admob-plus

Step 3: Import Admob Plus Cordova plugin in your app

Open the “src/app/app.module.ts” file and import the Admob Plus Cordova plugin:

import { AdMob } from 'cordova-plugin-admob-plus/admob';

Step 4: Add Admob Plus Cordova plugin in providers

Add the Admob Plus Cordova plugin in providers array in the “src/app/app.module.ts” file:

providers: [
    AdMob,
    ...
],

Step 5: Initialize Admob Plus Cordova plugin

Open the “src/app/app.component.ts” file and import Admob Plus Cordova plugin:

import { AdMob } from 'cordova-plugin-admob-plus/admob';

Initialize the Admob Plus Cordova plugin in the constructor:

constructor(private admob: AdMob) {
    this.admob.setDevMode(true);
}

Step 6: Show Interstitial Ad

To show an interstitial ad, you need to create a function in the “src/app/app.component.ts” file, and call the show method of the Admob Plus Cordova plugin:

showInterstitial() {
    this.admob.interstitial.show();
}

Step 7: Show Banner Ad

To show a banner ad, you need to create a function in the “src/app/app.component.ts” file, and call the show method of the Admob Plus Cordova plugin:

showBanner() {
    this.admob.banner.show();
}

Step 8: Add Ad Unit Ids

Add your Ad Unit Ids in the “src/app/app.component.ts” file:

this.admob.interstitial.config({
    id: 'your_interstitial_ad_unit_id',
    isTesting: true
});

this.admob.banner.config({
    id: 'your_banner_ad_unit_id',
    isTesting: true
});

Step 9: Add Admob Plus Cordova plugin in Capacitor

If you are using Capacitor, you need to add the Admob Plus Cordova plugin in Capacitor as well. Run the following command to add the plugin in Capacitor:

npx cap sync

Step 10: Test the App

To test the app, run the following command:

ionic cordova run android

or

ionic cordova run ios

Make sure to replace “android” with “ios” if you are testing on an iOS device.

You should now see the interstitial and banner ads in your app when you run it on an Android or iOS device.

Note: Remember to replace the Ad Unit Ids with your actual Ad Unit Ids in the “src/app/app.component.ts” file

Example App and File Code You can find the complete example app and file code for this tutorial on Github.

https://github.com/ionic-team/ionic-admob-example

Conclusion

In this tutorial, we have discussed how to integrate Admob Plus Cordova plugin in an Ionic 6 Angular application. We have shown how to show interstitial and banner ads in the app and provided an example app and file code for reference. With this, you should be able to monetize your Ionic 6 Angular app with Google Admob ads.