Flutterラボ リリース3周年記念! プロコースが1ヶ月の料金で2ヶ月間受けられる、実質半額セール (2024年3月17日まで・先着)

Flutterラボの

プレミアム会員になる

【Flutter】アプリにAdMobのバナー広告を表示して収益化する

2020.09.09

AdMobのバナー広告をアプリ内に表示することによって収益化を目指すために必要な準備、パッケージ、表示のためのコードを紹介していきます。

Flutter学習サイト『Flutterラボ』で動画コースとしても公開している内容ですので、動画で学びたい方はこちらからご覧ください。

Flutterラボ|動画で学ぶFlutter学習サイト Flutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで flutterlabo.tech

前提条件

・Googleアカウントを持っている
・AdMobへのログインが完了している
・Firebaseへのログインが完了している

完成形

iOS・Android両プラットフォームでAdMobバナー広告を表示する

画像28

手順

1. AdMobに広告ユニットを追加
2. Firebaseプロジェクトを作成
3. Android設定
4. iOS設定
5. パッケージ取得
6. コードをコピペ

AdMobに登録

https://apps.admob.com/v2/home
AdMobにアクセスし、Googleアカウントでログインしておきます。

左メニュー『アプリ』> 『アプリを追加』からアプリ追加を開始します。

すでにリリースしている場合は『はい』、未リリースアプリの場合は『いいえ』を選択してください。

画像11

アプリ名にわかりやすい任意の名前を入力して『追加』

画像12

そのまま『広告ユニットを作成』

画像29

『バナー』を選択

画像14

『広告ユニット名』に後でわかりやすいように名前をつけて『広告ユニットを作成』

画像15

これで広告ユニットの作成が完了しました。
同様にiOSアプリと広告ユニットも作成してください。

画像29

Firebaseプロジェクトを作成する

https://console.firebase.google.com/
Firebaseにアクセスする(ログインしていない場合はGoogleアカウントでログイン)

『プロジェクトを追加』

画像1

プロジェクト名を入力して『続行』(今回は『note-admob』としました)

画像2

そのまま『続行』

画像3

アカウントを選択して『プロジェクトを作成』

画像4

そのまま『続行』

画像5

これでプロジェクト作成は完了です。

Android設定

赤丸のアイコンからAndroidアプリを追加していきます。

画像6

パッケージ名を入力して『アプリを登録』
パッケージ名がわからない場合は以下の記事を参考に確認してください。


画像7

『google-services.json』をダウンロードして、
android > app > google-services.json に配置します。

画像8

android > build.gradle に以下の1行を追加します。

classpath 'com.google.gms:google-services:4.3.3'

完成例

dependencies {
   classpath 'com.android.tools.build:gradle:3.5.0'
   classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
   classpath 'com.google.gms:google-services:4.3.3' //この行を追加
}

android > app > build.gradle に以下の1行を追加します。

apply plugin: 'com.google.gms.google-services'

完成例

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
apply plugin: 'com.google.gms.google-services' //この行を追加

ここまでできたら『次へ』

確認中となっていますが、『このステップをスキップ』で進んでください。

画像9

これでAndroidアプリ追加は完了です。

iOS設定

『アプリを追加』からiOSアプリを追加します。

画像16

『iOS』を選択

画像17

バンドルIDを入力して『アプリを登録』
バンドルIDがわからない場合は以下の記事を参考に確認してください。


画像18

『GoogleService-Info.plist』をダウンロード

画像19

ダウンロードしたファイルをXcodeにドラッグ&ドロップでプロジェクト内に追加する。

画像20

画像21

それが終わったら、『次へ』

そのまま『次へ』

画像22

そのまま『次へ』

画像23

確認中となっていますが、『このステップをスキップ』で進んでください。

画像24

これで追加完了です。

画像25

パッケージ取得

pubspec.yaml を編集して、『flutter_google_ad_manager』パッケージを取得します。

dependencies:
 flutter:
   sdk: flutter

 cupertino_icons: ^0.1.3
 flutter_google_ad_manager: any #この行を追加

編集したら、『Pub get』でパッケージを取得しましょう。

■ Androidの設定

AndroidManifest.xml を以下のコードを追記します。