Ionic 4/3 – How to Integrate Google AdMob Advertisements

Now we have Ionic 4 beta version, which is updated and featured with latest stable Angular 6 version. Angular 6 is having many updates including the new version of Angular Material, CLI tool updates, support for building new libraries etc.

In Ionic 4 also we will have many new changes like the new component, navigation, lazy loading etc, you can read more about Ionic 4 updates on the official blog here.

So here will only discuss Google AdMob most beloved monetization options available for mobile app developers. Google AdMob provides a good source to earn from a free application and it is also very easy to implement in your new or existing Ionic application.

Let’s start implementation of Google AdMob in Ionic 4 beta version.

 

Step 1) Create a new Ionic 4 application

As Ionic 4 is in beta phase so we need to add a flag to specifically create Ionic 4 app.

First, as a dependency, you must have nodejs installed on your computer.

After successfully creating the application go to app root folder

 

Step 2) Install the AdMob Plugin

To use Google AdMob in Ionic 4 application we need to use the Cordova plugin. Here we will use AdMob Free plugin. This plugin is free to use we will use a beta version of this plugin as last stable version is not supported in Ionic 4.

Run following commands to install the AdMob Free plugin in your application.

 

Only If your application is in Ionic 3 install these following packages

 

Note: If you face some issue like this

Then you need to install RxJS as well using below npm command

As Rxjs is required for Angular 6 using in Ionic 4.

Now we will make changes in application file to make it work.

Import AdMob free and add as a provider in src/app/app.module.ts, then we will be able to use it in our application.

 

If you are developing Ionic 3 Application then app.module.ts will be like this

 

Step 3) Create Google AdMob to Ad Unit ID

You Can Skip this step if you are already having Ad Unit ID or you can use Google test ID given below

Create a new account on Google AdMob or Use existing if you already have one. Or you can use Google provided free app AdMob test ID for development purposes.

Banner [ca-app-pub-3940256099942544/6300978111]
Interstitial [ca-app-pub-3940256099942544/1033173712]
Interstitial Video [ca-app-pub-3940256099942544/8691691433]
Rewarded Video [ca-app-pub-3940256099942544/5224354917]
Native Advanced [ca-app-pub-3940256099942544/2247696110]
Native Advanced Video [ca-app-pub-3940256099942544/1044960115]

Here are quick steps to create a new app and get your real Ad unit ID from Google AdMob

After Sign In or Sign Up AdMob, Click on Apps –> Add New

Select if the app is already published or not.

If Yes then it will search on Playstore or App Store

otherwise, you can provide the name of platform ie Android or IOS. Now click on “CREATE AD UNIT

Next step is to select AD type selection from “Banner”, “Interstitial” or “Rewarded”. You can create an ID for each type or we can start with Banner only 🙂

After Selecting Banner type, give a name then you will be provided with App ID with a “~” in it (This ID is not required for Ionic Apps only required in Native apps like Android Native) the second ID will be Ad Unit ID which we need to copy and keep in a handy place.

Step 4) Showtime: Show Ads using Simple Methods.

Enter the most simple part, here we will Ad simple methods to show  Banner, Interstitial & Rewarded Ads a respective configuration where we add ad unit ID or flag for test mode.

In HTML view “~src/app/home/home.page.html” add the following three buttons to show above mentioned three type of Ads.

Add methods in the home component file “~src/app/home/home.page.ts

Banner Ads

Interstitial Ads

Rewarded Ads

Following is the complete “home.page.ts” file code.

Find sample source code on GitHub here in Ionic 3.

That’s All Folks 😛

As Ionic 4 is in beta version may be soon IOnic team will introduce a stable version. I will try to keep this tutorial simple and updated. Let me know you get something new or find some glitch..

Thanks & Happy Coding 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *