このページは Cloud Translation API によって翻訳されました。

バナー

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

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

アンカーアダプティブバナー広告は、固定サイズの広告ではなく、固定アスペクト比の広告です。アスペクト比は 320x50 に近い値です。使用可能な最大幅を指定すると、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());

広告を読み込む

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

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

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';

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

    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      listener: BannerAdListener(
        // 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('BannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
      ),
    )..load();
  }
}

バナー広告イベント

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

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

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';


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

    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      listener: BannerAdListener(
        // 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('BannerAd 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();
  }
}

広告を更新する

広告ユニットの更新を有効にしていれば、広告の読み込みに失敗しても、別の広告をリクエストする必要はありません。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!),
      ),
    ),
  )
}

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

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

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

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

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

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

その他のバナータイプの詳細

このセクションで定義されている、Flutter アプリ向けの他の種類のバナーについて学びます。

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

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

折りたたみ可能バナー

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