Jumat, 11 Agustus 2017

Ionic - Cordova AdMob

The Cordova AdMob plugin is used for integrating ads natively. We will use the admobpro plugin in this chapter, since the admob is deprecated.

Using AdMob

To be able to use ads in your app, you need to sign up to admob and create a banner. When you do this, you will get an Ad Publisher ID. Since these steps are not a part of the Ionic framework, we will not explain it here. You can follow the steps by Google support team here.
You will also need to have android or iOS platform installed, since the cordova plugins work only on native platforms. We have already discussed how to do this in our environment setup chapter.
The AdMob plugin can be installed in the command prompt window.
C:\Users\Username\Desktop\MyApp> cordova plugin add cordova-plugin-admobpro
Now that we have installed the plugin, we need to check if the device is ready before we are able to use it. This is why we need to add the following code in the $ionicPlatform.ready function inside the app.js.
if( ionic.Platform.isAndroid() )  { 
   admobid = { // for Android
      banner: 'ca-app-pub-xxx/xxx' // Change this to your Ad Unit Id for banner...
   };

   if(AdMob) 
      AdMob.createBanner( {
         adId:admobid.banner, 
         position:AdMob.AD_POSITION.BOTTOM_CENTER, 
         autoShow:true
      } );
}
The output will look as shown in the following screenshot.
Ionic Cordova Admob
The same code can be applied for iOS or a Windows Phone. You will only use a different id for these platforms. Instead of a banner, you can use interstitial ads that will cover entire screen.

AdMob Methods

The following table shows methods that can be used with admob.
MethodparametersDetails
createBanner(parameter1, parameter2, parameter3)adId/options, success, failUsed for creating the banner.
removeBanner()/Used for removing the banner.
showBanner(parameter1)positionUsed for showing the banner.
showBannerAtXY(parameter1, parameter2)x, yUsed for showing the banner at specified location.
hideBanner();/Used for hiding the banner.
prepareInterstitial(parameter1, parameter2, parameter3)adId/options, success, failUsed for preparing interstitial.
showInterstitial();/Used for showing interstitial.
setOptions(parameter1, parameter2, parameter3)options, success, failUsed for setting the default value for other methods.

AdMob Events

The following table shows the events that can be used with admob.
EventDetails
onAdLoadedCalled when the ad is loaded.
onAdFailLoadCalled when the ad is failed to load.
onAdPresentCalled when the ad will be showed on screen.
onAdDismissCalled when the ad is dismissed.
onAdLeaveAppCalled when the user leaves the app by clicking the ad.
You can handle these events by following the example below.
document.addEventListener('onAdLoaded', function(e){
   // Handle the event...
});

Tidak ada komentar:

Posting Komentar