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

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

前提条件

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

完成形

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

手順

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

AdMobに登録

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

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

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

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

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

『バナー』を選択

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

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

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

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

『プロジェクトを追加』

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

そのまま『続行』

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

そのまま『続行』

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

Android設定

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

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

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

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' //この行を追加

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

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

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

iOS設定

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

『iOS』を選択

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

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

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

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

そのまま『次へ』

そのまま『次へ』

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

これで追加完了です。

パッケージ取得

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 を以下のコードを追記します。