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

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

この記事からわかること

  • Flutter/DartAdMob広告導入する方法
  • google_mobile_adsパッケージ使い方
  • バナー広告の実装

\ アプリをリリースしました /

みんなの誕生日

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

posted withアプリーチ

環境

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

Google AdMobとは?

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

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

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

広告ユニット

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

Google AdSenseのホーム画面

バナー

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

インタースティシャル

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

ネイティブ

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

リワード

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

テスト用の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側は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」の仕組みを利用して環境ごとに切り分けるように実装していきます。


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>

バナー広告の実装

公式リファレンス:banner

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


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

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

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

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

  
  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("対象外のプラットフォームです");
  }
}

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

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

searchbox

スポンサー

ProFile

ame

趣味:読書,プログラミング学習,サイト制作,ブログ

IT嫌いを克服するためにITパスを取得しようと勉強してからサイト制作が趣味に変わりました笑
今はCMSを使わずこのサイトを完全自作でサイト運営中〜

New Article