capacitor-admob-ads v5.0.0

capacitor-admob-ads

Capacitor plugin to display admob ads in your Ionic Apps

API for Banner, Interstitial, Rewarded Interstitial, Rewarded Video and Native Admob ads are available.

Install

npm install capacitor-admob-ads
npx cap sync

What is AdMob

Google AdMob makes it easy for developers to earn money from their mobile apps with high-quality ads. AdMob maximizes the value of every impression by combining global advertiser demand, innovative ad formats, and advanced app monetization technology.

Why show ads?

Showing ads to app users allows you to create a sustainable source of revenue to help grow your business while you focus on building and developing quality apps. Advertisers get to reach new customers, and users can discover relevant products and services – while enjoying apps for free. So it’s a win for everyone – developers, users, and advertisers.

Supported Platform

• Android

Android Configuration

Update Manifest

Open your android/app/src/Android/AndroidManifest.xml file and add this meta-data line at the right spot (and replace the value by the actual App ID of your app):

<application>
  <!-- this line needs to be added (replace the value!) -->
  <meta-data android:name="com.google.android.gms.ads.APPLICATION_ID" android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy" />  
</application>

API

ALWAYS USE TEST ADS WHILE DEVELOPING, TESTING, DEBUGGING.

Banner Ad

API to display banner ads in your apps.

By default, banner ad sits at the top or bottom of the screen (based on your ad position). You should add spacing (padding or margin) to your app content to avoid the overlap. Below you can find the size of each banner ad.

• showBannerAd(...)
• hideBannerAd()
• resumeBannerAd()
• removeBannerAd()
• addListener('bannerAdOpened', ...)
• addListener('bannerAdClicked', ...)
• addListener('bannerAdImpression', ...)
• addListener('bannerAdClosed', ...)
• Banner Ad Example

showBannerAd(...)

To show a banner ad call this method with the below options.

showBannerAd(options: BannerAdOptions) => Promise<void>

BannerAdOptions

BannerSize

BannerPosition

hideBannerAd()

To hide a banner ad that is currently shown.

hideBannerAd() => Promise<void>

resumeBannerAd()

To resume a banner ad that is currently hidden.

resumeBannerAd() => Promise<void>

removeBannerAd()

To remove the banner ad that is currently shown.

removeBannerAd() => Promise<void>

addListener('bannerAdOpened', ...)

Triggers when a banner ad is opened.

addListener(eventName: 'bannerAdOpened', listenerFunc: () => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

addListener('bannerAdClicked', ...)

Triggers when a banner ad is clicked.

addListener(eventName: 'bannerAdClicked', listenerFunc: () => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

addListener('bannerAdImpression', ...)

Triggers when a banner ad registers an impression.

addListener(eventName: 'bannerAdImpression', listenerFunc: () => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

addListener('bannerAdClosed', ...)

Triggers when a banner ad is closed.

addListener(eventName: 'bannerAdClosed', listenerFunc: () => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Banner Ad Example

import { AdmobAds, BannerPosition, BannerSize } from "capacitor-admob-ads";

// To show a banner ad
AdmobAds.showBannerAd({ adId: "ca-app-pub-3940256099942544/6300978111", isTesting: true, adSize: BannerSize.BANNER, adPosition: BannerPosition.BOTTOM }).then(() => {
   console.log('Banner Ad Shown');
}).catch(err => {
   console.log(err.message);
});

// To hide a banner ad
 AdmobAds.hideBannerAd().then(() => {
   console.log('Banner Ad Hidden')
}).catch(err => {
   console.log(err.message);
});

// To resume a hidden banner ad
AdmobAds.resumeBannerAd().then(() => {
   console.log('Banner Ad Resumed');
}).catch(err => {
   console.log(err.message);
});

// To remove a banner ad
AdmobAds.removeBannerAd().then(() => {
   console.log('Banner Ad Removed');
}).catch(err => {
   console.log(err.message);
});

// Event Listeners
AdmobAds.addListener("bannerAdOpened", () => {
   console.log('Banner Ad Opened');
});

AdmobAds.addListener("bannerAdClicked", () => {
   console.log('Banner Ad Clicked');
});

AdmobAds.addListener("bannerAdImpression", () => {
   console.log('Banner Ad Impression');
});

AdmobAds.addListener("bannerAdClosed", () => {
   console.log('Banner Ad Closed');
});

Interstitial Ad

API to display interstitial ads in your apps.

• loadInterstitialAd(...)
• showInterstitialAd()
• addListener('interstitialAdClicked', ...)
• addListener('interstitialAdDismissed', ...)
• addListener('interstitialAdFailedToShow', ...)
• addListener('interstitialAdImpression', ...)
• addListener('interstitialAdShowed', ...)
• Interstitial Ad Example

loadInterstitialAd(...)

To load an interstitial ad call this method with the below options (You have to load an ad before showing it).

loadInterstitialAd(options: InterstitialAdOptions) => Promise<void>

InterstitialAdOptions

showInterstitialAd()

To show an already loaded interstitial ad use this method.

showInterstitialAd() => Promise<void>

addListener('interstitialAdClicked', ...)

Triggers when an interstitial ad is clicked.

addListener(eventName: 'interstitialAdClicked', listenerFunc: () => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

addListener('interstitialAdDismissed', ...)

Triggers when an interstitial ad is dismissed.

addListener(eventName: 'interstitialAdDismissed', listenerFunc: () => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

addListener('interstitialAdFailedToShow', ...)

Triggers when an interstitial ad is failed to show.

addListener(eventName: 'interstitialAdFailedToShow', listenerFunc: (error: { message: string; }) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

addListener('interstitialAdImpression', ...)

Triggers when an interstitial ad registers impression.

addListener(eventName: 'interstitialAdImpression', listenerFunc: () => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

addListener('interstitialAdShowed', ...)

Triggers when an interstitial ad is showed.

addListener(eventName: 'interstitialAdShowed', listenerFunc: () => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Interstitial Ad Example

import { AdmobAds } from "capacitor-admob-ads";

// To load an interstital ad
AdmobAds.loadInterstitialAd({ adId: "ca-app-pub-3940256099942544/1033173712", isTesting: true }).then(() => {
   console.log('Interstitial Ad Loaded');
}).catch(err => {
   console.log(err.message);
});

// To show an already loaded interstitial ad
AdmobAds.showInterstitialAd().then(() => {
   console.log('Interstitial Ad Shown');
}).catch(err => {
   console.log(err.message);
});

// Event listeners
AdmobAds.addListener("interstitialAdClicked", () => {
   console.log('Interstitial Ad Clicked');
});

AdmobAds.addListener("interstitialAdDismissed", () => {
   console.log('Interstitial Ad Dismissed');
});

AdmobAds.addListener("interstitialAdFailedToShow", () => {
   console.log('Interstitial Ad Failed To Show');
});

AdmobAds.addListener("interstitialAdImpression", () => {
   console.log('Interstitial Ad Impression');
});

AdmobAds.addListener("interstitialAdShowed", () => {
   console.log('Interstitial Ad Showed');
});

Rewarded Interstitial Ad

API to display rewarded interstitial ads in your apps.

• loadRewardedInterstitialAd(...)
• showRewardedInterstitialAd()
• addListener('rewardedInterstitialAdShowed', ...)
• addListener('rewardedInterstitialAdFailedToShow', ...)
• addListener('rewardedInterstitialAdDismissed', ...)
• addListener('rewardedInterstitialAdClicked', ...)
• addListener('rewardedInterstitialAdImpression', ...)
• addListener('rewardedInterstitialAdOnRewarded', ...)
• Rewarded Interstitial Ad Example

loadRewardedInterstitialAd(...)

To load a rewarded interstitial ad call this method with the below options (You have to load an ad before showing it).

loadRewardedInterstitialAd(options: RewaredInterstitialAdOptions) => Promise<void>

RewaredInterstitialAdOptions

showRewardedInterstitialAd()

To show an already loaded rewarded interstitial ad use this method.

showRewardedInterstitialAd() => Promise<void>

addListener('rewardedInterstitialAdShowed', ...)

Triggers when a rewarded interstitial ad is showed.

addListener(eventName: 'rewardedInterstitialAdShowed', listenerFunc: () => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

addListener('rewardedInterstitialAdFailedToShow', ...)

Triggers when a rewarded interstitial ad is fail to show.

addListener(eventName: 'rewardedInterstitialAdFailedToShow', listenerFunc: (error: { message: string; }) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

addListener('rewardedInterstitialAdDismissed', ...)

Triggers when a rewarded interstitial ad is dismissed.

addListener(eventName: 'rewardedInterstitialAdDismissed', listenerFunc: () => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

addListener('rewardedInterstitialAdClicked', ...)

Triggers when a rewarded interstitial ad is clicked.

addListener(eventName: 'rewardedInterstitialAdClicked', listenerFunc: () => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

addListener('rewardedInterstitialAdImpression', ...)

Triggers when a rewarded interstitial ad registers impression.

addListener(eventName: 'rewardedInterstitialAdImpression', listenerFunc: () => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

addListener('rewardedInterstitialAdOnRewarded', ...)

Triggers when a rewarded interstitial ad is rewarded.

addListener(eventName: 'rewardedInterstitialAdOnRewarded', listenerFunc: () => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Rewarded Interstitial Ad Example

import { AdmobAds } from "capacitor-admob-ads";

// To load a rewarded interstitial ad
AdmobAds.loadRewardedInterstitialAd({ adId: "ca-app-pub-3940256099942544/5354046379", isTesting: true }).then(() => {
   console.log('Rewarded Interstitial Ad Loaded');
}).catch(err => {
   console.log(err.message);
});

// To show an already loaded rewarded interstitial ad
AdmobAds.showRewardedInterstitialAd().then(() => {
   console.log('Rewarded Interstitial Ad Shown');
}).catch(err => {
   console.log(err.message);
});

// Event listeners
AdmobAds.addListener("rewardedInterstitialAdShowed", () => {
   console.log('Rewarded Interstitial Ad Showed');
});

AdmobAds.addListener("rewardedInterstitialAdFailedToShow", () => {
   console.log('Rewarded Interstitial Ad Fail To Show');
});

AdmobAds.addListener("rewardedInterstitialAdDismissed", () => {
   console.log('Rewarded Interstitial Ad Dismissed');
});

AdmobAds.addListener("rewardedInterstitialAdClicked", () => {
   console.log('Rewarded Interstitial Ad Clicked');
});

AdmobAds.addListener("rewardedInterstitialAdImpression", () => {
   console.log('Rewarded Interstitial Ad Impression');
});

AdmobAds.addListener("rewardedInterstitialAdOnRewarded", () => {
   console.log('Rewarded Interstitial Ad Rewarded');
});

Rewarded Video Ad

API to display rewarded Video ads in your apps.

• loadRewardedVideoAd(...)
• showRewardedVideoAd()
• addListener('rewardedVideoAdShowed', ...)
• addListener('rewardedVideoAdFailedToShow', ...)
• addListener('rewardedVideoAdDismissed', ...)
• addListener('rewardedVideoAdClicked', ...)
• addListener('rewardedVideoAdImpression', ...)
• addListener('rewardedVideoAdOnRewarded', ...)
• Rewarded Video Ad Example

loadRewardedVideoAd(...)

To load a rewarded video ad call this method with the below options (You have to load an ad before showing it).

loadRewardedVideoAd(options: RewaredVideoAdOptions) => Promise<void>

RewaredVideoAdOptions

showRewardedVideoAd()

To show an already loaded rewarded video ad use this method.

showRewardedVideoAd() => Promise<void>

addListener('rewardedVideoAdShowed', ...)

Triggers when a rewarded video ad is showed.

addListener(eventName: 'rewardedVideoAdShowed', listenerFunc: () => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

addListener('rewardedVideoAdFailedToShow', ...)

Triggers when a rewarded video ad is fail to show.

addListener(eventName: 'rewardedVideoAdFailedToShow', listenerFunc: (error: { message: string; }) => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

addListener('rewardedVideoAdDismissed', ...)

Triggers when a rewarded video ad is dismissed.

addListener(eventName: 'rewardedVideoAdDismissed', listenerFunc: () => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

addListener('rewardedVideoAdClicked', ...)

Triggers when a rewarded video ad is clicked.

addListener(eventName: 'rewardedVideoAdClicked', listenerFunc: () => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

addListener('rewardedVideoAdImpression', ...)

Triggers when a rewarded video ad registers impression.

addListener(eventName: 'rewardedVideoAdImpression', listenerFunc: () => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

addListener('rewardedVideoAdOnRewarded', ...)

Triggers when a rewarded video ad is rewarded.

addListener(eventName: 'rewardedVideoAdOnRewarded', listenerFunc: () => void) => Promise<PluginListenerHandle> & PluginListenerHandle

Returns: Promise<PluginListenerHandle> & PluginListenerHandle

Rewarded Video Ad Example

import { AdmobAds } from "capacitor-admob-ads";

// To load a rewarded video ad
AdmobAds.loadRewardedVideoAd({ adId: "ca-app-pub-3940256099942544/5224354917", isTesting: true }).then(() => {
   console.log('Rewarded Video Ad Loaded');
}).catch(err => {
   console.log(err.message);
});

// To show an already loaded rewarded video ad
AdmobAds.showRewardedVideoAd().then(() => {
   console.log('Rewarded Video Ad Shown');
}).catch(err => {
   console.log(err.message);
});

// Event listeners
AdmobAds.addListener("rewardedVideoAdShowed", () => {
   console.log('Rewarded Video Ad Showed');
});

AdmobAds.addListener("rewardedVideoAdFailedToShow", () => {
   console.log('Rewarded Video Ad Fail To Show');
});

AdmobAds.addListener("rewardedVideoAdDismissed", () => {
   console.log('Rewarded Video Ad Dismissed');
});

AdmobAds.addListener("rewardedVideoAdClicked", () => {
   console.log('Rewarded Video Ad Clicked');
});

AdmobAds.addListener("rewardedVideoAdImpression", () => {
   console.log('Rewarded Video Ad Impression');
});

AdmobAds.addListener("rewardedVideoAdOnRewarded", () => {
   console.log('Rewarded Video Ad Rewarded');
});

Native Ad

API to display admob native ads in your apps.

• loadNativeAd(...)
• triggerNativeAd(...)
• Native Ad Example

loadNativeAd(...)

To load a native ad use this method.

loadNativeAd(options: NativeAdOptions) => Promise<{ ads: AdResult[]; }>

NativeAdOptions

Returns: Promise<{ ads: AdResult[]; }>

AdResult

triggerNativeAd(...)

To trigger (open) a native ad use this method

triggerNativeAd(options: NativeAdTriggerOptions) => void

NativeAdTriggerOptions

Native Ad Example

import { AdmobAds } from "capacitor-admob-ads";

ads:Array<any> = [];

// To load native ads
AdmobAds.loadNativeAd({ adId: "ca-app-pub-3940256099942544/2247696110", isTesting: true, adsCount: 3 }).then((res) => {
   this.ads = res.ads;

   this.ads.forEach(ad => {
      console.log(ad['id']); 
      console.log(ad['headline']);
      console.log(ad['body']);
      console.log(ad['icon']);
      console.log(ad['cover']);
      console.log(ad['advertiser']);
      console.log(ad['cta']); 
      console.log(ad['adChoicesUrl']);
   });
}).catch((error) => {
   consol.log(error.message);
});

// To open a native ad
viewAd(id) {
   AdmobAds.triggerNativeAd({ id: id }); 
}

// To open AdChoices url
openAdchoices(url) {
   window.open(url);
}

<ion-card *ngFor="let ad of ads">
  <ion-card-header mode="md">
    <ion-item lines="none">
      <ion-avatar slot="start">
        <ion-img src="{{ad.icon}}" crossorigin="Anonymous">
        </ion-img>
      </ion-avatar>
      <ion-label>
        <h2>{{ad.headline}}
        </h2>
        <p>
          {{ad.advertiser}}
        </p>
      </ion-label>
      <ion-icon slot="end" src="/assets/icon/adchoices.svg" (click)="openAdchoices(ad.adChoicesUrl)">
      </ion-icon>
    </ion-item>
  </ion-card-header>

  <ion-card-content mode="md">
    <p class="ion-text-wrap">
      {{ad.body}}
    </p>

    <ion-img src="{{ad.cover}}" crossorigin="anonymous"></ion-img>

    <ion-chip (click)="viewAd(ad.id)" slot="end">
      <ion-label> {{ad.cta}} </ion-label>
    </ion-chip>
  </ion-card-content>
</ion-card>

Remove Listeners

To remove subscribed listeners use this method

• removeAllListeners()

removeAllListeners()

removeAllListeners() => Promise<void>

Example

import { AdmobAds } from "capacitor-admob-ads";

// To remove specifi listener
let rewardListener = AdmobAds.addListener("rewardedInterstitialAdOnRewarded", () => {
   console.log('Rewarded Interstitial Ad Rewarded');
});

rewardListener.remove();

// To remove all listeners
AdmobAds.removeAllListeners();