INTRODUCTION
In this tutorial, I'll show you how to use the Ionic 4/5 AdMob plugin to show ads in your app. It's an easy-to-follow guide. You only need to take a few steps to display the ads. I hope you already know what Ionic is and how it works. We'll use CLI, HTML, CSS, TS, etc. Admob is one of the cleanest and most straightforward ways to make money from your app. Google gives us access to a vast advertising network we could never get. With an app that has 1,000 active users, I can make about $200 per week.
- Step 1 — Basic Info Ionic/Angular application
- Step 2 — Setup Admob Plugin in Ionic/Angular
- Step 3— Use Admob Plugin in Ionic/Angular Application
- Step 4 — Doploy Ionic/Angluar Application
- Step 5— Various Admob Features & Usage
Before we deep into our code, let me show you what actually we are going to buid:
So let’s dive right in!
STEP 1 — What is AdMob
Admob is one of the cleanest and most straightforward ways to make money from your app. Google gives us access to a vast advertising network we could never get. With an app that has 1,000 active users, I can make about $200 per week.
Admob gives you three kinds of ads.
- Banners are small ads appearing at the screen's top or bottom.
- Interstitials are full-screen ads that you can skip (or almost skip) right away.
- Video Reward: Long commercials that reward the user. Great if you want to give the user something.
These three types of ads give us a lot of freedom to put ads in our app without affecting the user experience (UX). Tell us not to abuse it because if we do, the next thing the user will likely do is close the app and uninstall it.
Because of this, we need to use them smartly and elegantly. For example, a Video Reward should only be used when the user is getting something in return, like data, stats, or virtual goods. Or, put the interstitial between changes in views. That way, the user will be ready to be interrupted, and the ad won't be as annoying.
So, if we want to use AdMob in our ionic project, we must first add the AdMob plugin to our app. Use the commands below to install a plugin, but don't forget to change the fundamental values to your own.
Open your favourite CMD & run these admob installation commands:
ionic cordova plugin add cordova-plugin-admob-free --variable ADMOB_APP_ID="YOUR_APP_KEY" --save// You need to append your admob app id in the above command before running into the terminal. Then run the below command.npm install @ionic-native/admob-free
Let's move on to the code itself. Next, open the src/app/app.module.ts file and import AdMobFree Add it to the list of providers.
import { AdMobFree } from '@ionic-native/admob-free/ngx';
@NgModule({
declarations: [
..., // Your declarations
],
imports: [
..., // Your Imports
],
bootstrap: [IonicApp],
entryComponents: [
..., // Your Entry Components
],
providers: [
AdMobFree, SplashScreen, Statusbar
{provide: ErrorHandler, useClass: IonicErrorHandler}
]
})
export class AppModule {}
Ionic 5 Banner Ads
Next, open the file src/app/app.component.ts and add the code below:
import { SplashScreen } from '@ionic-native/splash-screen';
import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';import { AdMobFree, AdMobFreeBannerConfig } from '@ionic-native/admob-free/ngx';
@Component({
templateUrl: 'app.html'
})
export class MyApp {
constructor(private platform: Platform, private statusBar: StatusBar, private splashScreen: SplashScreen , public admobFree: AdMobFree) {
this.platform.ready().then(() => {
// Ionic/Angular Current Platform is ready here.
this.statusBar.styleDefault();
this.splashScreen.hide();
this.showAdmobBannerAds();
});
}
showAdmobBannerAds(){
const banerCnfig: AdMobFreeBannerConfig = {
isTesting: true,
autoShow: true
};
this.admobFree.banner.config(banerCnfig);
this.admobFree.banner.prepare()
.then(() => {
// Ionic/Angular Banner Ad successfully ready
// You can set autoShow to false, and if do so then you will need to call show function/method here
})
.catch(e => console.log(e));
}
}
We've added AdMobFree and made the showAdmobBannerAds() method, so that banner ads appear when Cordova is ready.
We've already chosen two configurations:
isTesting: true, tells the Admob plugin only to show test ads. It is the best choice when you're still working on your app so that you don't accidentally click on ads and mess up your Google Admob account.autoShow: true makes banner ads appear as soon as they are without using the show() method.
Next, get your ad publisher ID and add it as follows to the configuration options:
const banerCnfig: AdMobFreeBannerConfig = {
id: 'ca-app-pub-YOUR_KEY',
isTesting: false,
autoShow: true
};
If autoShow is set to false, you must call the show() method after making the banner:
this.admobFree.banner.prepare()
.then(() => {
this.admobFree.banner.show()
})
.catch(e => console.log(e));
}
You can also hide the banner using:
this.admobFree.banner.hide()
Or you can completely remove it using:
this.admobFree.banner.remove()
Putting ads between screens in your Ionic 5 app
You can also use the following method in Ionic/Angular to show Admob Interstitial ads:
showInterstitialAds(){
const banerCnfig: AdMobFreeBannerConfig = {
id: 'ca-app-pub-YOUR_KEY',
autoShow: false,
isTesting: false
};
this.admobFree.interstitial.config(banerCnfig);
this.admobFree.interstitial.prepare()
.then(() => {
this.admobFree.interstitial.show()
})
.catch(e => console.log(e));
}
You can add Interstitial Ads with the same settings and methods you use for other ads.
Putting Reward Video Ads in your Ionic 5 app
If you want your Ionic/Angular mobile app to show Reward Video Ads, you can add and call the following method:
showRewardVideoAds(){
const banerCnfig: AdMobFreeBannerConfig = {
id: 'ca-app-pub-YOUR_KEY',
autoShow: false,
isTesting: false
};
this.admobFree.rewardvideo.config(banerCnfig);
this.admobFree.rewardvideo.prepare()
.then(() => {
this.admobFree.rewardvideo.show()
})
.catch(e => console.log(e));
}
Conclusion
Conclusion
Finally, the tutorial for Ionic 5 Cordova Admob and Geocoder plugins is over. Subscribe us on YouTube for more.