Flutter でAdMobの広告を表示させるGoogle公式のパッケージ「firebase_admob」の組み込み方法について解説します。
アカウントの有効化
「firebase_admob」は、GoogleのFirebaseとAdMobを使うので、それぞれのアカウントを有効化します。
AdMob単体でも組み込み可能ですが、Firebaseを経由することでアナリティクスなど他のGoogleサービスと連携することができます。
AdMobにアプリを追加
AdMobに広告表示の対象となるアプリを追加します。
メニューの「アプリ」>「アプリの追加」から、iOS、Android、それぞれアプリを追加します。
アプリごとに「ca-app-pub-***」のアプリIDが生成されるので、このIDを後ほど利用します。
Firebaseにプロジェクトを追加
Firebaseコンソール画面のトップにある「プロジェクトを追加」からプロジェクトを追加します。
追加したプロジェクト内で、iOS、Android、それぞれアプリを追加します。この時、iOSはバンドル名、Androidはパッケージ名を入力する必要があります。
iOSのバンドル名は、XCodeのプロジェクト設定にあるBundle Identifierです。
Androidのパッケージ名は、android/app/src/main/AndroidManifest.xml のpackage=”パッケージ名”で確認できます。
XCodeプロジェクトの設定
FirebaseプロジェクトにiOSアプリを追加すると「GoogleService-Info.plist」がダウンロードできるようになります。
このファイルを、iOSプロジェクトのRunnerフォルダに追加します。(依存関係が生成されるので必ずXCodeから追加してください)
Info.plist に以下のプロパティを追加します。
<key>GADApplicationIdentifier</key>
<string>AdMobアプリID</string>
※AdMobアプリIDのところに、AdMobで追加したiOSのアプリIDを設定します。
Androidプロジェクトの設定
FirebaseプロジェクトにAndroidアプリを追加すると「google-services.json」がダウンロードできるようになります。
このファイルを、Androidプロジェクトのandroid/appフォルダに追加します。(こちらはファイルの移動かコピーでOKです)
/android/app/src/main/AndroidManifest.xml に以下を追加。
<manifest>
<application>
<!-- 中略 -->
<!-- ここの並びに追加 -->
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="AdMobアプリID”/>
<!-- ここまで -->
</application>
</manifest>
※AdMobアプリIDのところに、AdMobで追加したAndroidのアプリIDを設定します。
バナー広告の表示
pubspec.yaml に以下を追加してpub getします。
dependencies:
flutter:
sdk: flutter
# ↓これを追加
firebase_admob: ^0.9.3+2
バナー広告の表示。
// 以下をインポート
import 'package:firebase_admob/firebase_admob.dart';
// 最初に初期化
FirebaseAdMob.instance.initialize(appId: AdMobアプリID);
// 広告の初期設定
static MobileAdTargetingInfo targetingInfo = MobileAdTargetingInfo(
keywords: <String>['keyword1', 'keyword2', 'keyword3'],
contentUrl: '自身のサイトURL',
childDirected: false,
testDevices: <String>[],
);
// バナー広告の作成
BannerAd _banner = BannerAd(
adUnitId: BannerAd.testAdUnitId, //テスト用(本番では実際の広告ユニットIDに変更してください)
size: AdSize.smartBanner,
targetingInfo: targetingInfo,
listener: (MobileAdEvent event) {
print("BannerAd: $event");
},
);
// バナー広告の表示
_banner
..load()
..show(
anchorOffset: 0.0,
anchorType: AnchorType.bottom,
);
以上でバナー広告が表示されると思います。(上記の場合はテスト用広告が表示されます)


尚、firebase_admobパッケージは、バナー広告の他に、インタースティシャル広告(フルスクリーン)、リワード動画広告の表示にも対応しています。
コメント