Skip to content
rdlabo.devdocs
日本語

Banner Ads

Banner ads are rectangular ads that occupy a portion of an app's layout. They can stay on screen while the user interacts with the app, typically anchored at the top or bottom. Google's banner guides for Android and iOS explain the format.

Call this after initialize and consent. This plugin draws the banner on the native screen (above the web view). Register listeners before calling showBanner so the first load and size events are not missed.

import {
  AdMob,
  AdMobBannerSize,
  AdMobRevenueData,
  BannerAdOptions,
  BannerAdPluginEvents,
  BannerAdPosition,
  BannerAdSize,
} from '@capacitor-community/admob';

const handles = await Promise.all([
  AdMob.addListener(BannerAdPluginEvents.Loaded, () => {
    console.log('Banner loaded');
  }),
  AdMob.addListener(BannerAdPluginEvents.SizeChanged, (size: AdMobBannerSize) => {
    console.log('Banner size', size.width, size.height);
    // Inset your layout by size.height; see the next section.
  }),
  AdMob.addListener(BannerAdPluginEvents.FailedToLoad, (error) => {
    console.error(error);
  }),
  AdMob.addListener(BannerAdPluginEvents.AdPaid, (data: AdMobRevenueData) => {
    // Forward impression-level revenue to your analytics provider.
    console.log(data);
  }),
]);

const options: BannerAdOptions = {
  adId: 'YOUR_AD_UNIT_ID',
  adSize: BannerAdSize.ADAPTIVE_BANNER,
  position: BannerAdPosition.BOTTOM_CENTER,
  margin: 0,
  // isTesting: true,
  // npa: true,
};
await AdMob.showBanner(options);

method showBanner(...)

Displays a banner ad.

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

interface BannerAdOptions

Options for displaying a banner ad.

This interface extends AdOptions.

Prop Type Description Default Since
adSize BannerAdSize The banner size to display. ADAPTIVE_BANNER 3.0.0
position BannerAdPosition The position where the banner is displayed. TOP_CENTER 1.1.2
adId string The ad unit ID to load. 1.1.2
isTesting boolean Whether to request a test ad. false 1.1.2
margin number The banner margin in logical display units (dp on Android and points on iOS). For BOTTOM_CENTER, this is the bottom margin. For TOP_CENTER, this is the top margin. 0 1.1.2
npa boolean Whether to request non-personalized ads. false 1.2.0
immersiveMode boolean Whether to display a full-screen ad in immersive mode on Android. 7.0.3

enum BannerAdSize

Member Value Description
BANNER 'BANNER' Mobile Marketing Association (MMA) banner ad size (320x50 density-independent pixels).
FULL_BANNER 'FULL_BANNER' Interactive Advertising Bureau (IAB) full banner ad size (468x60 density-independent pixels).
LARGE_BANNER 'LARGE_BANNER' Large banner ad size (320x100 density-independent pixels).
MEDIUM_RECTANGLE 'MEDIUM_RECTANGLE' Interactive Advertising Bureau (IAB) medium rectangle ad size (300x250 density-independent pixels).
LEADERBOARD 'LEADERBOARD' Interactive Advertising Bureau (IAB) leaderboard ad size (728x90 density-independent pixels).
ADAPTIVE_BANNER 'ADAPTIVE_BANNER' A dynamically sized banner that is full-width and auto-height.
SMART_BANNER 'SMART_BANNER' A legacy smart banner sized to the screen width. Retained for compatibility; use ADAPTIVE_BANNER for new integrations.

enum BannerAdPosition

Member Value Description
TOP_CENTER 'TOP_CENTER' Positions the banner at the top center of the screen.
CENTER 'CENTER' Positions the banner at the center of the screen.
BOTTOM_CENTER 'BOTTOM_CENTER' Positions the banner at the bottom center of the screen.

Keep content out from under the banner

The banner is drawn on the native screen above the WebView. HTML layout does not move on its own. Inset your own root by size.height (logical pixels). Use padding or margin on the bottom for BOTTOM_CENTER, and on the top for TOP_CENTER.

<main id="content">Your app</main>

import { AdMob, BannerAdPluginEvents } from '@capacitor-community/admob';

const content = document.getElementById('content');

await AdMob.addListener(BannerAdPluginEvents.SizeChanged, (size) => {
  if (!content) {
    return;
  }
  content.style.paddingBottom = size.height > 0 ? `${size.height}px` : '';
});

When the height is 0 (hidden, removed, or failed), clear the inset. Apply the same idea to whatever element fills the WebView in your framework.

See Testing for isTesting.

Lifecycle

  • hideBanner() temporarily hides the current banner.
  • resumeBanner() shows a hidden banner again.
  • removeBanner() destroys it. Call showBanner() to create another one.

method hideBanner()

Hides the current banner without destroying it.

hideBanner() => Promise<void>

method resumeBanner()

Shows a previously hidden banner.

resumeBanner() => Promise<void>

method removeBanner()

Destroys the current banner and removes it from the screen.

removeBanner() => Promise<void>

Release listener handles when the owning screen is destroyed:

for (const handle of handles) {
  await handle.remove();
}
await AdMob.removeBanner();

Banner impression-level revenue is emitted on BannerAdPluginEvents.AdPaid. Full-screen formats emit the same AdMobRevenueData through their AdImpression event. See Ad Events.

Edit this page on GitHub