バナー

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

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

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

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

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

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

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

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

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

広告サイズを取得する

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

  1. MediaQuery.of(context) を使用して、デバイスの画面の幅を密度非依存ピクセル（dp）で取得します。画面の幅全体を使用しない場合は、任意の幅を設定できます。

  2. 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 アプリケーションでよく理解しておいてください。

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

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

折りたたみ可能バナー

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