Know How Admob Work In Ionic App Development

Admob Work in Ionic App Development

The guide is for mobile application developer. For making some money out of your application google ads are the best to have them in it. Ionic have the feature support for displaying google ads using AdMob plugin and in that way helps you get the revenue from your application.

Here, I will explain you the steps for configuring the AdMob account for your application.

AdMob Setting

             a. You can use your regular email address for this. 

  • Click the Monetize Menu and click new app button.

             a. You will get the Ad Publisher ID.
             b. Here, If you have application in google play store then you can find it from there or if it's your first application then you can add application name manually and select platform for an application.
             c. You can get the app id from the application.

NOTE: when you are copy some changes are required like it will give tild(~) sign in change that sign to(/) and add into application.

Now, let’s talk about some basic type of advertisements available for an application.

  1. Banner Ad
  2. Interstitial Ad
  3. Native Ad 

NOTE: Here,the native ads are not supported in ionic application.

You can add multiple Banner ads, Interstitial ads & Native Ads in our AdMob Account. In all the advertisement you will need to add Ad unit name : in AdMob Setting then click on save button.  

If you want to get the analytics of your application then you can also configure the  Firebase Analytics , In this article we are going to skip this step as our main focus here is on getting the AdMobs in the ionic application.

Here, all the advertisement have unique ad unit id: it will look like:

Know How Admob Work in Ionic App Development

Ionic Configuration:

1. Start the application
ionic create testAdmob blank

2. Add platforms
ionic platform add ios
ionic platform add android

3. Add plugin Admob
cordova plugin add cordova-plugin-admobpro

4. Add the below mentioned code in your app.js file
$ionicPlatform.ready(function () {
var admobid = {};
// select the right Ad Id according to platform
if( /(android)/i.test(navigator.userAgent) ) {
admobid = { // for Android
banner: 'ca-app-pub-8072486868091132/5100570808',
interstitial: 'ca-app-pub-8072486868091132/9332294001'
};
} else {
admobid = { // for Windows Phone
banner: 'ca-app-pub-8072486868091132/5100570808',
interstitial: 'ca-app-pub-8072486868091132/5100570808'  
};
}
if(window.AdMob) {
	AdMob.createBanner( {
adId:admobid.banner,
isTesting: true,
position:AdMob.AD_POSITION.TOP_CENTER,
autoShow:true
} );
}
if(window.AdMob) {
	 AdMob.prepareInterstitial( {
adId:admobid.interstitial,
autoShow:true} );
});
}

5. Build your application and then run in it device.
ionic build ios
ionic build android

ionic run ios --device
ionic run android --device

Now, you are ready to view the advertisements similar to display below. First is the type of banner and second is the type of Interstitial Ad.

You can change the dimensions and colors for fonts and background as well.One can also include video and animated text in the interstitial type of ad.

Know How Admob Work in Ionic App Development

Hope this article has helped you getting Advertisement in your hybrid application in an ionic framework. Need more assistance regarding Mobile Apps Development services...!