プロダクトに関するご意見やフィードバックをお寄せいただくには、Google 広告および測定のコミュニティサーバーの公式アドマネージャー Discord チャンネルにご参加ください。

バナー

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

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

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

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

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

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

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

/21775744923/example/adaptive-banner

テスト広告ユニットは、すべてのリクエストに対してテスト広告を返すように設定されており、アプリのコーディング、テスト、デバッグで使用することができます。なお、この広告ユニットの 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

バナー広告イベント

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

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 では、アドマネージャーの管理画面で指定した更新頻度が使用されます。更新を有効にしていない場合は、新しいリクエストを発行します。更新頻度の設定など、広告ユニットの更新について詳しくは、モバイルアプリでの広告の更新頻度をご覧ください。

バナー広告を表示する

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

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

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

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

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

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

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

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

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

折りたたみ可能バナー

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