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

Ionic 2 example

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 = {
    bannerAdId: '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'));