Ionic Installation

Install AdMob Plus in your Ionic project

Install the AdMob Plus Ionic Native wrapper in your Ionic Framework project.

Prerequisites

Ionic project initialized

Ionic Native Core installed

AdMob account with app registered

Installation

Ionic projects can use either Cordova or Capacitor as the native runtime. Choose the appropriate installation method:

Ionic with Cordova

1. Install the Packages

   Install both the Ionic Native wrapper and the Cordova plugin:

   npm

   npm install @admob-plus/ionic admob-plus-cordova @ionic-native/core
   
2. Configure App IDs

   Set your AdMob App IDs in config.xml:

   config.xml

   <preference name="ADMOB_APP_ID_ANDROID" value="ca-app-pub-xxx~xxx" />
   <preference name="ADMOB_APP_ID_IOS" value="ca-app-pub-xxx~xxx" />
   
3. Add to Module

   Import in your Angular module:

   app.module.ts

   import { NgModule } from '@angular/core';
   import { AdMob } from '@admob-plus/ionic/ngx';
   
   @NgModule({
     providers: [
       AdMob,
     ],
   })
   export class AppModule {}
   
4. Build the Project

   ionic cordova build android
   ionic cordova build ios
   

Ionic with Capacitor

1. Install the Packages

   Install the Ionic Native wrapper and underlying Cordova plugin:

   npm

   npm install @admob-plus/ionic admob-plus-cordova @ionic-native/core
   
2. Sync with Capacitor

   npx cap sync
   
3. Configure App IDs

   For Android, edit android/app/src/main/AndroidManifest.xml:

   AndroidManifest.xml

   <meta-data
     android:name="com.google.android.gms.ads.APPLICATION_ID"
     android:value="ca-app-pub-xxx~xxx" />
   

   For iOS, edit ios/App/App/Info.plist:

   Info.plist

   <key>GADApplicationIdentifier</key>
   <string>ca-app-pub-xxx~xxx</string>
   
4. Add to Module

   Import in your Angular module:

   app.module.ts

   import { NgModule } from '@angular/core';
   import { AdMob } from '@admob-plus/ionic/ngx';
   
   @NgModule({
     providers: [
       AdMob,
     ],
   })
   export class AppModule {}
   
5. Build the Project

   ionic build
   npx cap copy
   

Verification

Verify the installation:

Cordova:

ionic cordova plugin list

Capacitor:

npx cap ls

You should see admob-plus-cordova in the list.

Troubleshooting

Module not found in Angular

Ensure you’ve added AdMob to the providers array in your module and imported from @admob-plus/ionic/ngx.

Cordova plugin not found

1. Ensure admob-plus-cordova is installed
2. For Cordova: Run ionic cordova platform rm android && ionic cordova platform add android
3. For Capacitor: Run npx cap sync

Build fails

1. Clean the project: ionic build --clean
2. Remove and reinstall node modules
3. For Cordova: Remove and re-add platforms
4. For Capacitor: Run npx cap sync again

Next Steps

Usage Guide

Learn how to display ads in your Ionic app