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

Ads Configuration

This function requires an AdmobOptions object as a first parameter and returns a promise. It sets the options to start displaying ads. Although it is not required to call this method it is highly recommended. See here other ways to configure AdMob plugin.

try {
    await admob.setOptions(options);
} catch (err) {
    console.log('Error creating banner:', err);
}
  • options: setup options (see options).

Options object

The setOptions() method requires an object as parameter describing the plugin configuration options. Depending on the platform the required properties will change. This object is different depending on the platform.

Base options

The base options are common in both web and device platforms.

  • interstitialAdId: (Optional) Your interstitial ad id code from your AdMob account. Defaults to bannerAdId.
  • bannerAtTop: (Optional) Indicates whether to put banner ads at top when set to true or at bottom when set to false. Default false.
  • isTesting: (Optional) Set to true for receiving test ads (do not test with real ads as your account will be banned). Default false.
  • autoShowBanner: (Optional) Auto show banners ad when available (admob.events.onAdLoaded event is called). Default true.
  • autoShowInterstitial: (Optional) Auto show interstitials ad when available (admob.events.onAdLoaded event is called). Default true.

Device options

Options for device platforms (like Android or iOS).

  • bannerAdId: (Required) Your banner ad id code from your AdMob account. You can get it from AdMob. Set it to "NONE" (or whatever non blank) if you don't want to request AdMob ads. In previous versions of this plugin this was called 'publisherId', which is now only used for browser.
  • rewardedAdId: (Optional) Your rewarded ad id code from your AdMob account. Defaults to bannerAdId.
  • autoShowRewarded: (Optional) Auto show rewarded ads when available (onAdLoaded event is called). Defaults to true.
  • tappxIdiOS: (Optional) Your tappx id for iOS apps. You can get it from tappx. If Admob is configured, it is also used to backfill your lost inventory (when there are no Admob ads available).
  • tappxIdAndroid: (Optional) Your tappx id for Android apps. You can get it from tappx. If Admob is configured, it is also used to backfill your lost inventory (when there are no Admob ads available).
  • tappxShare: (Optional) If any of tappxId is present, it tells the percentage of traffic diverted to tappx. Defaults to 50% (0.5).
  • adSize: (Optional) Indicates the size of banner ads. Available values are (see Google Docs for more info):
    • admob.AD_SIZE.BANNER: 320x50. Standard Banner (Phones and Tablets).
    • admob.AD_SIZE.IAB_MRECT: 300x250. IAB Medium Rectangle (Phones and Tablets).
    • admob.AD_SIZE.IAB_BANNER: 468x60. IAB Full-Size Banner (Tablets).
    • admob.AD_SIZE.IAB_LEADERBOARD: 728x90. IAB Leaderboard (Tablets).
    • admob.AD_SIZE.SMART_BANNER: (See table) Smart Banner (Phones and Tablets).
  • overlap: (Optional) Allow banner overlap webview. Default false.
  • offsetStatusBar: (Optional) Set to true to avoid ios7 status bar overlap. Default false.
  • adExtras: (Options) A JSON object with additional {key: value} pairs (see Google Docs for more info).

Web options

Options for browser platform.

  • publisherId: (Required) Your publisher id code from your AdSence account. You can get it from AdSense. In previous versions this was also used in device platforms, which is deprecated.
  • adSlot: (Required) Your ad slot code from your AdSense account. You can get it from AdSense.
  • interstitialShowCloseButton: (Optional) Indicates if show a close button on interstitial browser ads. Only for browser platform
  • secondsToShowCloseButton: (Optional) Indicates the number of seconds that the interstitial ad waits before show the close button. Only for browser platform
  • secondsToCloseInterstitial: (Optional) Indicates the number of seconds that the interstitial ad waits before close the ad. Only for browser platform
  • customHTMLElement: (Optional) HTML element which will be the banner ad container

Device example

Example for device options (those are also the default options, except tappxId's, which are empty by default):

const options: IAdMobAdsOptions = {
	bannerAdId:             'ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB',   // AdMob banner ad id
    interstitialAdId:       'ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII',   // AdMob interstitial ad id
    rewardedAdId:           'ca-app-pub-XXXXXXXXXXXXXXXX/RRRRRRRRRR',   // AdMob rewarded ad id
	tappxIdiOS:             '/XXXXXXXXX/Pub-XXXX-iOS-IIII',
	tappxIdAndroid:         '/XXXXXXXXX/Pub-XXXX-Android-AAAA',
	tappxShare:             0.5,
	adSize:                 admob.AD_SIZE.SMART_BANNER,
	bannerAtTop:            false,
	overlap:                false,
	offsetStatusBar:        false,
	isTesting:              false,
	adExtras :              {},
	autoShowBanner:         true,
    autoShowInterstitial:   true,
    autoShowRewarded:       true,
}

Web browser example

Example for browser options (note that the interface used here IAdMobAdsWebOptions is different than the previous one):

const options: IAdMobAdsWebOptions = {
    publisherId:                    'ca-app-pub-XXXXXXXXXXXXXXXX'; // AdSense Publisher ID
    adSlot:                         'AAAAAAAAAA';
	interstitialAdId:               'ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII',
    bannerAtTop:                    false,
    isTesting:                      false,
    autoShowBanner:                 true,
    autoShowInterstitial:           true,
    secondsToShowCloseButton:       10,
    secondsToCloseInterstitial:     10,
    interstitialShowCloseButton:    true,
    customHTMLElement:              document.querySelector('#my-custom-container');
}

Other ways

Using either Cordova or Capacitor, you can optionally configure AdMob plugin with createBannerView(options) and requestInterstitialAd(options) methods:

const bannerOptions = {
	bannerAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB'
};

admob.createBannerView();
const interstitialOptions = {
	bannerAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/BBBBBBBBBB',
	interstitialAdId: 'ca-app-pub-XXXXXXXXXXXXXXXX/IIIIIIIIII',
	autoShowInterstitial: true
};

admob.requestInterstitialAd(interstitialOptions);