本文へ移動
rdlabo.devdocs
English

バナー広告

バナー広告はアプリ画面の一部を占める長方形の広告です。ユーザーがアプリを操作しているあいだも画面に残せます。通常は上下に固定します。形式の説明は Google のバナー広告ガイド（Android / iOS）を見てください。

初期化 と 同意 のあとで呼び出します。このプラグインでは WebView の上にあるネイティブ画面に描画します。最初のロードとサイズ変更を取りこぼさないよう、showBanner より前にリスナーを登録します。

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.

バナーとコンテンツを重ねない

バナーは WebView の上のネイティブ画面に描画されます。HTML 側のレイアウトは自動では動きません。自分のルート要素を size.height（論理ピクセル）だけ空けます。BOTTOM_CENTER なら下、TOP_CENTER なら上に padding または margin を付けます。

<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` : '';
});

非表示・削除・ロード失敗では高さが 0 になることがあるので、そのときは inset を消します。フレームワークでは、WebView を埋めている要素に同じ考え方を適用します。

isTesting は テスト を参照してください。

ライフサイクル

  • hideBanner() は現在のバナーを一時的に隠します。
  • resumeBanner() は隠したバナーを再表示します。
  • removeBanner() はバナーを破棄します。作り直すときは showBanner() を呼びます。

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>

画面を破棄するときはリスナーとバナーを解放します。

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

バナーのインプレッション単位の売上は BannerAdPluginEvents.AdPaid で通知されます。フルスクリーン形式は同じ AdMobRevenueData を AdImpression で出します。広告イベント を参照してください。

GitHubでこのページを編集