AdMob のプロダクトに関して意見交換やフィードバックを行うには、広告と測定に関する Google コミュニティサーバーの公式 AdMob Discord チャネルにご参加ください。

バナー

プラットフォームを選択: Android iOS Unity Flutter

バナー広告は、デバイス画面の上部か下部にアプリのレイアウト内の一部分を使用して表示されます。アプリの操作中は画面に表示され続けますが、一定時間が経過すると自動的に更新されるよう設定できます。

このガイドでは、アンカーアダプティブバナー広告の利用を開始する方法について説明します。アンカーアダプティブバナーでは、指定した広告の幅を使用して、デバイスごとに広告のサイズが最適化されます。

アンカーアダプティブバナー広告は、固定サイズの広告ではなく、アスペクト比が固定された広告です。アスペクト比は 320×50 に似た値で、利用できるスペースの全幅を指定すると、Google Mobile Ads SDK でその幅に最適な高さの広告が返されます。広告の最適な高さは、異なる広告リクエスト間で一定に保たれます。広告が更新されても、広告の周囲のコンテンツはそのままの位置に留まります。

常にテスト広告でテストする

アプリの開発とテストでは必ずテスト広告を使用し、配信中の実際の広告は使用しないでください。実際の広告でテストすると、アカウントが停止される場合があります。

テスト広告は、次に示すバナー広告向けのテスト専用広告ユニット ID を使うと簡単に読み込むことができます。

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

テスト広告ユニットはすべてのリクエストに対してテスト広告を返す特別な広告ユニットで、アプリのコーディング、テスト、デバッグで自由に使うことができます。なお、この広告ユニットの ID は、アプリを公開する前に必ずご自身の広告ユニット ID に置き換えてください。

広告サイズを取得する

正しい広告サイズのバナー広告をリクエストする手順は次のとおりです。

MediaQuery.of(context) を使って、デバイスの画面の幅を密度非依存ピクセル（dp）で取得します。全画面幅を使用しない場合は、任意の幅を設定できます。
AdSize クラスで該当の静的メソッドを使って、AdSize オブジェクトを取得します。たとえば、AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width) を使って、現在の画面の向きの広告サイズを取得します。

// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
  MediaQuery.sizeOf(context).width.truncate(),
);main.dart

広告を読み込む

次のサンプルでは、バナー広告を読み込んでいます。

void _loadAd() async {
  // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
  final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
    MediaQuery.sizeOf(context).width.truncate(),
  );

  if (size == null) {
    // Unable to get width of anchored banner.
    return;
  }

  BannerAd(
    adUnitId: _adUnitId,
    request: const AdRequest(),
    size: size,
    listener: BannerAdListener(
      onAdLoaded: (ad) {
        // Called when an ad is successfully received.
        debugPrint("Ad was loaded.");
        setState(() {
          _bannerAd = ad as BannerAd;
        });
      },
      onAdFailedToLoad: (ad, err) {
        // Called when an ad request failed.
        debugPrint("Ad failed to load with error: $err");
        ad.dispose();
      },
    ),
  ).load();
}main.dart

バナー広告イベント

BannerAdListener を使用すると、広告が読み込まれたときなどのライフサイクルイベントをリッスンできます。各メソッドを実装してメッセージのログをコンソールに記録する場合のサンプルを、次に示します。

onAdOpened: (Ad ad) {
  // Called when an ad opens an overlay that covers the screen.
  debugPrint("Ad was opened.");
},
onAdClosed: (Ad ad) {
  // Called when an ad removes an overlay that covers the screen.
  debugPrint("Ad was closed.");
},
onAdImpression: (Ad ad) {
  // Called when an impression occurs on the ad.
  debugPrint("Ad recorded an impression.");
},
onAdClicked: (Ad ad) {
  // Called when an a click event occurs on the ad.
  debugPrint("Ad was clicked.");
},
onAdWillDismissScreen: (Ad ad) {
  // iOS only. Called before dismissing a full screen view.
  debugPrint("Ad will be dismissed.");
},main.dart

広告を更新する

広告ユニットの更新を有効にしていれば、広告の読み込みに失敗しても、別の広告をリクエストする必要はありません。Google Mobile Ads SDK では、AdMob の管理画面で指定した更新頻度が使用されます。更新を有効にしていない場合は、新しいリクエストを発行します。更新頻度の設定など、広告ユニットの更新について詳しくは、バナー広告の自動更新を使用するをご覧ください。

バナー広告を表示する

BannerAd をウィジェットとして表示するには、load() を呼び出した後に、サポートされている広告で AdWidget をインスタンス化する必要があります。ウィジェットは load() を呼び出す前に作成できますが、ウィジェットツリーに追加する前に load() を呼び出す必要があります。

AdWidget は Flutter のウィジェットクラスから継承され、他のウィジェットと同様に使用できます。iOS では、指定した幅と高さのウィジェットにウィジェットを配置するようにしてください。そうしないと、広告が表示されない可能性があります。BannerAd は、広告に一致するサイズのコンテナに配置できます。

if (_bannerAd != null)
  Align(
    alignment: Alignment.bottomCenter,
    child: SafeArea(
      child: SizedBox(
        width: _bannerAd!.size.width.toDouble(),
        height: _bannerAd!.size.height.toDouble(),
        child: AdWidget(ad: _bannerAd!),
      ),
    ),
  ),main.dart

アクセスが不要になった広告は破棄する必要があります。dispose() を呼び出すおすすめのタイミングは、AdWidget がウィジェットツリーから削除された後、または BannerAdListener.onAdFailedToLoad() コールバック時です。

このガイドの説明は以上です。これで、アプリにバナー広告を表示できるようになりました。

Android 9 以前のスクロールの制限

Android 9 以前を搭載した古いデバイスや性能の低いデバイスでは、スクロールビュー内にインラインバナー広告を表示すると、最適なパフォーマンスが得られなくなる可能性があります。これらのタイプのバナーは、Android 10 以降でのみ使用することをおすすめします。アンカーバナーなどの位置が固定されたバナーは影響を受けず、すべての Android API レベルで使用時に最適なパフォーマンスを得ることができます。

GitHub のサンプルコードの全文

このページで説明するバナー統合例の全文については、banner_example をご覧ください。

他のバナータイプについて

以下のセクションで説明する、Flutter アプリケーションに対応した他の種類のバナーについてもご確認ください。

インラインアダプティブバナー

インラインアダプティブバナーは、アンカーアダプティブバナーよりサイズと高さが大きく、サイズが固定されていないバナーです。スクロール可能なコンテンツにバナー広告を配置するアプリでは、アンカーアダプティブバナー広告よりもインラインアダプティブバナーの使用をおすすめします。詳しくは、インラインアダプティブバナーをご覧ください。

折りたたみ可能バナー

折りたたみ可能バナー広告は、最初は大きなオーバーレイとして表示され、小さいサイズに折りたたむためのボタンが付いたバナー広告です。パフォーマンスをさらに最適化するには、このバナーの使用をご検討ください。詳しくは、折りたたみ可能バナー広告をご覧ください。