Ionic 4 | Implement AdMob Free Native Plugin in Latest Ionic 4 Applications more efficiently

As the latest stable version of Ionic 4 is released, some of the previous methods to implement AdMob Free plugin are depreciated. AdMob Free plugin helps to add AdMob Google ads in Ionic Application.

As we all know that we can add three types of AdMob ads in a hybrid application like Ionic for now, which are Banner Ads, Interstitial Ads ad Reward Video Ads.

In this post, we will also discuss to Implement Interstitial and Reward Ads more efficiently to protect the app from Google PlayStore policy violations.

So let’s Implement AdMob Free plugin in latest Ionic 4 Application.

Create a new Ionic 4 Application

Don’t forget to update your Ionic CLI to latest version 4.10.3 using below command

Create a new Ionic blank app

 

Add Cordova and Ionic Native AdMob Free Plugin

Install the AdMob Free plugin using the following npm commands.

You can read more about how to get App ID from AdMob site here

Service for AdMob Free Methods

Next, we will create a new AdMob service under a service folder to keep three of our methods to show all three type of Ads in the application.

“~Ionic4AdmobFree/src/app/service/admobfree.service.ts

For Interstitial and Reward Video Ads we have added configuration part before constructor, in platform ready event we are preparing both these ad type with content. After when these both ads are shown up and closed, then on CLOSE event these will prepare again.

You can check more events here

This method will prevent ads to show up after the user exit the application which is a violation of Google Play store policies.

Import Plugin and Service in App’s main module

Next, we will update Home page HTML and Component files to call these Ads.

home.page.ts

home.page.html

After updating your app with the above code, you can run and check on a real device by running following command

Find GitHub source code here

So here we discussed the latest and policy safe method to implement AdMob ads in Ionic 4 Applications using AdMob Free plugin by Ratson 🙂

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

13
Leave a Reply

avatar
6 Comment threads
6 Thread replies
7 Followers
 
Most reacted comment
Hottest comment thread
8 Comment authors
Matthew HarrisMarcoWD RASHELshaileshElvis Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Pandora
Guest
Pandora

nothing happens with me just a white screen on my emulator :/

Francesco
Guest
Francesco

Hi, I’m following your tutorial about only video rewards.
After doing everything, testing the apk on my device, I get an alter with the word “plugins_not_installed” even if with a cordova plugins list type instruction I saw that the plugin is present. How do I solve? I tried several times to reinstall everything.

Elvis
Guest
Elvis

Hello, I am using ionic 4.10 and after installing this plugin I am not able to compile the apk, follow the error: ionic 4Execution failed for task ‘: app: transformClassesWithDesugarForDebug’, thanks any help.

Marco
Guest
Marco

Same error, someone knows solve it…?

shailesh
Guest
shailesh

No Ads shown

WD RASHEL
Member

interstitialAd is null, call createInterstitialView first

Matthew Harris
Member
Matthew Harris

Hey. I noticed a bad link in this tutorial: “You can read more about how to get App ID from AdMob site here” the “here” is pointing at another tutorial, not AdMob.

MrTob
Guest

first, thanks for the tutorial, teast ads working fine, but real ads not working any solutions?