Zenn
🐁

【Flutter】AdMob広告のテストコードを実装する

2025/02/22に公開
Flutter
tech

こんにちは、ワニかず@40歳 出戻りエンジニアです。
Flutterアプリをストアにのせるなら
せっかくなら広告を付けたいと思いますよね。

ということで、今回は開発中のFlutterアプリに
テスト用の広告をつける方法についてまとめました。

実装に必要な知識

AdMobやアプリID、広告ユニットIDという単語を軽く知っておく必要があります。

AdMob

Google AdMobは、広告の配信を通じて、開発したモバイルアプリを収益化できるサービスです。

アプリID

アプリケーションとAdMobのサービスを紐付けるために必要な識別子です。

主な役割：

  1. アプリケーションの認証：このIDによってGoogleはあなたのアプリを識別します
  2. 広告の初期化：アプリ起動時に必要
  3. 収益の追跡：広告収益をこのIDに紐付けて管理

広告ユニットID

目的と役割：

  1. 個々の広告を識別するためのユニークなID
  2. 広告の種類（バナー、インタースティシャル等）ごとに異なるIDが必要
  3. 広告の表示位置や種類ごとの収益を個別に追跡可能
  • アプリID：アプリ自体の識別
  • 広告ユニットID：個々の広告の識別
    という役割の違いがあります。

アプリIDを設定する

  • Android側の設定

  • iOS側の設定
    が、それぞれに必要であるとともに、

  • デバッグ用の設定

  • 本番用の設定
    が、それぞれ必要になってきます。

Android側の設定

build.gradleとAndroidManifest.xmlに設定を行います。

  1. android/app/build.gradleに設定を追加
android {
    buildTypes {
        debug {
            manifestPlaceholders = [
                admobAppId: "ca-app-pub-3940256099942544~3347511713"  // テスト用
            ]
        }
        release {
            manifestPlaceholders = [
                admobAppId: "ca-app-pub-XXXXXXXXXXXXXXXX~YYYYYYYYYY"  // 本番用
            ]
        }
    }
}
  1. android/app/src/main/AndroidManifest.xmlで変数を参照
<meta-data
    android:name="com.google.android.gms.ads.APPLICATION_ID"
    android:value="${admobAppId}"/>

iOS側の設定

xcconfigファイルを使用して開発環境と本番環境を切り替えるのが一般的です。

  1. ios/Flutter/Debug.xcconfigにテスト用IDを設定
ADMOB_APP_ID=ca-app-pub-3940256099942544~1458002511
  1. ios/Flutter/Release.xcconfigに本番用IDを設定
ADMOB_APP_ID=ca-app-pub-XXXXXXXXXXXXXXXX~YYYYYYYYYY
  1. 次に、ios/Runner/Info.plist で変数を参照：
<dict>
    <key>GADApplicationIdentifier</key>
    <string>$(ADMOB_APP_ID)</string>
    <key>NSUserTrackingUsageDescription</key>
    <string>This identifier will be used to deliver personalized ads to you.</string>
</dict>

この設定により

  • flutter run でデバッグビルド時はテスト用ID
  • flutter run --release で本番ビルド時は本番用ID

が自動的に使用されます。

広告ユニットIDを設定する

今回はよく見る、アプリの下に表示される広告を実装してみたいと思います。

pubspec.yamlにパッケージを追加

dependencies:
  google_mobile_ads: ^4.0.0

広告ユニットIDの処理を作る

Andoroid用、iOS用それぞれについて、
デバッグ用、本番用で広告ユニットIDが切り替わる必要があります。

私の場合は、
lib/constants/api_constants.dart
というソースがあったので、そこに処理を追加しました。

import 'dart:io' show Platform;

class ApiConstants {
  static const bool isDevelopment = true;

  // AdMob設定
  static String get bannerAdUnitId {
    if (isDevelopment) {
      if (Platform.isAndroid) {
        return 'ca-app-pub-3940256099942544/6300978111';  // Androidテスト用
      } else if (Platform.isIOS) {
        return 'ca-app-pub-3940256099942544/2934735716';  // iOSテスト用
      }
    } else {
      if (Platform.isAndroid) {
        return 'あなたの本番用Android広告ユニットID';
      } else if (Platform.isIOS) {
        return 'あなたの本番用iOS広告ユニットID';
      }
    }
    throw UnsupportedError('Unsupported platform');
  }
}

広告ウィジェットを作成

各画面で共通して使用できる広告ウィジェットを作成します。

lib/widgets/ad_banner_widget.dart
としてソースを追加しています。

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

class AdBannerWidget extends StatefulWidget {
  const AdBannerWidget({super.key});

  @override
  State<AdBannerWidget> createState() => _AdBannerWidgetState();
}

class _AdBannerWidgetState extends State<AdBannerWidget> {
  BannerAd? _bannerAd;
  bool _isLoaded = false;

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

  void _loadAd() {
    _bannerAd = BannerAd(
      adUnitId: ApiConstants.bannerAdUnitId, 
      size: AdSize.banner,
      request: const AdRequest(),
      listener: BannerAdListener(
        onAdLoaded: (ad) {
          setState(() {
            _isLoaded = true;
          });
        },
        onAdFailedToLoad: (ad, error) {
          ad.dispose();
        },
      ),
    );

    _bannerAd?.load();
  }

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

  @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();
  }
}

main.dartを修正

  1. 以下のインポートを追加します
import 'widgets/ad_banner_widget.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
  1. Google Mobile Adsを初期化します
void main() async {
  await MobileAds.instance.initialize(); // ここを追加
}
  1. 全ての画面に広告を表示したいため、Scaffoldに処理を追加します。ご自身のソースに合わせて調整が必要になると思います。
class _MainScreenState extends State<MainScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
    // ↓以下を追加修正
      body: Column(
        children: [
          Expanded(
            child: _screens[_selectedIndex],
          ),
          const AdBannerWidget(), // 広告を追加
        ],
      ),
    // ↑以上を追加修正
    );
  }
}

おしまいに

本番用の処理の実装はまた別途まとめたいと思います。

Discussion