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/” add the following three buttons to show above mentioned three type of Ads.

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

Banner Ads

Interstitial Ads

Rewarded Ads

Following is the complete “” file code.

UPDATE: This Method to Implement AdMob Free Plugin Ionic Application is Depreciated. Please See this latest post on implementation.

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

10 Comment threads
12 Thread replies
Most reacted comment
Hottest comment thread
8 Comment authors
KennVeerVicDeepak DhullVikky Keshav Recent comment authors
newest oldest most voted
Notify of

Have you tried this with admob-plus and Ionic4? I get an error, couldn’t get it to work. Any help?


Have you tried this with admob-plus and Ionic4? I get an error, couldn’t get it to work. Any help?


Any help?


Sorry, please delete that last comment 🙂

Vikky Keshav

What should i do if i have to show the ad in some part of my app( like a particular DIV) not on click of any button

Vikky Keshav
Vikky Keshav

So what happens if i don’t use that button and i want to show the AD automatically when the AD is ready in any part of the application

Deepak Dhull

Exception in thread “main” java.lang.IllegalArgumentException

I am getting build error after adding AdmobFree Plugin.

Please help.


It’s OK if I use testing: true but when i try to use my own app unit it’s now showing on the screen. Do you have any idea on this issue?


Thanks for your blog. It is very useful.
I am trying to show ad on every 5 click in my app. I have done it and ad is showing well. But the problem is it is appearing after next screen navigate. Is their any way that I can navigate to next screen after user click on close ad?


Can someone help me to get admob free to work on the beta @ionic/react?