[Flutter x Firebase] カウンターアプリに広告を追加する
やること
-
flutter creatで生成されるカウンターアプリに、Admobによる広告を追加する。
前回
- [Flutter x Firebase] カウンターアプリに認証機能を追加する
- [Flutter x Firebase] カウンターアプリに認証機能を追加する 〜自動ログイン〜
- [Flutter x Firebase] Crashlyticsと連携してクラッシュレポートを取得する
- [Flutter x Firebase] Cloud Firestoreと連携してカウントを保持する
ソースコードは以下のものを使用。
以降では、Firebaseとの連携が完了しているものとして記載する。
ちなみに、Flutter 2.0に対応しました。
手順
- Admob側の準備
- アプリの準備
- パッケージインストール(google_mobile_ads)
- 初期設定(iOS)
- 初期設定(Flutter)
- バナー広告を表示する
- リワード広告を表示する
Admob側の準備
基本的には表示されるガイドに従って入力やら何やらを設定する。注意点のみ記載。
Admobに登録する
お支払い情報を設定する
これを設定しないと広告を配信できない。これ大事
結構時間がかかる(24時間くらいで確認しますと表示される)ので早めにやっておいた方がいい。
(自分は5〜6時間かかった)
Admobにアプリを追加する
今回はお試しで作成するので「App Storeで公開していますか？」は「いいえ」を選択。
作成後、あとで使うので、アプリIDを確認しておく。(ca-app-pub-5**************2みたいなやつ)
広告ユニットを作成する
今回は、予め用意されているテスト用の広告を使用するのでお試しだけで済ませるのであればユニットの作成は不要。デモ広告ユニットIDは以下を参照。
実際に配信するアプリで使いたい場合は、広告のフォーマット(バナー、インタースティシャル、リワード)や広告の種類(テキスト、動画、・・・)を設定する。
https://support.google.com/admob/answer/6128738?hl=ja
テストデバイスを追加する
自分で設定した広告を自分でクリックするような行為はポリシーに反するため、最悪アカウントが停止される恐れがある。そのため、特定のデバイス(自分のデバイス)ではテスト用の広告を表示するように設定する必要がある。
- 左側のメニューから「設定」を選択。
- 真ん中の上タブから「テストデバイス」を選択。
- 「テストデバイスを追加」ボタンを押す。
テストデバイスの追加に必要な情報は以下の通り。
- デバイス名(自分で決める)
- プラットフォーム(Android or iOS)
- 広告IDまたはIDFA※
アプリの準備
Admob広告用のパッケージをインストールする
今回使用するのは以下のパッケージ。
dependencies:
google_mobile_ads: ^0.12.1+1
iOS用の初期設定
Info.plistに以下を追記する。{AdmobAppId}には、 Admobにアプリを追加するで追加したアプリのアプリIDを設定する。(例: ca-app-pub-3940256099942544~1458002511)
<key>GADApplicationIdentifier</key>
<string>{AdmobAppId}</string>
<key>SKAdNetworkItems</key>
<array>
<dict>
<key>SKAdNetworkIdentifier</key>
<string>cstr6suwn9.skadnetwork</string>
</dict>
</array>
初期化
Firebase同様、アプリ開始時におまじない(MobileAds.instance.initialize())を実行する。
パッケージのExampleだと
awaitを使っていなかったが、初期化が終わる前に広告を表示しようとするとエラーが出たのでawaitで初期化を待つことにした。
void main() async {
WidgetsFlutterBinding.ensureInitialized();
final List<Future> setUpFutures = [
DotEnv.load(fileName: ".env"), // 環境変数読み込み用(今回は説明してません)
Firebase.initializeApp(),
MobileAds.instance.initialize()
];
await Future.wait(setUpFutures);
~
}
バナー広告を表示する
google_mobile_adsの広告の表示までの流れは以下の通り。
- インスタンス化
- ロード
- 表示
- 破棄(dispose)
インスタンス化
広告のタイプに応じたクラス(バナー広告の場合はBannerAd)でインスタンス化を行う。
final BannerAd _bannerAd = BannerAd(
size: AdSize.banner,
adUnitId: TEST_BANNER_AD_ID,
listener: AdListener(),
request: AdRequest(),
);
AdListenerでは、広告が閉じられたときやユーザーがアプリを離れたときなど、ライフサイクルイベントをリッスンできる。
AdRequestは詳しい説明はなかったが、コードのコメントを読むとTargeting info per the AdMob API.と書いてあるので、おそらくloadする際にリクエスト内容にマッチした広告を表示する際に設定するものと思われる。
リスナーの設定
今回のコードでは、バナー広告には何も設定していないが、サンプルでは以下のようなListenerが掲載されている。
以下のように、広告のロードが完了した際や失敗した際、広告が開かれた際などに何らかの処理を行うことができる。(リワード広告の場合は、リワードが与えられた場合(onRewardedAdUserEarnedReward)の処理を書く必要がある。
final AdListener listener = AdListener(
// Called when an ad is successfully received.
onAdLoaded: (Ad ad) => print('Ad loaded.'),
// Called when an ad request failed.
onAdFailedToLoad: (Ad ad, LoadAdError error) {
ad.dispose();
print('Ad failed to load: $error');
},
// Called when an ad opens an overlay that covers the screen.
onAdOpened: (Ad ad) => print('Ad opened.'),
// Called when an ad removes an overlay that covers the screen.
onAdClosed: (Ad ad) => print('Ad closed.'),
// Called when an ad is in the process of leaving the application.
onApplicationExit: (Ad ad) => print('Left application.'),
);
ロードする
おそらくすべてのタイプの広告で、広告を表示する前にロードを実行する必要がある。バナー広告の場合は、基本的には最初に読み込んだものを表示し続けることになるので、initStateで実行すればOK。(バナー広告は一定時間経過後、自動的に更新される)
void initState() {
super.initState();
_bannerAd.load();
~~
}
表示する
BannerAdをWidgetとして表示するには、load（）を呼び出した後、AdWidgetをインスタンス化する必要がある。 load（）を呼び出す前にWidgetを作成することはできるが、WidgetTreeに追加する前にload（）を呼び出す必要がある。
また、iOSではAdWidgetの幅と高さを指定して配置しないと広告が表示されないことがあるため、Containerなどでサイズを指定して配置する必要がある。広告のサイズは、_bannerAd.sizeで取ってこれる。
Widget build(BuildContext context) {
final AdWidget adWidget = AdWidget(ad: _bannerAd);
~~
Container(
alignment: Alignment.center,
child: adWidget,
width: _bannerAd.size.width.toDouble(),
height: _bannerAd.size.height.toDouble(),
),
}
リワード広告を表示する
今回はカウンターアプリということで、カウントが10の倍数になる時にリワード広告を表示するようにしたい。
そのため、+ボタンを押した際にカウントが10の倍数-1の数だった場合にリワード広告を表示するようにする、
インスタンス化
バナー広告とは違い訳あり(後述)のためinitState内でListenerの設定・インスタンス化を行う。
void initState() {
super.initState();
_bannerAd.load();
listener = AdListener(
// 広告のロードが完了したら、広告の表示を行い、EasyLoadingを閉じる
onAdLoaded: (Ad ad) {
print('Ad loaded.');
_rewardedAd!.show();
EasyLoading.dismiss();
},
// Called when an ad request failed.
onAdFailedToLoad: (Ad ad, LoadAdError error) {
ad.dispose();
print('Ad failed to load: $error');
},
// Called when an ad opens an overlay that covers the screen.
onAdOpened: (Ad ad) => print('Ad opened.'),
// Called when an ad removes an overlay that covers the screen.
onAdClosed: (Ad ad) {
ad.dispose();
print('Ad closed.');
},
// Called when an ad is in the process of leaving the application.
onApplicationExit: (Ad ad) => print('Left application.'),
// 広告動画の再生が終わったら、カウントを1進める
onRewardedAdUserEarnedReward: (RewardedAd ad, RewardItem reward) {
print('Reward earned: $reward');
_incrementCounter();
//ad.dispose();
},
);
_rewardedAd = RewardedAd(
adUnitId: TEST_REWARD_AD_ID,
request: AdRequest(),
listener: listener!,
);
}
ロード・表示する
上記のような理由から、広告読み込み→広告表示→リワード授与を同期的に行いたい場合は、
-
load()実行 -
onAdLoadedで広告表示 -
onRewardedAdUserEarnedRewardでリワード授与
とする必要がある。と思う。
思ってたのと違うので、間違っていたら教えてください。。。
floatingActionButton: FloatingActionButton(
onPressed: () {
if (_currentCount % 10 == 9) {
EasyLoading.show(status: '動画広告を読み込んでいます。。。');
_rewardedAd!.load();
} else {
_incrementCounter();
}
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
以上！前回からだいぶ時間が空いてしまった。。。
Discussion