Skip to main content

Show Banner Ads In Ionic With AdMob Free Plugin

Share on FacebookTweet about this on TwitterShare on Google+Share on RedditShare on StumbleUponDigg thisFlattr the authorPin on PinterestShare on TumblrShare on LinkedInPrint this pageBuffer this page

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 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

 

 

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.

 

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.
Consider Subscribing / Donating
Subscribe To Mailing List
Donate
If my site was helpful to you, then please consider donating via paypal:

Prantik Vaghela (pointdeveloper)

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

%d bloggers like this: