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

Ionic4

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 formatSample ad unit ID
Bannerca-app-pub-3940256099942544/6300978111
Interstitialca-app-pub-3940256099942544/1033173712
Interstitial Videoca-app-pub-3940256099942544/8691691433
Rewarded Videoca-app-pub-3940256099942544/5224354917
Native Advancedca-app-pub-3940256099942544/2247696110
Native Advanced Videoca-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.

Leave a Reply

Your email address will not be published. Required fields are marked *