アダプティブ バナーは次世代のレスポンシブ広告であり、デバイスごとに広告サイズを最適化してパフォーマンスを最大化します。アダプティブ バナーでは、高さが固定されたもののみをサポートしていたスマートバナーを改良しました。アダプティブ バナーでは、広告の幅を指定して、それを基に最適な広告サイズを決定できます。
最適な広告サイズを選択するために、アダプティブ バナーでは、高さが固定されているのではなく、固定のアスペクト比が使用されます。その結果、バナー広告は、デバイスの種類を問わず常に画面上でより広い範囲を占めるようになり、パフォーマンスの向上につながります。
アダプティブ バナーを使用する場合、特定のデバイスと幅では、常に一定のサイズが返されます。特定のデバイスでレイアウトをテストしたら、広告サイズは変わらないことを確認します。ただし、バナー クリエイティブのサイズはデバイスによって異なる場合があります。そのため、広告の高さのばらつきに対応するレイアウトをおすすめします。ごくまれに、アダプティブ サイズがフルに埋められず、標準サイズのクリエイティブがこのスロットの中央に配置されることがあります。
前提条件
- スタートガイドの手順に沿って、Mobile Ads Flutter プラグインをインポートします。
アダプティブ バナーの用途
アダプティブ バナーは、業界標準の 320×50 のバナーサイズと、後継となるスマートバナー フォーマットの差し替えとしてご利用いただけます。
これらのバナーサイズはアンカーバナーとして使用され、通常は画面の上部または下部に固定されます。
アダプティブ バナーを使用した場合のアスペクト比は、標準の 320×50 の広告とほぼ同じになります。下の 3 つの例をご覧ください。
320×50 バナー |
アダプティブ バナー |
スマートバナー |
アダプティブ バナーでは、使用可能な画面サイズを有効活用できます。また、次のような理由から、スマートバナーと比べるとアダプティブ バナーのほうが適しています。
幅を強制的に全画面表示にするのではなく、指定した任意の幅が使用されるため、iOS ではセーフエリア、Android ではディスプレイ カットアウトに対応できます。
さまざまなサイズのデバイスに対して一定の高さではなく、特定のデバイスに最適な高さを選択することで、デバイスの断片化の影響を軽減します。
実装上の注意
アプリにアダプティブ バナーを実装する際は、以下の点にご注意ください。
- 広告が配置されるビューの幅を把握している必要があります。また、デバイスの幅と、適用されるセーフエリアやカットアウトも考慮する必要があります。
- 小さいサイズの広告が広告スロットには表示されない場合、AdMob のポリシーに準拠するように、広告ビューの背景が不透明であるようにします。
- Google Mobile Ads Flutter プラグインの最新バージョンを使用していることを確認します。
- アダプティブ バナーのサイズは、利用可能な全幅を使用した場合に最大限に効果を発揮するように設計されています。ほとんどの場合、使用するデバイスの画面の全幅になります。適切な安全領域を考慮してください。
- Google Mobile Ads SDK では、アダプティブ AdSize API を使用している場合、指定された幅に対して最適化された広告の高さでバナーのサイズが変更されます。
- アダプティブ バナーの広告サイズを取得するメソッドは 2 つあります。特定の向きをリクエストする
AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width)
と、実行時に現在の向きをリクエストするAdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)
です。 - 各デバイスで特定の幅に対して返されるサイズは常に同じであるため、1 つのデバイスでレイアウトをテストすると、広告サイズは変わらないことを確認できます。
- アンカーバナーの高さは、デバイスの高さの 15% 以下、または密度非依存ピクセル 90 未満、または密度非依存ピクセル 50 以上である必要があります。
クイックスタート
シンプルなアンカー アダプティブ バナーを実装する手順は次のとおりです。
- アダプティブ バナー広告のサイズを取得します。取得したサイズはアダプティブ バナーのリクエストに使用されます。アダプティブ広告のサイズを取得する手順は次のとおりです。
- 使用するデバイスの幅を密度非依存ピクセルから取得するか、画面の全幅を使用しない場合は独自の幅を設定します。
MediaQuery.of(context)
を使用すると画面の幅を取得できます。 - 現在の向きに対応するアダプティブな
AdSize
オブジェクトを取得するには、広告サイズクラスの適切な静的メソッド(AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)
など)を使用します。
- 使用するデバイスの幅を密度非依存ピクセルから取得するか、画面の全幅を使用しない場合は独自の幅を設定します。
- 広告ユニット ID、アダプティブ広告サイズ、広告リクエスト オブジェクトを指定して
BannerAd
オブジェクトを作成します。 - 通常のバナー広告と同じように広告を読み込み、通常の広告ビューと同じように
AdWidget
から表示します。
サンプルコード
以下は、画面の幅に合わせてアンカー アダプティブ バナーを読み込むウィジェットの例です。
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
/// This example demonstrates anchored adaptive banner ads.
class AnchoredAdaptiveExample extends StatefulWidget {
@override
_AnchoredAdaptiveExampleState createState() =>
_AnchoredAdaptiveExampleState();
}
class _AnchoredAdaptiveExampleState extends State<AnchoredAdaptiveExample> {
BannerAd? _anchoredAdaptiveAd;
bool _isLoaded = false;
@override
void didChangeDependencies() {
super.didChangeDependencies();
_loadAd();
}
Future<void> _loadAd() async {
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final AnchoredAdaptiveBannerAdSize? size =
await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.of(context).size.width.truncate());
if (size == null) {
print('Unable to get height of anchored banner.');
return;
}
_anchoredAdaptiveAd = BannerAd(
// TODO: replace these test ad units with your own ad unit.
adUnitId: Platform.isAndroid
? 'ca-app-pub-3940256099942544/6300978111'
: 'ca-app-pub-3940256099942544/2934735716',
size: size,
request: AdRequest(),
listener: BannerAdListener(
onAdLoaded: (Ad ad) {
print('$ad loaded: ${ad.responseInfo}');
setState(() {
// When the ad is loaded, get the ad size and use it to set
// the height of the ad container.
_anchoredAdaptiveAd = ad as BannerAd;
_isLoaded = true;
});
},
onAdFailedToLoad: (Ad ad, LoadAdError error) {
print('Anchored adaptive banner failedToLoad: $error');
ad.dispose();
},
),
);
return _anchoredAdaptiveAd!.load();
}
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text('Anchored adaptive banner example'),
),
body: Center(
child: Stack(
alignment: AlignmentDirectional.bottomCenter,
children: <Widget>[
ListView.separated(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
itemBuilder: (context, index) {
return Text(
'Placeholder text',
style: TextStyle(fontSize: 24),
);
},
separatorBuilder: (context, index) {
return Container(height: 40);
},
itemCount: 20),
if (_anchoredAdaptiveAd != null && _isLoaded)
Container(
color: Colors.green,
width: _anchoredAdaptiveAd!.size.width.toDouble(),
height: _anchoredAdaptiveAd!.size.height.toDouble(),
child: AdWidget(ad: _anchoredAdaptiveAd!),
)
],
),
),
);
@override
void dispose() {
super.dispose();
_anchoredAdaptiveAd?.dispose();
}
}
ここでは、関数 AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize
を使用して、現在のインターフェースの向きで固定された位置に表示されるバナーのサイズを取得しています。特定の向きのアンカーバナーをプリロードするには、AdSize.getAnchoredAdaptiveBannerAdSize(Orientation orientation, int width)
を使用して目的の向きを渡します。
GitHub 上のサンプル全体
サンプル全体を確認するには、GitHub リポジトリのバナーの例をご覧ください。