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

この記事からわかること
- Flutter/DartでAdMobで広告を導入する方法
- google_mobile_adsパッケージの使い方
- バナー広告の実装
index
[open]
\ アプリをリリースしました /
環境
- 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の導入とセットアップ
まずは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
としておきました。
ADMOB_APP_ID=ca-app-pub-3940256099942544~1458002511
ADMOB_APP_ID=ca-app-pub-XXXXXXXXXXXXXXXX~YYYYYYYYYY
これで${ADMOB_APP_ID}
で値を参照できるようになっているので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から変数を参照する
buildTypes {
debug {
// テスト用
manifestPlaceholders["admobAppId"] = "ca-app-pub-3940256099942544~3347511713"
}
release {
// 本番用
manifestPlaceholders["admobAppId"] = "ca-app-pub-XXXXXXXXXXXXXXXX~XXXXXXXXXX"
signingConfig = signingConfigs.getByName("debug")
}
}
これで${admobAppId}
で値を参照できるようになっているのでAndroidManifest.xmlには以下のように記述しておきます。
<manifest>
<application>
<meta-data
android:name="com.google.android.gms.ads.APPLICATION_ID"
android:value="${admobAppId}"/>
<application>
<manifest>
バナー広告の実装
アプリでよくあるバナー広告を実装には以下のように実装します。BannerAd
にバナーIDやサイズ、広告読み込みイベントリスナーを指定することが可能です。広告の読み込みが完了してからバナーが表示されるように工夫しておく必要もあります。
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("対象外のプラットフォームです");
}
}
まだまだ勉強中ですので間違っている点や至らぬ点がありましたら教えていただけると助かります。
ご覧いただきありがとうございました。