Show Banner Ads In Ionic With AdMob Free Plugin

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.

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.


Step 2)

Now it’s time to add the AdMob plugin. We do that by running the following command.

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.


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.


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.

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.

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.

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.


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

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


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



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.


Leave Me Your Questions And Feedback

Getting your feedback inspires me the most so hit me up in the comments here or on the comments section on my YouTube Channel or on twitter @uncutAcademy
Consider Subscribing / Donating
Subscribe To Mailing List
If my site was helpful to you, then please consider donating via paypal:
Prantik Vaghela

Prantik Vaghela (uncutAcademy)

Hi my name is Prantik Vaghela. I have done my Bachelors and Masters in Computer Science and am a web developer and now a Tutor through my blog. :-)