【Flutter】Google AdMob のバナー広告のウィジェットの実装と注意点

概要

この記事は、Flutterを用いてAdMobバナー広告を組み込む方法について解説するものです。AdMobの登録と基本設定が完了しているFlutter開発者を対象としています。

この記事で学べること：
Google AdMobを使用してFlutterアプリにバナー広告を表示するウィジェットの実装方法
この記事では扱わないこと：
AdMobのアカウント設定や具体的な初期設定手順

必要なパッケージの追加

以下のコマンドを実行してください

flutter pub add google_mobile_ads

メタデータの設定

AdMobを利用するためには、プラットフォームごとにメタデータを設定する必要があります。

参考: https://codelabs.developers.google.com/codelabs/admob-ads-in-flutter?hl=ja#3

Android

android/app/main/AndroidManifest.xmlに以下のメタデータを追加します。

android/app/main/AndroidManifest.xml

<manifest>
    ...
    <application>
       ...
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="YOUR_ADMOB_APP_ID"/>
    </application>

</manifest>

iOS

info.plistに以下を追加します。

info.plist

<key>GADApplicationIdentifier</key>
<string>YOUR_ADMOB_APP_ID</string>
<key>io.flutter.embedded_views_preview</key>
<true/>

バナー広告の実装

以下のコードは、プラットフォームに応じて適切なAdMobユニットIDを取得する関数です。

import 'dart:io';

import 'package:flutter/foundation.dart';

String getAdBannerUnitId() {
  String bannerUnitId = "";
  if (Platform.isAndroid) {
    // Android のとき
    bannerUnitId = kDebugMode ?
        "ca-app-pub-3940256099942544/6300978111"  // Androidのデモ用バナー広告ID
: "YOUR_ADMOB_ANDROID_UNIT_ID";
  } else if (Platform.isIOS) {
    // iOSのとき
     bannerUnitId = kDebugMode
        ? "ca-app-pub-3940256099942544/2934735716"  // iOSのデモ用バナー広告ID
        : "YOUR_ADMOB_IOS_UNIT_ID";
  }
  return bannerUnitId;
}

• 呼び出し側

    final bannerId = getAdBannerUnitId();
    BannerAd myBanner = BannerAd(
        adUnitId: bannerId,
        size: AdSize.banner,
        request: const AdRequest(),
        listener: const BannerAdListener());
    myBanner.load();

• ウィジェットの描画

            Container(
              width: myBanner.size.width.toDouble(),
              height: myBanner.size.height.toDouble(),
              alignment: Alignment.center,
              child: AdWidget(ad: myBanner),
            ),

UXと不正クリックの考慮

iPhone X以降のモデルでは、SafeAreaと広告が重なる可能性があり、誤タップを引き起こす恐れがあります。

このような場合、AdMobは無効なトラフィックと判断する可能性があります。これを防ぐために、広告の下にSafeAreaを設定するか、全体のウィジェットをSafeAreaで囲むことを推奨します。
私はおそらくこれが原因で１ヶ月ほど広告を止められていました…

このとき、自身のコンテンツにはかぶらないように注意してください。

例：

   Container(
              width: myBanner.size.width.toDouble(),
              height: myBanner.size.height.toDouble(),
              alignment: Alignment.center,
              child: AdWidget(ad: myBanner),
            ),
            const SafeArea(child: SizedBox.shrink()),
          ],

SafeAreaなし	下部SafeArea

アプリはさわやか待ち時間

なお、シミュレーター起動のデモモード（kDebugMode=true）で表示されるバナーが使われています。