In this tutorial we will take a look at how to display banner ads with the AdMob Free plugin for Ionic Apps. I have written a lot of tutorials when it comes to AdMob ads with Ionic, but all of those tutorials were using the AdMob Pro Plugin, this tutorial will be about the AdMob Free Plugin.
Step 1)
Let’s start off by creating a new Ionic app. We do that by running the following command in the terminal.
1 2 | ionic start bannerAdmobFree blank cd bannerAdmobFree |
As you can see we are creating a blank template project. We will be running all the following commands inside the created project, so we are navigating inside it in the terminal.
Want to learn how to implement Google AdMob Ads to you Ionic Apps?I have written an E-book which goes in details in implementing various Ad Formats and Monetization techniques using this plugin. You can take a look at it here.Step 2)
Now it’s time to add the AdMob plugin. We do that by running the following command.
1 | ionic cordova plugin add cordova-plugin-admob-free |
As we are using ionic, it’s time to add the ionic native wrapper for this plugin which will make it super easy to work with. We do that by running the following command.
1 | npm install --save @ionic-native/admob-free |
Step 3)
While we are in the terminal let’s add our platforms as well. Run the following commands to add Android and iOS, keep in mind that you can only add iOS if you are using a MAC.
1 2 | ionic cordova platform add android ionic cordova platform add ios |
Step 4)
Before using the AdMobFree module we will need to add it to the app.modules.ts. So open it up src\app\app.module.ts and code it as follows.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | import { BrowserModule } from '@angular/platform-browser'; import { ErrorHandler, NgModule } from '@angular/core'; import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular'; import { SplashScreen } from '@ionic-native/splash-screen'; import { StatusBar } from '@ionic-native/status-bar'; import { MyApp } from './app.component'; import { HomePage } from '../pages/home/home'; import { AdMobFree } from '@ionic-native/admob-free'; @NgModule({ declarations: [ MyApp, HomePage ], imports: [ BrowserModule, IonicModule.forRoot(MyApp) ], bootstrap: [IonicApp], entryComponents: [ MyApp, HomePage ], providers: [ StatusBar, SplashScreen, {provide: ErrorHandler, useClass: IonicErrorHandler}, AdMobFree ] }) export class AppModule {} |
As you can see we are importing AdMobFree and adding it to the providers array.
Step 5)
We will now code the landing page to display our ads. As I am using the blank template for this tutorial that is the home page. Open up src\pages\home\home.ts and code it as follows.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { AdMobFree, AdMobFreeBannerConfig} from '@ionic-native/admob-free'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { constructor(public navCtrl: NavController, private admobFree: AdMobFree) { this.displayBanner(); } displayBanner() { const bannerConfig: AdMobFreeBannerConfig = { // we will just use a test id for this tutorial id: 'ca-pub-xxxxxxxxxxx', isTesting: true, autoShow: true, bannerAtTop:true // default is false }; this.admobFree.banner.config(bannerConfig); this.admobFree.banner.prepare().then((result)=>{ console.log(result); },(reason)=>{ console.log(reason); }); } }//class |
Here we are first importing the AdMobFree form @ionic-native/admob-free and then injecting it into our constructor. We have created a function called displayBanner() that will handle all the add preparation and display code.
Inside the displayBanner() function we are first creating a constant bannerConfig for all the banner ad configurations that we want.
1 2 3 4 5 6 | const bannerConfig: AdMobFreeBannerConfig = { id: 'ca-pub-xxxxxxxxxxx', isTesting: true, autoShow: true, bannerAtTop:true }; |
Here we are setting the isTesting property to true. You should set it to false when you want to publish your app and keep it to true when testing. All the other properties are self-explanatory.
After that we are setting the config to the banner instance by doing the following.
1 | this.admobFree.banner.config(bannerConfig); |
As we have set autoShow to true we will just need to prepare the ads and the ads will show up. We do that in the following code
1 2 3 4 5 | this.admobFree.banner.prepare().then((result)=>{ console.log(result); },(reason)=>{ console.log(reason); }); |
As show the prepare() method will return a promise that we need to handel appropirately, here I am just logging the data that comes from the success and failure callbacks.
NOTE: If autoShow is set to false then we have to first prepare the ads by doing admobFree.banner.prepare() then inside the success of the returned promise we can show the ad by admobFree.banner.show()
Step 6)
It’s now time to run our app and check out AdMob Banner ads in action. We can run our app in a connected device or emulator using the following commands for Android and iOS
1 2 | ionic cordova run android --lc ionic cordova run ios --lc |
Conclusion
Displaying banner ads with admob free plugin in Ionic apps is not to difficult at all. Keep in mind to setisTesting to false before publishing.
