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

バナー

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

このガイドでは、AdMob のバナー広告を Flutter アプリです。コードスニペットと手順のほか、バナーのサイズに関する適切な情報を提供します

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

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

テスト広告を読み込むには、専用のテスト広告ユニット ID を使用すると、バナー:

Android

ca-app-pub-3940256099942544/6300978111

iOS

ca-app-pub-3940256099942544/2934735716

テスト広告ユニットは、すべてのリクエストに対してテスト広告を返すように設定されている。独自のアプリでコーディング、テスト、デバッグを行う際に、自由に使用できます。必ずご自身の広告ユニット ID に置き換えてください。。

広告を読み込む

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

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/6300978111'
    : 'ca-app-pub-3940256099942544/2934735716';

  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: AdSize.banner,
      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();
  }
}

バナーのサイズ

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

サイズ（単位は dp、幅×高さ）	説明	AdSize 定数
320×50	標準バナー	`banner`
320×100	バナー（大）	`largeBanner`
320×250	レクタングル（中）	`mediumRectangle`
468×60	フルサイズバナー	`fullBanner`
728×90	ビッグバナー	`leaderboard`
指定された幅 x 最適な高さ	アダプティブバナー	なし

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

final AdSize adSize = AdSize(300, 50);

バナー広告イベント

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/6300978111'
    : 'ca-app-pub-3940256099942544/2934735716';


  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: AdSize.banner,
      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();
  }
}

バナー広告を表示する

BannerAd をウィジェットとして表示するには、AdWidget をインスタンス化する必要があります。 load() を呼び出した後に、サポートされている広告とともに配信される。ウィジェットは作成する前に 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 以前でのスクロールの制限

Google は、Android 9 またはそれ以前を搭載したデバイスの一部、または性能が劣るデバイスを認識しています。最適なパフォーマンスを達成できない可能性があるスクロールビュー内にインラインバナー広告を表示する場合。このようなタイプのバナーは、Android 10 以降でのみ使用することをおすすめします。固定位置のバナーはアンカーバナーは影響を受けないため、最適なパフォーマンスでサポートしています。

GitHub 上のサンプル全体

バナー