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.

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.

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

constbannerConfig: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.

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