Skip to content
Marc Pascual edited this page Jun 5, 2020 · 5 revisions

AdMob Native plugin for ionic apps

Monetize your apps and games with AdMob ads using latest Google AdMob SDK. With this plugin you can show AdMob ads easily!

Install

Install cordova-admob in your Ionic 2 app:

ionic cordova plugin add cordova-admob
npm install --save admob-ionic-native

Usage

import { Admob, AdmobOptions } from '@ionic-native/admob';


constructor(private admob: Admob) { }

...

// Admob options config
const admobOptions: AdmobOptions = {
    bannerId: 'XXX-XXXX-XXXX',
    interstitialAdId: 'XXX-XXXX-XXXX',
    rewardedAdId: 'XXX-XXXX-XXXX',
    isTesting: true,
    autoShowBanner: false,
    autoShowInterstitial: false,
    autoShowRewarded: false,
    adSize: this.admob.AD_SIZE.BANNER
}



// Set admob options
this.admob.setOptions(admobOptions)
  .then(() => console.log('Admob options set'))
  .catch(err => console.error('Error setting admob options:', err));



// Load banner ad
this.admob.createBannerView()
  .then(() => console.log('Banner ad loaded'))
  .catch(err => console.error('Error loading banner ad:', err));



// Show banner ad
this.admob.showBannerAd()
  .then(() => console.log('Banner ad shown'))
  .catch(err => console.error('Error showing banner ad:', err));



// Hide banner ad
this.admob.showBannerAd(false)
  .then(() => console.log('Banner ad hidden'))
  .catch(err => console.error('Error hiding banner ad:', err));



// Load interstitial ad
this.admob.requestInterstitialAd()
  .then(() => console.log('Interstitial ad loaded'))
  .catch(err => console.error('Error loading interstitial ad:', err));



// Show interstitial ad
this.admob.showInterstitialAd()
  .then(() => console.log('Interstitial ad shown'))
  .catch(err => console.error('Error showing interstitial ad:', err));



// Load rewarded ad
this.admob.requestRewardedAd()
  .then(() => console.log('Rewarded ad loaded'))
  .catch(err => console.error('Error loading rewarded ad:', err));



// Show rewarded ad
this.admob.showRewardedAd()
  .then(() => console.log('Rewarded ad shown'))
  .catch(err => console.error('Error showing rewarded ad:', err));



// Hide and destroy banner or interstitial ad
this.admob.destroyBannerView()
  .then(() => console.log('Banner or interstitial ad destroyed'))
  .catch(err => console.error('Error destroying banner or interstitial ad:', err));



// On Ad loaded event
this.admob.onAdLoaded().subscribe((ad) => {
    if (ad.adType === this.admob.AD_TYPE.BANNER) {
        console.log('Banner ad is loaded');
        this.admob.showBannerAd();
    } else if (ad.adType === this.admob.AD_TYPE.INTERSTITIAL) {
        console.log('Interstitial ad is loaded');
        this.admob.showInterstitialAd();
    } else if (ad.adType === this.admob.AD_TYPE.REWARDED) {
        console.log('Rewarded ad is loaded');
        this.admob.showRewardedAd();
    }
});



// On Ad failed to load
this.admob.onAdFailedToLoad().subscribe(err => console.log('Error loading ad:', err));



// On open interstitial ad
this.admob.onAdOpened().subscribe(() => console.log('Interstitial ad opened'));



// On close interstitial ad
this.admob.onAdClosed().subscribe(() => console.log('Interstitial Ad closed'));



// On click ad and left application
this.admob.onAdLeftApplication().subscribe(() => console.log('Ad lefted application'));



// The user has been rewarded
this.admob.onRewardedAd().subscribe(() => console.log('The user has been rewarded'));



// On Rewarded ad video started
this.admob.onRewardedAdVideoStarted().subscribe(() => console.log('Rewarded ad vieo started'));



// On Rewarded ad video completed
this.admob.onRewardedAdVideoCompleted().subscribe(() => console.log('Rewarded ad video completed'));