2025/4/8

【Flutter/Dart】AdMobで広告を導入する方法！google_mobile_adsとバナー広告の実装

この記事からわかること

Flutter/DartでAdMobで広告を導入する方法
google_mobile_adsパッケージの使い方
バナー広告の実装

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Android Studio：Koala
Xcode：16.0
Flutter：3.29.2
Dart：3.7.2
google_mobile_ads：5.3.1
Mac M1：Sequoia 15.4

Flutterで開発しているiOS/AndroidアプリにGoogle AdMobを使用して広告を実装する流れをまとめていきたいと思います。

Google AdMobとは？

Google AdMob(アドモブ)はGoogleが提供しているiOSやAndroidなどのモバイルアプリに広告を設置できるサービスです。アプリの画面上に広告を設置する枠をAdMob側に提供することで利用しているユーザーの情報に基づいた広告を自動で配信してくれます。Webページ上に広告を付与できるGoogle AdSenseと基本的なサービス内容は同じです。

AdMobではアプリごとに「AppID」と「広告ID」を発行し、それらのIDを使用してアプリ自体の識別や設置している広告の識別などを行うことができるようになっています。

アカウントの登録方法やアプリIDの取得方法などは以下の記事を参考にしてください。

おすすめ記事：AdMobのアカウント登録方法

広告ユニット

AdMobでは4つの種類から広告ユニットを選択することができます。

バナー

アプリ画面の上部や下部に設置するバナー型の広告。常に表示され一定時間ごとに内容は更新されていく。

インタースティシャル

画面遷移や流れの間などに全画面に表示される広告。閉じるボタンを押さないと消えません。

ネイティブ

アプリのデザインに溶け込ませることができるようにカスタマイズ性を有した広告。

リワード

数十秒の動画を視聴してもらう広告。ポイントやスタミナなど報酬を与える代わりに広告を見てもらう処理を実装できる。

テスト用のIDを使用して開発する

アプリの開発段階では本番用のAppIDなどは使用せずにテスト用のIDを使用します。これらはiOS/Androidごとに異なるので適切な方を指定する必要があります。

iOS(テスト用AppID)

ca-app-pub-3940256099942544~1458002511

Android(テスト用AppID)

ca-app-pub-3940256099942544~3347511713

AdMobの導入とセットアップ

公式リファレンス：Get started

まずはFlutterアプリにAdMobの導入とセットアップまでを実装する手順をまとめていきます。まずはgoogle_mobile_adsパッケージをインストールします。以下コマンドを実行してパッケージをインストールします。

$ flutter pub add google_mobile_ads

導入が完了したら以下のimport文で使用できるようになります。

import 'package:google_mobile_ads/google_mobile_ads.dart';

続いて広告を読み込むために初期化処理をアプリ起動時に1回だけ実行する必要があります。mainメソッドでMobileAds.instance.initialize()を追加すればOKです。

import 'package:google_mobile_ads/google_mobile_ads.dart';
import 'package:flutter/material.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  MobileAds.instance.initialize();

  runApp(MyApp());
}

AppIDの設定

続いてAppIDをFlutterアプリに設定していきます。設定する箇所はiOS/Androidで異なるので1つずつ設定をする必要があります。また基本的にAppIDはテスト用(開発用)と本番用、2つを定義しておく必要があります。都度切り替えるのは面倒なのでスキームやビルド環境ごとに自動で切り替わるように定義していきます。

iOS・・・ios/Runner/Info.plist
Android・・・android/app/src/main/AndroidManifest.xml

iOS

iOS側はios/Runner/Info.plistにKey：GADApplicationIdentifierを指定し、値にAppIDを指定します。直接値を指定しても良いですがFlutterではデフォルトで開発/本番用のxcconfigファイルが用意されているのでこちらを活用していきます。

まずは開発/本番用のxcconfigファイルにそれぞれIDを追加していきます。Keyは分かりやすくADMOB_APP_IDとしておきました。

Debug.xcconfig(開発用)
ADMOB_APP_ID=ca-app-pub-3940256099942544~1458002511

Release.xcconfig(本番用)
ADMOB_APP_ID=ca-app-pub-XXXXXXXXXXXXXXXX~YYYYYYYYYY

これで${ADMOB_APP_ID}で値を参照できるようになっているのでInfo.plistには以下のように記述しておきます。

ios/Runner/Info.plist
<key>GADApplicationIdentifier</key>
<string>${ADMOB_APP_ID}</string>

Android

Android側はandroid/app/src/main/AndroidManifest.xmlにname：com.google.android.gms.ads.APPLICATION_IDを指定し値にAppIDを指定します。こちらも直接値を指定しても良いですがFlutterでは「build.gradle」の仕組みを利用して環境ごとに切り分けるように実装していきます。

おすすめ記事：AndroidManifest.xmlから変数を参照する

android/app/build.gradle.kts
buildTypes {
    debug {
        // テスト用
        manifestPlaceholders["admobAppId"] = "ca-app-pub-3940256099942544~3347511713"
    }
    release {
        // 本番用
        manifestPlaceholders["admobAppId"] = "ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX"
        signingConfig = signingConfigs.getByName("debug")
    }
}

これで${admobAppId}で値を参照できるようになっているのでAndroidManifest.xmlには以下のように記述しておきます。

android/app/src/main/AndroidManifest.xml
<manifest>
  <application>
    <meta-data
        android:name="com.google.android.gms.ads.APPLICATION_ID"
        android:value="${admobAppId}"/>
  <application>
<manifest>

バナー広告の実装

公式リファレンス：banner

アプリでよくあるバナー広告を実装には以下のように実装します。BannerAdにバナーIDやサイズ、広告読み込みイベントリスナーを指定することが可能です。広告の読み込みが完了してからバナーが表示されるように工夫しておく必要もあります。

admob_banner_widget.dart
class AdMobBannerWidget extends StatefulWidget {
  const AdMobBannerWidget({super.key});

  @override
  State<AdMobBannerWidget> createState() => _AdMobBannerWidgetState();
}
  
class _AdMobBannerWidgetState extends State<AdMobBannerWidget> {
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  @override
  void initState() {
    super.initState();
    _loadAd();
  }

  @override
  void dispose() {
    _bannerAd?.dispose();
    super.dispose();
  }

  /// 広告読み込み処理
  void _loadAd() {
    _bannerAd = BannerAd(
      // バナーID
      adUnitId: StaticKey.admobBannerIdTest,
      // バナーサイズ
      size: AdSize.fullBanner,
      request: const AdRequest(),
      // 読み込みイベントリスナー
      listener: BannerAdListener(
        onAdLoaded: (ad) {
          setState(() {
            _isLoaded = true;
          });
        },
        onAdFailedToLoad: (ad, error) {
          ad.dispose();
        },
      ),
    );

    _bannerAd?.load();
  }

  @override
  Widget build(BuildContext context) {
    return _isLoaded && _bannerAd != null
        ? SizedBox(
      width: _bannerAd!.size.width.toDouble(),
      height: _bannerAd!.size.height.toDouble(),
      child: AdWidget(ad: _bannerAd!),
    ) : const SizedBox();
  }
}

広告バナーIDもテスト用と本番用が分かれています。こちらはプラットフォームごとに取得できるヘルパークラスなどを作成しておくと管理しやすくなります。

class StaticKey {
  static String get admobBannerIdPrd {
    if (Platform.isIOS) {
      // iOS本番用
      return "ca-app-pub-XXXXXXXXXXXXXXXX/XXXXXXXXXX";
    } else if (Platform.isAndroid) {
      // Android本番用
      return 'ca-app-pub-XXXXXXXXXXXXXXXX/XXXXXXXXXX';
    }
    throw UnsupportedError("対象外のプラットフォームです");
  }

  static String get admobBannerIdTest {
    if (Platform.isIOS) {
      // iOSテスト用
      return "ca-app-pub-3940256099942544/2934735716";
    } else if (Platform.isAndroid) {
      // Androidテスト用
      return 'ca-app-pub-3940256099942544/6300978111';
    }
    throw UnsupportedError("対象外のプラットフォームです");
  }
}

まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。

ご覧いただきありがとうございました。