AdMobのバナー広告を実装する方法(Firebase利用) | Androidアプリ開発

アプリの収益化をする上で広告を実装することは最もポピュラーな方法のひとつです。
Androidアプリについては、AdMobという広告プラットフォームを利用するのが一般的です。

AdMobを実装するのにはfirebaseというプラットフォームを使用すると便利なので、この記事firebaseを利用したAdMobのバナー広告の実装方法を紹介します。

全画面広告については以下の記事にまとめていますので、そちらを参照ください。
スポンサーリンク

AdMobにアプリを追加する

まずは以下のAdMobコンソールのページを開き、Googleアカウントでログインします。
https://apps.admob.com/

次に左カラム -> アプリ ->アプリを追加 をクリックします。
AdMobにアプリを追加する方法
Google Playでアプリを既に公開してれば、「はい」を選択して紐づけます。
まだ未公開なら「いいえ」を選択します。
通常は公開前に広告を実装するのが大多数だと思いますので、ここでは「いいえ」を選択した例で説明します。
AdMobにアプリを追加する方法
次にアプリ名を入力します。
ここの値はパッケージ名ではなく、自分が区別がつくものであれば何でも大丈夫です(後から変更可能です)。
AdMobにアプリを追加する方法
「次: 広告ユニットを作成」をクリックします。
AdMobにアプリを追加した図
今回はバナー広告を表示する例を説明しますので、バナーを選択します。
AdMobでバナー広告ユニットを設定する
広告ユニット名を入力して「広告ユニットを作成」をクリックします。
ここでの広告ユニット名は後でレポートに表示されるだけの値ですので、自分で区別のつくものであれば何でも良いです。
AdMobでバナー広告ユニットを設定する
表示されたアプリIDと広告ユニットIDをメモしておきます(後でも確認可能)。
AdMobでバナー広告ユニットを設定する
スポンサーリンク

Firebaseのアカウントを作成する

Firebaseのアカウントを持っていない場合は以下のURLからアカウントを作成します。
Gooleアカウントを用いてログインします。
https://console.firebase.google.com/
スポンサーリンク

Android StudioでAdmobを導入する

Android Studioにてツールバー -> Tools -> Firebase でFirebase管理画面を開きます。
その中のAdmobを選択し、「Add a banner ad to your app」をクリックします。
AndroidStudioでFirebaseツールを使用してAdMobバナー広告を実装する
「Conntect to Firebase」をクリックして、Firebaseとプロジェクトを接続します。
(ブラウザが開かれて、Googleアカウント選択画面が表示された場合は、Firebaseアカウント作成で使用したGoogleアカウントを選択します)
AndroidStudioでFirebaseに接続する
成功すると「Connected」と表示されます。
AndroidStudioでFirebaseに接続する
次に「Add AdMob to your app」をクリックします。
AndroidStudioでAdMobを実装する
「Accept Changes」をクリックします。すると、プロジェクトレベルとアプリレベルのbuiold.gradleに自動的にAdmob関連のコードが追加されます。
AndroidStudioでAdMobを実装する
以上でAdmobの導入は完了です。次にバナー表示のコードを実装します。
スポンサーリンク

コードの実装

後で使用するのでをAdMobのアプリIDとバナーのユニット広告IDを文字列リソースに追加しておきます。

string.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="ads_AppId">ca-app-pub-XXXXXXXXXXXXXXX~XXXXXXXXXXX</string>
    <string name="ads_UnitId_Banner">ca-app-pub-XXXXXXXXXXXX/XXXXXXXXX</string>
</resources>
まず、AndroidManifest.xmlにアプリIDを追加します(※この手順は2018/10頃に追加されました)。

AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.areseiproject">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="@string/ads_AppId"
            />
        
    </application>
</manifest>
次にActivity.xmlに広告ビューを追加します。

Rootのビューに「xmlns:ads=”http://schemas.android.com/apk/res-auto”」を追加した上で、AdViewビューを追加します。

ads:adSizeにはバナーのサイズを指定します。
指定可能なバナーサイズは以下の通りです。
サイズ説明AdSize の定数値
320×50バナーBANNER
320×100バナー(大)LARGE_BANNER
300×250IAB レクタングル(中)MEDIUM_RECTANGLE
468×60IAB フルサイズ バナーFULL_BANNER
728×90IAB ビッグバナーLEADERBOARD
画面の幅×32|50|90スマートバナーSMART_BANNER

ads:adUnitIdにはAdmobの広告ユニットIdを指定します。
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity"
    >

    <com.google.android.gms.ads.AdView
        android:id="@+id/adv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        ads:adSize="BANNER"
        ads:adUnitId="@string/ads_UnitId_Banner"
        />

</LinearLayout>
最後にActivity.javaにコードを実装します。
MobileAds.initializeでアプリIDを登録後、広告リクエストAdRequestオブジェクトを作成して、AdView.loadAdで広告をロードします。

MainActivity.java
public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        MobileAds.initialize(this, getString(R.string.ads_AppId));
        AdView adv = findViewById(R.id.adv);
        AdRequest adq = new AdRequest.Builder()
                .build();
        adv.loadAd(adq);

    }
}
これでバナー広告を表示するためのコードの実装は完了ですが、
以下の記事にも書いたように、AdMob実装直後やリクエストが少ないうちは広告は表示されません。 そこで、ここではテスト広告を表示してみましょう。
上記までのコードを実装した状態でアプリをデバッグ起動します。
すると、以下のようなデバッグコンソールに以下のメッセージが表示されます(テストデバイスIDは環境によって異なります)。
I/Ads: Use AdRequest.Builder.addTestDevice("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX") to get test ads on this device.
メッセージに従って、コードを追加します。

MainActivity.java
public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        MobileAds.initialize(this, getString(R.string.ads_AppId));
        AdView adv = findViewById(R.id.adv);
        AdRequest adq = new AdRequest.Builder()
                .addTestDevice("XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX") //これを追加
                .build();
        adv.loadAd(adq);

    }
}
以下のようにテスト広告が表示されれば成功です。
原則としてデバッグ中はテスト広告にしましょう(※正規の広告を自分で多数回表示するとブラックリストに入れられます)。
実装したAdMobテストバナー広告
スポンサーリンク

バナー設置位置の注意点

バナー設置位置にはAdMobでの禁止事項があるため注意が必要です。
守らないとブラックリスト入りされて広告が表示されなくなります。
禁止事項の概要としては「誤クリック狙いは駄目」ということです。
詳しくはこのページを参照ください。
スポンサーリンク

広告が表示されないときは?

「広告を実装したつもりだけど表示されない!」という場合は
以下の記事によくある原因と対処方法をまとめましたので、そちらを参照ください。
スポンサーリンク

まとめ

この記事ではFirebaseを用いてAdmobバナー広告を実装する方法を説明しました。
Androidアプリ開発
スポンサーリンク
Androidアプリ開発 記事一覧
Androidアプリ開発 記事一覧
Androidアプリ開発の記事一覧を以下にまとめています。
良かったらご覧ください。

Androidアプリ開発 記事一覧
カテゴリ広告: Androidアプリ開発
スポンサーリンク: Androidアプリ開発を個人レッスンで学ぶなら...?
Androidアプリ開発は一人で学んでいても限界があります。
そこでオススメなのがオンラインでAndroidアプリ開発を学べる「コードキャンプ」。
個人レッスンで丁寧に教えてくれます。

無料レッスン体験も可能なので、まずは無料体験から試してみてはいかがでしょうか?

Androidアプリ開発個人レッスン
一般広告: モバイルバッテリー
スポンサーリンク
Aresei-note
タイトルとURLをコピーしました