アプリ開発で収益を得たい場合、バナー広告は一番簡単な方法です。
今回は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から選択して「追加」をクリックします。
アプリIDが発行されるので、控えておきます。
※Androidも同様です。
「広告ユニットを作成」をクリックします。
様々な広告フォーマットがありますが、今回はバナー広告を選択します。
広告ユニット名を入力します。（名前はなんでも良いです）
そして「広告ユニットを作成」をクリックします。
広告が作成されました！
アプリID（先ほどと同じ）、広告ユニットIDが表示されるのでメモしておきます。
ここで、アプリIDと広告ユニット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 というパッケージを使用します。
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,
),
);
}
}
このように画面上部にバナー広告が表示されます。
ボトムナビゲーション上部に広告を設置する
次にボトムナビゲーション上部に広告を設置するパターンをご紹介します。
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,
),
],
),
);
}
このようにボトムナビゲーション上部にバナー広告が表示されます。
バナー広告を表示するコツとしては、ページ単位でバナーWidgetを設置するのではなく、ページよりも上位の階層にバナーを設置することです。
ページ単位にバナーを設置してしまうと、ボトムナビゲーションでページを切り替えるたびにバナー広告読み込みが走ってしまうので、ユーザビリティと広告単価の低下につながります。
本番環境でAdMob広告が表示されない場合
最近、本番環境でAdMob広告がなかなか表示されない問題があるようです。
※とくにiOS側で表示が遅いです。
解決策を提示します。
まずは広告なしでアプリをリリース
広告なしの状態で一旦アプリをリリースします。
広告が表示されてからアプリをリリースしようとすると、広告表示までに数週間以上待つ可能性があるため時間がかかってしまいます。
リリース後、AdMob管理画面からアプリをリンクする
リリース後、AdMob管理画面にアクセスして、「アプリの設定」から自分のアプリをリンクします。
ここで自分のアプリを検索して表示される場合は、そのまま追加ボタンをクリックしてアプリを追加すれば広告が表示されるはずです。
アプリをリンクできない場合
上記の画面で自分のアプリを検索してもヒットしない場合があります。
その場合はまだAdMob側がAppStore上のあなたのアプリを認識していないので、1週間~2週間程度待ってから再度検索してみてください。
それでも検索でヒットしない場合は直接AdMobに問い合わせることがお勧めです。
上記のフォーラムで「アプリが表示されないのですが」と問い合わせます。
※だいたい皆同じ問い合わせですね
以下の文言をコピペでどうぞ（アプリのIDは変更してください）
すると、早いと数時間で返事が返ってきます
ほとんどの場合「再度確認してみて」という内容のメールが返ってくるので、AdMobの管理画面で再度検索します。
今度はしっかり検索で表示されるので、追加ボタンからアプリをリンクしてください。
これで問題なく本番環境で広告が表示されるはずです。
早いと数時間で対応してくれるので、AdMobのアプリリンク待ちの人はすぐにやった方がいいです🙆♂️ https://t.co/LDjfgiD6aD
— のすけ | サービス作り (@nosuke926) May 14, 2021
今回はFlutterアプリにバナー広告を表示する方法について解説しました。
私のTwitterアカウントでは、この記事のようにサービス開発・アプリ開発のノウハウや悩みを現在進行形でシェアしています。
アプリ開発している方はフォロー・DM頂けると、簡単な相談には乗れると思うのでお気軽にご連絡ください。
今回解説したコードはGitHubにのせているので、コードを確認したい方はチェックしてみてください！
コメント