
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.