Ionic 3 | Integrate AdMob Plus an Update of AdMob Free in Ionic 3 Applications

AdMob Plus is a Cordova plugin to use Google AdMob in hybrid applications like Ionic. AdMob Plus is developed by same developer Ratson who previously developed and maintained AdMob Free plugin. Ratson wanted to create an AdMob plugin with no ad sharing, as most of the plugin do, they take a part of the revenue from developer earning when they cross a certain threshold. But Ratson was interested to develop an open source project where a developer can use AdMob without any risk of revenue sharing.

There’s a tagline for AdMob Plus 🙂 “Trustable AdMob Plugin for Cordova

So in this post, we will discuss on How to Implement AdMob Plus plugin in Ionic 3 Applications.

Let’s Start…

Create a new Ionic 3 blank application

 

Install AdMob Plus Cordova and Ionic native plugins

Replace App ID with yours in production.

Add this plugin to your app’s module

In app.module.ts, import AdMob Plus and Import in providers

 

Implement Ads in Application

Google AdMob provides three type of Ads, Banner, Interstitial and Rewarded Video. We can implement all these three types of ads in our Ionic application using AdMob Plus native plugin

First, we will import AdMob plus in our component and also add in the constructor.

Banner Ads

To show banner ads we will call admob.banner.show method. Banner ads show up mainly on the bottom of the screen and don’t overlap on exsiting app content.

 

Interstitial Ads

Interstitial ads are full-page ads, these can be video or simple graphical ads.

 

Rewarded Video

Rewarded Video is a special type of ads which a developer can use to give some reward to the user in return of viewing ads.

After implementing all ad type methods our home.ts file will look like this

 

Note: Ad unit ID’s used in the above code are test ID’s provided by Google for the development phase, you can replace these when your app is ready for production launch.

Android Test ID’s

IOS Test ID’s

Call these methods in home.html

Now we need to call these methods in home.ts file

So in the above tutorial, we implemented the AdMob Plus Native plug to show AdMob Ads in Ionic 3 application. This plugin is still facing bugs and rectifying daily, but much stable to be used, or you can opt for older version AdMob Free from the same developer.

Leave a Reply

avatar
  Subscribe  
Notify of