バナー

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

このガイドでは、AdMob のバナー広告を Flutter アプリに組み込む方法について説明します。コード スニペットと設定手順のほか、バナーの適切なサイズに関する情報も紹介します。

テストは必ずテスト広告で行う

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

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

  • /6499/example/banner

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

広告を読み込む

次の例では、バナー広告をインスタンス化しています。

class BannerExampleState extends State<BannerExample> {
  AdManagerBannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/6499/example/banner';

  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: AdSize.banner,
      listener: AdManagerBannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('AdManagerBannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
      ),
    )..load();
  }
}

標準のバナーサイズについては、以下の表をご覧ください。

サイズ（単位は dp、幅×高さ） 説明 AdSize の定数値
320x50 標準バナー banner
320x100 バナー（大） largeBanner
320x250 レクタングル（中） mediumRectangle
468x60 フルサイズ バナー fullBanner
728x90 リーダーボード leaderboard
指定された幅 × 最適な高さ アダプティブ バナー なし

カスタムのバナーサイズを定義するには、希望する AdSize を設定します。

final AdSize adSize = AdSize(300, 50);

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

class BannerExampleState extends State<BannerExample> {
  AdManagerBannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/6499/example/banner';


  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: AdSize.banner,
      listener: AdManagerBannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('AdManagerBannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
        // Called when an ad opens an overlay that covers the screen.
        onAdOpened: (Ad ad) {},
        // Called when an ad removes an overlay that covers the screen.
        onAdClosed: (Ad ad) {},
        // Called when an impression occurs on the ad.
        onAdImpression: (Ad ad) {},
      ),
    )..load();
  }
}

バナー広告を表示する

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

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

...
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!),
      ),
    ),
  )
}
...

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

これで完了です。これで、アプリにバナー広告を表示できるようになりました。

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

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