google_mobile_adsパッケージの実装手順を記載します。
前提条件
アプリ内に広告を表示するために、GoogleのAdMob経由で広告ユニットを作成し、アプリIDと広告ユニットIDをAndroid用とiOS用にそれぞれ作成します。今回はバナー広告の広告ユニットを作成しました。
初期設定
Android用のアプリIDを登録する
/android/app/src/main/AndroidManifest.xmlの<application></application>の中に、下記の項目を追加します。android:valueにはAdMobアカウントで取得したAndroid用のアプリIDを記載してください。
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="ca-app-pub-xxxxxxxxxxxxxxx~xxxxxxxxxx"/>
iOS用のアプリIDを登録する
ios/Runner/info.plistファイルに、以下を追記します。<string></string>には、AdMobアカウントで取得したiOS用のアプリIDを記載してください。
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-xxxxxxxxxxxxxxxx~xxxxxxxxxx</string>
パッケージをインポートする
pubspec.yamlファイルに以下のコードを追加します。バージョンは最新のものを使ってください。
dependencies:
google_mobile_ads: ^0.12.0
広告を初期化する
次にmain.dartファイルのmain()関数にて、runApp()関数が起動する前に、MobileAdsクラスを初期化するコードを下記のように記載します。
void main() {
WidgetsFlutterBinding.ensureInitialized();
MobileAds.instance.initialize();
runApp(new MyApp());
}
バナー広告を読み込む
既にバナー広告の広告ユニットＩＤを取得していますが、テスト用の広告ユニットＩＤを使って実装を進めていきます。テスト用の広告ユニットＩＤは下記で取得できます。
- Android用 https://developers.google.com/admob/android/test-ads#sample_ad_units
- iOS用 https://developers.google.com/admob/ios/test-ads#demo_ad_units
上記ページにある、バナー広告の広告ユニットIDを使って、アプリのタイトル画面（TitleScreen）に広告を表示してみます。
TitleScreenStateウィジェットの中で下記を宣言・定義します。
final BannerAd banner = BannerAd(
adUnitId: Platform.isAndroid
? 'ca-app-pub-3940256099942544/6300978111'
: 'ca-app-pub-3940256099942544/2934735716',
size: AdSize.banner,
request: AdRequest(),
listener: AdListener(),
);
そして、TitleScreenStateウィジェットのinitState関数の中に下記のコードを追加して、広告を読み込みます。
banner.load();
広告を表示する
広告を読み込んだら、広告を画面に表示させます。バナー広告のサイズは幅320x高50がデフォルトとなっているので、同じ高さのウィジェットを用意してその中に表示するようにします。
Container(
height: 50.0,
child: AdWidget(
ad: banner,
),
),
flutter runを実行すて、タイトル画面を確認すると、サンプル用の広告が表示されていることが確認できます。
リファクタリング
上記の方法だと他のページにも広告を表示したい場合、同じコードを繰り返し記述する必要があります。リファクタリングして、すべてのページで表示できるように調整します。
providerパッケージの導入
providerパッケージをインポートしていない場合は、pubspec.yamlファイルに追加します。
dependencies:
provider: ^5.0.0
MobileAdsインスタンスを保持するクラス
MobileAdsのインスタンスは非同期的に初期化されるので、初期化されるインスタンスを保持するクラスを作成し、そのクラスをproviderを使って、アプリ全体で参照できるようにします。ここでは、AdSettingsというクラスをad_settings.dartというファイルに記述します。
ad_settings.dart
class AdSettings {
Future<InitializationStatus> initialization;
bool testMode;
AdSettings(this.initialization, {this.testMode = true});
String getAdUnidId() {
if (testMode) {
return Platform.isAndroid
? 'ca-app-pub-3940256099942544/6300978111'
: 'ca-app-pub-3940256099942544/2934735716';
} else {
return Platform.isAndroid
? 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx'
: 'ca-app-pub-xxxxxxxxxxxxxxxx/xxxxxxxxxx';
}
}
}
このクラスの中で、広告関連の設定を管理していきます。テスト環境なのか、本番環境なのか、を判断する変数はコンスタントとして定義してこのクラスに渡すことで、広告ユニットＩＤが切り替わるように設定しておけば、本番用のビルドを生成するときに、便利だと思います。
main.dartファイルの初期化のコードは以下の変更します。
void main() {
WidgetsFlutterBinding.ensureInitialized();
final futureMobileAds = MobileAds.instance.initialize();
final adSettings = AdSettings(futureMobileAds,
testMode: kIsTestMode, isAmazonApp: kIsAmazonApp);
runApp(
Provider.value(
value: adSettings,
builder: (context, child) => MyApp(),
),
);
}
MobileAds.instance.initialize()が戻すFuture<InitializationStatus>をAdSettingsクラスに渡し、そのインスタンスをProvider.value()を使って、アプリ全体に渡します。
先程、TitleScreenStateウィジェット内で読み込んだコードは以下のように書き換えます。
AdSettings? banner;
@override
void didChangeDependencies() {
super.didChangeDependencies();
final adSettings = Provider.of<AdSettings>(context);
adSettings.initialization.then((status) {
setState(() {
banner = BannerAd(
adUnitId: adSettings.getAdUnidId(),
size: AdSize.banner,
request: AdRequest(),
listener: AdListener(),
);
banner!.load();
});
});
}
didChangeDependencies()はinitState()の後、build()の前に実行されるメソッドで、該当のStateウィジェットが依存する要素が更新される度に実行されます。
表示する箇所は以下のようにしました。
banner == null
? Container()
: Container(
height: 50.0,
child: AdWidget(ad: banner!),
),
上記までの設定が完了したら、広告を表示させたい各ページに実装していきます。
参考サイト
https://pub.dev/packages/google_mobile_ads