バナー

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

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

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

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

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

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

広告をインスタンス化する

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

final BannerAd myBanner = BannerAd(
  adUnitId: '<ad unit ID>',
  size: AdSize.banner,
  request: AdRequest(),
  listener: BannerAdListener(),
);

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

サイズ(単位は dp、幅×高さ) 説明 AdSize の定数値
320×50 標準のバナー banner
320×100 バナー(大) largeBanner
320×250 レクタングル(中) mediumRectangle
468×60 フルサイズのバナー fullBanner
728×90 ビッグバナー leaderboard
画面の幅×32|50|90 スマートバナー getSmartBanner(Orientation) を使用

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

final AdSize adSize = AdSize(300, 50);

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

final BannerAdListener listener = BannerAdListener(
 // Called when an ad is successfully received.
 onAdLoaded: (Ad ad) => print('Ad loaded.'),
 // Called when an ad request failed.
 onAdFailedToLoad: (Ad ad, LoadAdError error) {
   // Dispose the ad here to free resources.
   ad.dispose();
   print('Ad failed to load: $error');
 },
 // Called when an ad opens an overlay that covers the screen.
 onAdOpened: (Ad ad) => print('Ad opened.'),
 // Called when an ad removes an overlay that covers the screen.
 onAdClosed: (Ad ad) => print('Ad closed.'),
 // Called when an impression occurs on the ad.
 onAdImpression: (Ad ad) => print('Ad impression.'),
);

広告を読み込む

BannerAd がインスタンス化された後、画面に表示される前に load() を呼び出す必要があります。

myBanner.load();

広告を表示する

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

final AdWidget adWidget = AdWidget(ad: myBanner);

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

final Container adContainer = Container(
  alignment: Alignment.center,
  child: adWidget,
  width: myBanner.size.width.toDouble(),
  height: myBanner.size.height.toDouble(),
);

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

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