Ionic 4 – Integrate Google Admob(Banners, Interstitial, Rewards) tutorial.

At the end of this tutorial, you will learn how to use AdMob in your ionic 4 application. You will be able to use banners, interstitial and rewards video and add those to your application. We will use an AdMob free plugin to show ads in our application.

On every step please create a new app or if you have your app ready and in a working state, install below plugin.

Install Ionic 4 Admob Plugin

cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="<YOUR_ANDROID_ADMOB_APP_ID_AS_FOUND_IN_ADMOB>"

Please use these sample ad units for test ads, clicking your ads for testing is prohibited and may lead to suspension of your account.

Ad format	Sample ad unit ID
Banner	ca-app-pub-3940256099942544/6300978111
Interstitial	ca-app-pub-3940256099942544/1033173712
Interstitial Video	ca-app-pub-3940256099942544/8691691433
Rewarded Video	ca-app-pub-3940256099942544/5224354917
Native Advanced	ca-app-pub-3940256099942544/2247696110
Native Advanced Video	ca-app-pub-3940256099942544/1044960115

If you want to use rewards video, you must install a plugin for the mediation network. Use below command to install the plugin
cordova plugin add cordova-admob-inmobi --save

Lets Start Coding

Declare a global variable
declare var plugins;

Now we can access the admob using plugins.Admob and start writing the code.

 plugins.AdMob.rewardvideo.config({
    id: "ca-app-pub-3940256099942544/5224354917",
    isTesting: true,
    autoShow: true,
  });
plugins.AdMob.rewardvideo.prepare().then(res=> {console.log(res)

  plugins.AdMob.rewardvideo.show().then(
    (res) => console.log(res),
    (err) => console.log(err)
  );}
,err=> console.log(err))

  document.addEventListener("admob.rewardvideo.events.LOAD", () => {
      console.log("LOAD A REWARD HERE");
    });
    document.addEventListener("admob.rewardvideo.events.START", () => {
      console.log("START REWARD HERE");
    });
    document.addEventListener("admob.rewardvideo.events.CLOSE", () => {
      console.log("CLOSE A HERE");
    });
    document.addEventListener("admob.rewardvideo.events.REWARD", () => {
      console.log("REWARD A HERE");
    });
     document.addEventListener("admob.rewardvideo.events.COMPLETE", () => {
       console.log("complete A HERE");
     });

For Interstitial Ads
 //   plugins.AdMob.interstitial.config({
  //  id: 'ca-app-pub-3940256099942544/5224354917',
  // })
 
  // plugins.AdMob.interstitial.prepare()
 
  // plugins.AdMob.interstitial.show()

Use the above events to perform your actions. The reward video events like REWARD, CLOSE shall be used to perform the actions based on user inputs. In your reward events, you can give rewards to your users, and many more.

Similarly you can use banners and interstitial in place of reward to show other ads.

You can visit other tutorials at http://ionicwhiz.in/ionic

Common Erros

Rewards Video not showing in test mode/ production mode.

Please use the above configuration and I hope you will succed, in case you are facing some other troubles, please comment and let me know. I would be happy to help you.