アダプティブ バナーは次世代のレスポンシブ広告で、デバイスごとに広告サイズを最適化して広告のパフォーマンスを最大限に高めます。アダプティブ バナーでは、固定の高さしかサポートされない固定サイズのバナーが改善されました。アダプティブ バナーでは、デベロッパーが広告の幅を指定し、それに基づいて最適な広告サイズを判断できます。
最適な広告サイズを選択するために、インライン アダプティブ バナーでは、固定された高さではなく最大の高さが使用されます。これにより、パフォーマンスが向上します。
インライン アダプティブ バナーの用途
インライン アダプティブ バナーは、アンカー アダプティブ バナーよりも大きくて背の高いバナーです。高さは可変で、デバイスの画面と同じ高さにすることができます。
次のようなスクロール コンテンツに配置することを目的としています。
前提条件
- スタートガイドの手順に沿って、Mobile Ads Flutter プラグインをインポートします。
始める前に
アプリにアダプティブ バナーを実装する際は、以下の点に留意してください。
Google Mobile Ads SDK の最新バージョンを使用していることを確認します。また、メディエーションを使用している場合は、最新バージョンのメディエーション アダプタを使用していることを確認してください。
インライン アダプティブ バナーのサイズは、利用可能な全幅を使用した場合に最も効果を発揮するように設計されています。ほとんどの場合、これは使用中のデバイスの画面の全幅になります。該当するセーフエリアを必ず考慮してください。
広告サイズを取得するメソッドは、
AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width)
AdSize.getLandscapeInlineAdaptiveBannerAdSize(int width)
AdSize.getPortraitInlineAdaptiveBannerAdSize(int width)
AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight)
インライン アダプティブ バナー API を使用している場合、Google Mobile Ads SDK は指定された幅とインライン フラグが設定された
AdSize
を返します。高さは、使用している API に応じて 0 またはmaxHeight
になります。広告の実際の高さは、返されたときにわかります。インライン アダプティブ バナーは、スクロール可能なコンテンツに配置されるように設計されています。バナーの高さは、API に応じて、デバイスの画面と同じか、最大の高さに制限されます。
実装
シンプルなインライン アダプティブ バナーを実装する手順は次のとおりです。
- インライン アダプティブ バナー広告のサイズを取得します。取得したサイズは、アダプティブ バナーのリクエストに使用されます。アダプティブ バナーの広告サイズを取得するには、以下の操作を行います。
- 使用するデバイスの幅を密度非依存ピクセルで取得します。画面の全幅を使用しない場合は独自の幅を設定します。
MediaQuery.of(context)
を使用すると画面の幅を取得できます。 - 現在の向きのインライン アダプティブ
AdSize
オブジェクトを取得するには、広告サイズに適切な静的メソッド(AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width)
など)を使用します。 - バナーの高さを制限する場合は、静的メソッド
AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight)
を使用します。
- 使用するデバイスの幅を密度非依存ピクセルで取得します。画面の全幅を使用しない場合は独自の幅を設定します。
- 広告ユニット ID、アダプティブな広告サイズ、広告リクエスト オブジェクトを指定した
BannerAd
オブジェクトを作成します。 - 広告を読み込みます。
onAdLoaded
コールバックで、BannerAd.getPlatformAdSize()
を使用して、更新されたプラットフォームの広告サイズを取得し、AdWidget
コンテナの高さを更新します。
サンプルコード
次に、インセットを考慮して、画面の幅に合わせてインライン アダプティブ バナーを読み込むウィジェットの例を示します。
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
/// This example demonstrates inline adaptive banner ads.
///
/// Loads and shows an inline adaptive banner ad in a scrolling view,
/// and reloads the ad when the orientation changes.
class InlineAdaptiveExample extends StatefulWidget {
@override
_InlineAdaptiveExampleState createState() => _InlineAdaptiveExampleState();
}
class _InlineAdaptiveExampleState extends State<InlineAdaptiveExample> {
static const _insets = 16.0;
BannerAd? _inlineAdaptiveAd;
bool _isLoaded = false;
AdSize? _adSize;
late Orientation _currentOrientation;
double get _adWidth => MediaQuery.of(context).size.width - (2 * _insets);
@override
void didChangeDependencies() {
super.didChangeDependencies();
_currentOrientation = MediaQuery.of(context).orientation;
_loadAd();
}
void _loadAd() async {
await _inlineAdaptiveAd?.dispose();
setState(() {
_inlineAdaptiveAd = null;
_isLoaded = false;
});
// Get an inline adaptive size for the current orientation.
AdSize size = AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(
_adWidth.truncate());
_inlineAdaptiveAd = BannerAd(
// TODO: replace this test ad unit with your own ad unit.
adUnitId: 'ca-app-pub-3940256099942544/9214589741',
size: size,
request: AdRequest(),
listener: BannerAdListener(
onAdLoaded: (Ad ad) async {
print('Inline adaptive banner loaded: ${ad.responseInfo}');
// After the ad is loaded, get the platform ad size and use it to
// update the height of the container. This is necessary because the
// height can change after the ad is loaded.
BannerAd bannerAd = (ad as BannerAd);
final AdSize? size = await bannerAd.getPlatformAdSize();
if (size == null) {
print('Error: getPlatformAdSize() returned null for $bannerAd');
return;
}
setState(() {
_inlineAdaptiveAd = bannerAd;
_isLoaded = true;
_adSize = size;
});
},
onAdFailedToLoad: (Ad ad, LoadAdError error) {
print('Inline adaptive banner failedToLoad: $error');
ad.dispose();
},
),
);
await _inlineAdaptiveAd!.load();
}
/// Gets a widget containing the ad, if one is loaded.
///
/// Returns an empty container if no ad is loaded, or the orientation
/// has changed. Also loads a new ad if the orientation changes.
Widget _getAdWidget() {
return OrientationBuilder(
builder: (context, orientation) {
if (_currentOrientation == orientation &&
_inlineAdaptiveAd != null &&
_isLoaded &&
_adSize != null) {
return Align(
child: Container(
width: _adWidth,
height: _adSize!.height.toDouble(),
child: AdWidget(
ad: _inlineAdaptiveAd!,
),
));
}
// Reload the ad if the orientation changes.
if (_currentOrientation != orientation) {
_currentOrientation = orientation;
_loadAd();
}
return Container();
},
);
}
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text('Inline adaptive banner example'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: _insets),
child: ListView.separated(
itemCount: 20,
separatorBuilder: (BuildContext context, int index) {
return Container(
height: 40,
);
},
itemBuilder: (BuildContext context, int index) {
if (index == 10) {
return _getAdWidget();
}
return Text(
'Placeholder text',
style: TextStyle(fontSize: 24),
);
},
),
),
));
@override
void dispose() {
super.dispose();
_inlineAdaptiveAd?.dispose();
}
}