【Flutter】AdMobのバナー広告を超簡単に設置する【コピペでOK】

技術メモ

アプリ開発で収益を得たい場合、バナー広告は一番簡単な方法です。

今回はFlutterでアプリ開発をする際の、AdMobのバナー広告設置方法を簡単に説明していきます。

 

他のサイトやブログでもAdMobの導入方法については説明しています。

しかし、実際にリリースするアプリにバナー広告を組み込むことを考えると、不十分な説明が多い印象です。

 

今回は私が実際にリリースしているアプリに組み込んでいるバナー広告のコードを参考に説明するので、皆さんもぜひ参考にしてみてください。

コードはコピペできるように、なるべく丸ごと掲載します!

 

この記事では、バナー広告の設置位置について二つのパターンを解説します。

① 画面の上部にバナー広告を設置するパターン
② ボトムナビゲーションの上部にバナー広告を設置するパターン

 

 

どちらもよくバナー広告が設置される場所なので、初めてバナー広告を使用する場合はこの位置のどちらかに置いておけば間違いはないです。

 

それではいきましょう!

 

開発環境

  • MacBook Pro (macOS Catalina バージョン10.15.6)
  • Flutter 1.22.0 channel stable
  • Dart 2.10.0

 

AdMobに登録して広告作成(すでに登録済みの場合は省略)

まずはAdMobに登録するところからです。

AdMobの他にも開発者向けの広告配信サービスはいくつか存在しますが、導入のしやすさ、広告単価の高さからも最初はAdMobのサービスを利用するのが間違いないです。

 

まずは公式サイト(https://admob.google.com/home/)に移動して、ログインします。

この時、アカウントを作成していない場合はアカウントを作成します。

 

ログイン後、左のメニューから「アプリ」をクリックします。

 

アプリを登録して利用を開始」をクリック

 

アプリを公開しているかどうか選択します。

 

まだアプリを公開していない場合は「いいえ」を選択します。

その後アプリ名を入力します。

リリースするアプリのOSをAndroid・iOSから選択して「追加」をクリックします。

Android・iOS両方でリリースする場合は、それぞれアプリを登録する必要があります。

 

 

アプリIDが発行されるので、控えておきます。

※Androidも同様です。

広告ユニットを作成」をクリックします。

 

様々な広告フォーマットがありますが、今回はバナー広告を選択します。

 

広告ユニット名を入力します。(名前はなんでも良いです)

そして「広告ユニットを作成」をクリックします。

 

広告が作成されました!

アプリID(先ほどと同じ)、広告ユニットIDが表示されるのでメモしておきます。

 

ここで、アプリIDと広告ユニットIDの違いをまとめておきます。

アプリID・・・それぞれのアプリに一つだけ存在
広告ユニットID・・・作成した広告ごとに存在(バナー広告、リワード広告・・など)

具体例としては、一つのアプリIDに複数の広告ユニットIDが紐づく場合です。
例)サンプルアプリ(iOS)に、バナー広告(広告ユニットID 1)・リワード広告(広告ユニットID 2)を組み込む

 

今回はバナー広告のみを作成するので、広告ユニットIDは一つだけです。

Androidアプリも同時に作成する場合は、Android用のアプリIDと広告ユニットIDもメモしておきます。

 

これで広告の作成は完了です。

 

Flutterアプリに広告を埋め込む

それではFlutterアプリに広告を表示していきます。

下の画面の①と②の位置にバナー広告を表示します。

 

説明で使用するコードは、flutter createで生成されるデフォルトのコードを修正して、ボトムナビゲーションを追加したものです。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    final _pageList = [
      Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text(
              'ホーム',
            ),
          ],
        ),
      ),
      Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text(
              'リスト',
            ),
          ],
        ),
      ),
      Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            const Text(
              'マイページ',
            ),
          ],
        ),
      ),
    ];

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _pageList[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            label: '',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: '',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

 

ディレクトリ構成はデフォルトです。

このコードにバナー広告を追加していきます。

 

バナー広告設置準備

まずはバナー広告設置の準備をします。

今回は admob_flutter というパッケージを使用します。

admob_flutter | Flutter Package
Admob plugin that shows banner ads using native platform views.

 

pubspec.yaml にパッケージを追加します。

dependencies:
  admob_flutter: ^1.0.0

※ サイトから最新のバージョンを確認して指定してください。

 

パッケージをインストールします。

flutter pub get

 

iOSアプリにバナー広告を設置する場合は、Info.plistファイルにアプリIDを追加します。

アプリIDは最初にAdMobの設定をした際に取得しています。

 

<key>GADApplicationIdentifier</key>
<string>ca-app-pub-1667936047040887~2841266701</string>

 

Androidアプリにバナー広告を追加する場合は、/android/app/src/main/AndroidManifest.xml ファイルにアプリIDを追加します。

<manifest>
     <application>
         <meta-data
          android:name="com.google.android.gms.ads.APPLICATION_ID"
          android:value="ca-app-pub-1667936047040887~5178288456"/>
     </application>
</manifest>

 

次にmain.dartファイルのmain関数内でプラグインを初期化します。

AdMob初期化の前に、WidgetsFlutterBinding.ensureInitialized()を記載してください。

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

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  Admob.initialize();
  runApp(MyApp());
}

 

最後にクリーンします。

flutter clean

 

これでバナー広告の設置準備が整いました。

次に、servicesディレクトリを作成し、その中にadmob.dartファイルを作成します。

 

admob.dart ファイルに以下を記述します。

※iOS・Androidどちらかのみリリースする場合、使わないOSは return null に変更してください。

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

class AdMobService {
  String getBannerAdUnitId() {
    // iOSとAndroidで広告ユニットIDを分岐させる
    if (Platform.isAndroid) {
      // Androidの広告ユニットID
      return 'ca-app-pub-1667936047040887/1282958246'; 
    } else if (Platform.isIOS) {
      // iOSの広告ユニットID
      return 'ca-app-pub-1667936047040887/2813863466'; 
    }
    return null;
  }

  // 表示するバナー広告の高さを計算
  double getHeight(BuildContext context) {
    final height = MediaQuery.of(context).size.height;
    final percent = (height * 0.06).toDouble();

    return percent;
  }
}

 

広告ユニットIDは最初にAdMobの設定をした際に取得しています。

 

 

画面上部に広告を表示する

最初に、画面上部にバナー広告を設置するパターンをご紹介します。

Columnの中に AdmobBanner を表示します。

〜省略〜

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    final _pageList = [
      Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text(
              'ホーム',
            ),
          ],
        ),
      ),
      Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text(
              'リスト',
            ),
          ],
        ),
      ),
      Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            const Text(
              'マイページ',
            ),
          ],
        ),
      ),
    ];

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SafeArea(
        child: Column(
          children: [
            AdmobBanner(
              adUnitId: AdMobService().getBannerAdUnitId(),
              adSize: AdmobBannerSize(
                width: MediaQuery.of(context).size.width.toInt(),
                height: AdMobService().getHeight(context).toInt(),
                name: 'SMART_BANNER',
              ),
            ),
            Expanded(
              child: _pageList[_selectedIndex],
            )
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: '',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.list),
            label: '',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: '',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

 

このように画面上部にバナー広告が表示されます。

AdMobで広告を作成して24時間以内の場合、広告が表示されない場合があります。
広告が表示されない場合、バナー広告設置準備の章で説明した箇所を以下のテストIDに書き換えて実行するとテスト広告が表示されます。

・アプリID(テスト用)
Android: ca-app-pub-3940256099942544~3347511713
iOS: ca-app-pub-3940256099942544~1458002511

・広告ユニットID(テスト用)

Android: ca-app-pub-3940256099942544/6300978111
iOS: ca-app-pub-3940256099942544/2934735716

本番リリース前に、自分が作成したIDに変更しましょう。

 

ボトムナビゲーション上部に広告を設置する

次にボトムナビゲーション上部に広告を設置するパターンをご紹介します。

 

bottomNavigationBarプロパティの中でColumnを使い、バナー広告、BottomNavigationBarの順に記載します。

〜省略〜

class _MyHomePageState extends State {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  // ②ボトムナビゲーション上部にバナー広告を表示するパターン
  @override
  Widget build(BuildContext context) {
    final _pageList = [
      Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text(
              'ホーム',
            ),
          ],
        ),
      ),
      Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text(
              'リスト',
            ),
          ],
        ),
      ),
      Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            const Text(
              'マイページ',
            ),
          ],
        ),
      ),
    ];

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _pageList[_selectedIndex],
      bottomNavigationBar: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        mainAxisSize: MainAxisSize.min,
        children: [
          AdmobBanner(
            adUnitId: AdMobService().getBannerAdUnitId(),
            adSize: AdmobBannerSize(
              width: MediaQuery.of(context).size.width.toInt(),
              height: AdMobService().getHeight(context).toInt(),
              name: 'SMART_BANNER',
            ),
          ),
          BottomNavigationBar(
            items: const [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                label: '',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.list),
                label: '',
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.person),
                label: '',
              ),
            ],
            currentIndex: _selectedIndex,
            onTap: _onItemTapped,
          ),
        ],
      ),
    );
  }

 

このようにボトムナビゲーション上部にバナー広告が表示されます。

AdMobで広告を作成して24時間以内の場合、広告が表示されない場合があります。
広告が表示されない場合、バナー広告設置準備の章で説明した箇所を以下のテストIDに書き換えて実行するとテスト広告が表示されます。

・アプリID(テスト用)
Android: ca-app-pub-3940256099942544~3347511713
iOS: ca-app-pub-3940256099942544~1458002511

・広告ユニットID(テスト用)

Android: ca-app-pub-3940256099942544/6300978111
iOS: ca-app-pub-3940256099942544/2934735716

本番リリース前に、自分が作成したIDに変更しましょう。

 

バナー広告を表示するコツとしては、ページ単位でバナーWidgetを設置するのではなく、ページよりも上位の階層にバナーを設置することです。

ページ単位にバナーを設置してしまうと、ボトムナビゲーションでページを切り替えるたびにバナー広告読み込みが走ってしまうのでユーザビリティと広告単価の低下につながります。

 

今回はFlutterアプリにバナー広告を表示する方法について解説しました。

私のTwitterアカウントでは、この記事のようにサービス開発・アプリ開発のノウハウや悩みを現在進行形でシェアしています。

アプリ開発している方はフォロー・DM頂けると、簡単な相談には乗れると思うのでお気軽にご連絡ください。

 

今回解説したコードはGitHubにのせているので、コードを確認したい方はチェックしてみてください!

nosuke0926/flutter_admob_sample
Contribute to nosuke0926/flutter_admob_sample development by creating an account on GitHub.

 

技術メモ
スポンサーリンク
スポンサーリンク
のすけをフォローする
やばブロ!

コメント