バナー広告は、アプリ レイアウト内のデバイス画面の上部または下部に表示されます。ユーザーがアプリを操作している間は画面に表示され続けますが、一定時間が経過すると自動的に更新されるよう設定できます。
このガイドでは、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（幅 x 高さ） | 説明 | AdSize 定数 |
|---|---|---|
| 320×50 | 標準バナー | banner
|
| 320×100 | バナー（大） | largeBanner
|
| 320×250 | レクタングル（中） | mediumRectangle
|
| 468×60 | フルサイズ バナー | fullBanner
|
| 728x90 | リーダーボード | 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 をウィジェットとして表示するには、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 レベルで最適なパフォーマンスで使用できます。