【Flutter】AdMobのバナー広告の表示【firebase_admob】

Flutter でAdMobの広告を表示させるGoogle公式のパッケージ「firebase_admob」の組み込み方法について解説します。

firebase_admob | Flutter Package

FlutterpluginforFirebaseAdMob,supportingbanner,interstitial(full-screen),andrewardedvideoads

https://github.com/FirebaseExtended/flutterfire/tree/master/packages/firebase_admob

アカウントの有効化
AdMobにアプリを追加
Firebaseにプロジェクトを追加
XCodeプロジェクトの設定
Androidプロジェクトの設定
バナー広告の表示

アカウントの有効化

「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,
  );

以上でバナー広告が表示されると思います。（上記の場合はテスト用広告が表示されます）

広告はFlutterのウイジェットツリーには組み込まれないので、必ず最前面に表示されます。なので、場合によって自分でバナーの表示/非表示を切り替える必要があります。