The goal of this tutorial is to explain how to add Mobile Ads to your Ionic App using AdMob. The most common use case for AdMob is for monetizing your app showing advertising to the users.
What is AdMob?
AdMob is the Google's advertising platform for monetizing and promoting mobile apps. It's also the most used and recognized by developers. AdMob is available for Android and iOS platforms. It enables app developers to promote their apps through in-app ads, monetize their apps by enabling in-app advertising, and provides smart insights through Google Analytics.
Before you can serve any AdMob ads you need to sign up for an AdMob account. AdMob doesn't charge a fee for creating an account or for serving up AdMob ads (be aware that some AdMob plugins vendors do charge a fee for the use of their plugin).
If you already have an AdMob account you need to create a set of Ad Unit IDs that identify your ad impressions and provide these IDs as part of the AdMob API initialization sequence within your app.
Each application should have its own set of Ad Unit IDs. If you don't yet have an application in an App Store, you can use the "manual" method to identify your app just for the purpose of obtaining Ad Unit IDs. In this tutorial we will use Cordova AdMob free plugin.
Remember that this AdMob plugin uses Cordova, so it will not work on the browser. You need to try it on a real device or in an emulator.
For this Ionic admob tutorial, we will build a Ionic app with AdMob integration and we will explain how to display both banner and interstitial ads.
To add this feature to your app, you can either use a new Ionic blank app, or a premium Ionic starter.
If you are looking for a beautiful Ionic starter app that will save you hundreds of hours of design and development, you must have a look at our Ionic templates.
This is the app we are going to build on this tutorial:
The first step is to install the Admob Plugin in our Ionic App. To do it please follow these steps:
- Execute the following command on the terminal:
$ ionic cordova plugin add cordova-plugin-admob-free
$ npm install --save @ionic-native/admob-free - Import AdMob Free form Ionic Native to your
app.module.tsfile:import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free';
There are three different types of Ads we can display:
- Banner Ads
- Interstitial Ads
- Reward Video Ads
In this example we will cover Banner and Interstitial Ads. However, if you want to learn more you can check the plugin's documentation.
That was all for the installation of the plugin. Now we will go straight to the code so open your Ionic App with your preferred code editor. Personally I use and recommend atom.
The best way to show you how to create a banner is with a real example of the code. Below you can see the Typescript code that handles a banner creation in an Ionic app.
Admob Banner Configuration
The banner Ads can be displayed in different positions and can have different sizes. You can check all this customizations here and then add them to your bannerConfig as shown in the code below.
We set autoshow: true so the banner will be shown immediately after the banner is created.
import { Component } from '@angular/core';
import { NavController, Platform, ToastController } from 'ionic-angular';
import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free';
@Component({
selector: 'page-ads',
templateUrl: 'ads.html'
})
export class AdsPage {
constructor(
private navController: NavController,
private toastCtrl: ToastController,
private adMobFree: AdMobFree
) {}
createBanner() {
let toast = this.toastCtrl.create({
message: 'Creating your ad',
duration: 3000,
position: 'top'
});
toast.present();
const bannerConfig: AdMobFreeBannerConfig = {
// add your config here
// for the sake of this example we will just use the test config
isTesting: true,
autoShow: true
};
this.adMobFree.banner.config(bannerConfig);
this.adMobFree.banner.prepare()
.then(() => {
// banner Ad is ready
// if we set autoShow to false, then we will need to call the show method here
}).catch(e => console.log(e));
}
}Errors at Banner creation
The banner ad creation can fail so we will subscribe to onAdFailLoad event in app.component.ts and display a message: 'There was an error creating your ad', however, you should use this event to handle the creation error properly.
constructor(
platform: Platform,
toastCtrl: ToastController,
public adMobFree: AdMobFree,
public statusBar: StatusBar,
public splashScreen: SplashScreen
) {
platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
document.addEventListener('onAdFailLoad', function(e) {
let toast = toastCtrl.create({
message: 'Error creating your ad',
duration: 3000,
position: 'top'
});
toast.present();
});
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}Hide Admob banner
Sometimes you need to hide the banner in some screens or just remove it at all. This functionality is very easy to achieve and very useful in situation where you don't want the ad to be visible.
import { Component } from '@angular/core';
import { NavController, Platform, ToastController } from 'ionic-angular';
import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free';
@Component({
selector: 'page-ads',
templateUrl: 'ads.html'
})
export class AdsPage {
constructor (
private navController: NavController,
private toastCtrl: ToastController,
private adMobFree: AdMobFree
) {}
removeBanner() {
this.adMobFree.banner.hide();
}
}Interstitial ads are full-screen ads that cover all the app's screen. They're typically displayed at natural transition points in the flow of an app, such as between activities or during the pause between levels in a game.
When an app shows an interstitial ad, the user has the choice to either tap on the ad and continue to its destination or close it and return to the app. It's much more intrusive than the banner ad.
We will prepere the interstitial and when it's ready it will be displayed automatically. In adMobFree.interstitial.config you need to set you interstitial Ad ID created in your AdMob Account.
We set autoshow: true so that the interstitial ad is displayed immediately after its creation.
import { Component } from '@angular/core';
import { NavController, Platform, ToastController } from 'ionic-angular';
import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free';
@Component({
selector: 'page-ads',
templateUrl: 'ads.html'
})
export class AdsPage {
constructor(
private navController: NavController,
private toastCtrl: ToastController,
private adMobFree: AdMobFree
) {}
showInterstitial() {
this.adMobFree.interstitial.config({
id: 'ca-app-pub-xxx/xxx',
autoShow: true
}
this.adMobFree.interstitial.prepare();
}
}On this Ionic Admob Integration tutorial we explained how easy is to add advertising to your app. AdMob makes earning revenue easy with in-app ads.
We saw the differences between a banner ad and an interstitial ad and how to display both of them from your Ionic app.
Advertising is just a tiny step in building a complete mobile app with Ionic. In our blog you can find lots of other tutorials that will guide you in the process of creating your Ionic App.
Did you know that we recently released Ionic 6 Full Starter App? It's an ionic 5 template that you can use to jump start your Ionic app development and save yourself hundreds of hours of design and development.
These are some of my favourite Ionic tutorials. All of them include a free Ionic starter that you can reuse for your own project.
Liked this Ionic Tutorial?
Leave your comments below.