Ionic AdMob

AdMob is a Google advertising platform for mobile apps, which makes it easy for developers to earn money from their mobile applications. It provides high-quality monetary ads. It allows developers to promote their apps quickly. It can also maximize the value of every impression by combining global advertiser demand, innovative ad formats, and advanced app monetization technology. It is available for both Android and iOS applications.

Although the advertisement is not always the best way to earn money, it is the easiest way to earn some money from mobile applications or websites. In this tutorial, we are going to learn how we can add Google AdMob to an Ionic application. Here, we will cover two types of the advertising platform, which are banner ads and interstitial ads.

Banner Ads

Banner ads display rectangular ads that can be anchored to the top or bottom of the screen. It occupies a portion of an app’s layout, which can refresh automatically after a specified period of time. It means the users will see a new ad at regular intervals, even they are staying on the same screen in the app.

Interstitial Ads

Interstitial Ads provide rich interactive full-page ads for users in mobile apps. These types of ads are designed to be placed between the content. It shows static or video ads that can appear at natural breaks or transition points, and creating engaging brand experiences without disrupting the app experience.

If you want to use advertisements in your app, you need to have an account on Google AdMob. So, if you haven’t account on the AdMob, first create it on the AdMob. Now, let us see step by step how to use AdMob into the Ionic app.

Step 1: Create a new project. You can learn how to create a project in Ionic 4 from here. You can skip this step if you already had an Ionic project.

Step 2: Create a Google AdMob account. To display advertisements in the application, you need to set-up the AdMob account. If you haven’t created the AdMob account, click here. Now, logged in into the AdMob console. Then, first, you need to add your application as below screen.

Once your app is successfully added to Google AdMob, you will get the following screen.

Step 3: Once you create the Ionic App, you have to navigate to your project and install the following AdMob Cordova plugin using the below command. This command will install the Cordova plugin and the Ionic Native package.

  $ cd myIonicApp    $ cordova plugin add cordova-plugin-admob-free –save –variable ADMOB_APP_ID=””    $ npm install @ionic-native/admob-free  

To find the API id, go to AdMob Console->App->your App-> App Setting->App Info.

Step 4: Next, open the app.module.ts file and import the AdMob plugin. Also, we need to set up this plugin in the providers as below.

  import { NgModule } from ‘@angular/core’;  import { BrowserModule } from ‘@angular/platform-browser’;  import { RouteReuseStrategy } from ‘@angular/router’;    import { IonicModule, IonicRouteStrategy } from ‘@ionic/angular’;  import { SplashScreen } from ‘@ionic-native/splash-screen/ngx’;  import { StatusBar } from ‘@ionic-native/status-bar/ngx’;    import { AppComponent } from ‘./app.component’;  import { AppRoutingModule } from ‘./app-routing.module’;  import { AdMobFree } from ‘@ionic-native/admob-free/ngx’;    @NgModule({    declarations: [AppComponent],    entryComponents: [],    imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],    providers: [      StatusBar,      SplashScreen,      AdMobFree,      { provide: RouteReuseStrategy, useClass: IonicRouteStrategy}    ],    bootstrap: [AppComponent]  })  export class AppModule {}  

After adding the AdMob plugin as a provider, we will be able to inject it anywhere that we need in our application.

Step 5: Let us create a Banner Advertisement. For this, you need to go to AdMob Console->yourApp->AdUnits, then the following screen appears.

Now, select Banner and add the following details as like given image.

Step 6: Open home.page.ts file and add the following code snippets. Once the Banner is created, it will display at the bottom of your application.

  import { Component } from ‘@angular/core’;  import { AdMobFree, AdMobFreeBannerConfig } from ‘@ionic-native/admob-free/ngx’;    @Component({    selector: ‘app-home’,    templateUrl: ‘home.page.html’,    styleUrls: [‘home.page.scss’],  })  export class HomePage {    constructor(public admob: AdMobFree) {    }    showBanner() {        const bannerConfig: AdMobFreeBannerConfig = {            isTesting: true, // Remove in production            autoShow: true           //id: Your Ad Unit ID goes here            id: ‘ca-app-pub-1304665038199161/9978704243’        };        this.admob.banner.config(bannerConfig);        this.admob.banner.prepare().then(() => {            // success        }).catch(e => console.log(e));    }  }  

Step 7: Next, open home.page.html and insert the following code. It is responsible for the user interface.

  <ion-header>    <ion-toolbar>      <ion-title>        Ionic AdMob      </ion-title>    </ion-toolbar>  </ion-header>    <ion-content class=”ion-padding”>      <ion-button (click)=”showBanner()” expand=”full”>Show Banner</ion-button><br/>  </ion-content>  

Step 8: Now, run the app. You will get the ads at the bottom of the application.

Step 9: Again, if you want to create ads for the full page, then select Interstitial and add the following code snippets in the home.page.ts file. Once the Interstitial is created, it will display on the full screen of your application.

  import { Component } from ‘@angular/core’;  import { AdMobFree, AdMobFreeBannerConfig, AdMobFreeInterstitialConfig } from ‘@ionic-native/admob-free/ngx’;    @Component({    selector: ‘app-home’,    templateUrl: ‘home.page.html’,    styleUrls: [‘home.page.scss’],  })  export class HomePage {    constructor(public admob: AdMobFree) {    }    showInterstitial() {      const interstitialConfig: AdMobFreeInterstitialConfig = {          isTesting: true, // Remove in production          autoShow: true          //id: Your Ad Unit ID goes here.      };      this.admob.interstitial.config(interstitialConfig);      this.admob.interstitial.prepare().then(() => {          // success      });    }  }  

Step 10: Next, open home.page.html and insert the following code. It is responsible for the user interface.

  <ion-header>    <ion-toolbar>      <ion-title>        Ionic AdMob      </ion-title>    </ion-toolbar>  </ion-header>    <ion-content class=”ion-padding”>      <ion-button (click)=”showInterstitial()” expand=”full”>Show Interstitial</ion-button>  </ion-content>  

Step 11: Now, run the app. You will get the ads on the full screen of the application.

Next TopicIonic vs React Native

Ionic AdMob

Ionic AdMob

Banner Ads

Interstitial Ads

IntelliJ vs Eclipse

Parsing a Static JSON file in iOS application

You may also like