Banner Ads

バナー広告は、アプリのレイアウト内の一部分を使用する長方形の画像かテキストの広告です。ユーザーがアプリを操作している間は画面に残り、一定の時間が経過すると自動的に更新されます。モバイル広告を初めて掲載する場合は、まずこの広告から始めるのが最適です。

このガイドでは、Ad Manager のバナー広告を Android アプリに組み込む方法について説明します。コード スニペットと設定方法のほか、バナーの適切なサイズ調整に関する情報や他の関連情報へのリンクも紹介します。

前提条件

PublisherAdView をレイアウトに追加する

バナーを表示するための最初のステップは、バナーを表示する ActivityFragment のレイアウトに PublisherAdView を配置することです。おすすめの方法は、対応する XML レイアウト ファイルに追加する方法です。以下の例では、Activity の一番下に PublisherAdView を配置しています。

main_activity.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingBottom="@dimen/activity_vertical_margin"
        tools:context=".MainActivity">

        <TextView android:text="@string/hello_world"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <com.google.android.gms.ads.doubleclick.PublisherAdView
            xmlns:ads="http://schemas.android.com/apk/res-auto"
            android:id="@+id/publisherAdView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_alignParentBottom="true"
            ads:adSize="BANNER"
            ads:adUnitId="/6499/example/banner">
        </com.google.android.gms.ads.doubleclick.PublisherAdView>

</RelativeLayout>

必須の属性は次のとおりです。

  • ads:adSize - 使用する広告サイズに設定します。定数値で定義された標準サイズを使用しない場合は、代わりにカスタムサイズを設定できます。詳しくは、下記のバナーサイズに関するセクションをご覧ください。
  • ads:adUnitId - 広告を表示するアプリの広告ユニットに割り当てられている一意の ID に設定します。複数のアクティビティでバナー広告を表示する場合は、それぞれ広告ユニットが必要となります。

別の方法として、PublisherAdView を次のようにプログラムで作成することもできます。

Java

PublisherAdView adView = new PublisherAdView(this);
adView.setAdSizes(AdSize.BANNER);
adView.setAdUnitId("/6499/example/banner");
// TODO: Add adView to your view hierarchy.

Kotlin

val adView = PublisherAdView(this)
adView.adSizes = AdSize.BANNER
adView.adUnitId = "/6499/example/banner"
// TODO: Add adView to your view hierarchy.

常にテスト広告でテストする

アプリの開発やテストでは実際の広告を使用せず、必ずテスト広告を使ってください。実際の広告でテストすると、アカウントが停止される場合があります。

テスト広告を読み込むには、次に示す Android バナー向けのテスト専用広告ユニット ID を使う方法が便利です。

/6499/example/banner

この ID は、すべてのリクエストに対してテスト広告を返す特別な ID で、アプリのコーディング、テスト、デバッグで自由に使うことができます。なお、テスト用 ID は、アプリを公開する前に必ずご自身の広告ユニット ID に置き換えてください。

Mobile Ads SDK のテスト広告の仕組みについてさらに詳しくは、テスト広告でご確認いただけます。

広告を読み込む

PublisherAdView を配置したら、次のステップとして広告を読み込みます。広告の読み込みは、PublisherAdView クラスの loadAd() メソッドで行います。このメソッドは、PublisherAdRequest パラメータを受け取ります。このパラメータには、1 つの広告リクエストに関するランタイムの情報(ターゲット設定情報など)が保持されています。

ActivityonCreate() メソッドで広告を読み込む方法について、次に例を示します。

MainActivity(抜粋)

Java

package ...

import ...
import com.google.android.gms.ads.doubleclick.PublisherAdRequest;
import com.google.android.gms.ads.doubleclick.PublisherAdView;

public class MainActivity extends AppCompatActivity {
    private PublisherAdView mPublisherAdView;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mPublisherAdView = findViewById(R.id.publisherAdView);
        PublisherAdRequest adRequest = new PublisherAdRequest.Builder().build();
        mPublisherAdView.loadAd(adRequest);
    }
}

Kotlin

package ...

import ...
import com.google.android.gms.ads.doubleclick.PublisherAdRequest
import com.google.android.gms.ads.doubleclick.PublisherAdView

class MainActivity : AppCompatActivity() {

    lateinit var mPublisherAdView : PublisherAdView

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        mPublisherAdView = findViewById(R.id.publisherAdView)
        val adRequest = PublisherAdRequest.Builder().build()
        mPublisherAdView.loadAd(adRequest)
    }
}

これで、アプリにバナー広告を表示できるようになりました。

広告イベント

広告の動作をより細かくカスタマイズするには、広告のライフサイクルで生じるさまざまなイベント(読み込み、開始、終了など)を考慮します。これらのイベントをリッスンするには、AdListener クラスを使用します。

AdListenerPublisherAdView を併用するには、setAdListener() メソッドを呼び出します。

Java

mPublisherAdView.setAdListener(new AdListener() {
    @Override
    public void onAdLoaded() {
        // Code to be executed when an ad finishes loading.
    }

    @Override
    public void onAdFailedToLoad(int errorCode) {
        // Code to be executed when an ad request fails.
    }

    @Override
    public void onAdOpened() {
        // Code to be executed when an ad opens an overlay that
        // covers the screen.
    }

    @Override
    public void onAdClicked() {
        // Code to be executed when the user clicks on an ad.
    }

    @Override
    public void onAdLeftApplication() {
        // Code to be executed when the user has left the app.
    }

    @Override
    public void onAdClosed() {
        // Code to be executed when the user is about to return
        // to the app after tapping on an ad.
    }
});

Kotlin

mPublisherAdView.adListener = object: AdListener() {
    override fun onAdLoaded() {
        // Code to be executed when an ad finishes loading.
    }

    override fun onAdFailedToLoad(errorCode : Int) {
        // Code to be executed when an ad request fails.
    }

    override fun onAdOpened() {
        // Code to be executed when an ad opens an overlay that
        // covers the screen.
    }

    override fun onAdClicked() {
        // Code to be executed when the user clicks on an ad.
    }

    override fun onAdLeftApplication() {
        // Code to be executed when the user has left the app.
    }

    override fun onAdClosed() {
        // Code to be executed when the user is about to return
        // to the app after tapping on an ad.
    }
}

AdListener のオーバーライド可能なメソッドは、それぞれ広告のライフサイクルで生じるイベントに対応しています。

オーバーライド可能なメソッド
onAdLoaded() onAdLoaded() メソッドは、広告の読み込みが完了すると実行されます。たとえば、広告が確実に読み込まれるまで、アクティビティまたはフラグメントに PublisherAdView が追加されないようにしたい場合は、このメソッドを使用できます。
onAdFailedToLoad() onAdFailedToLoad() メソッドは、パラメータを含む唯一のメソッドです。errorCode パラメータは、発生したエラーの種類を表します。このパラメータの値は、PublisherAdRequest クラスの定数として定義された、次のいずれかの値になります。
  • ERROR_CODE_INTERNAL_ERROR - 内部でエラーが発生している(広告サーバーから無効な応答を受け取った場合など)。
  • ERROR_CODE_INVALID_REQUEST - 広告リクエストが無効(広告ユニット ID が不適切だった場合など)。
  • ERROR_CODE_NETWORK_ERROR - ネットワーク接続が原因で広告をリクエストできなかった。
  • ERROR_CODE_NO_FILL - 広告リクエストは成功したものの、広告枠の不足が原因で広告が返されなかった。
onAdOpened() ユーザーが広告をタップしたときに呼び出されるメソッドです。
onAdLeftApplication() onAdOpened() の後にユーザーが別のアプリ(Google Play など)を起動し、現在のアプリがバックグラウンドに移動すると、このメソッドが呼び出されます。
onAdClosed() ユーザーが広告のリンク先 URL にアクセスした後にアプリに戻った場合は、このメソッドが呼び出されます。一時停止中のアクティビティを再開したり、アプリを操作可能な状態にするために必要な他の動作を実行したりするには、このメソッドを使用します。

標準のバナーサイズについては、以下の表をご覧ください。

サイズ(単位は dp、幅×高さ) 説明 対応デバイス AdSize の定数値
320×50 バナー スマートフォン、タブレット BANNER
320×100 バナー(大) スマートフォン、タブレット LARGE_BANNER
300×250 IAB レクタングル(中) スマートフォン、タブレット MEDIUM_RECTANGLE
468×60 IAB フルサイズ バナー タブレット FULL_BANNER
728×90 IAB ビッグバナー タブレット LEADERBOARD
指定された幅×最適な高さ アダプティブ バナー スマートフォン、タブレット なし
画面の幅×32|50|90 スマートバナー スマートフォン、タブレット SMART_BANNER
今後はスマートバナーに代わってアダプティブ バナーが使用される予定です。詳しくは、アダプティブ バナーをご覧ください。

カスタムのバナーサイズを定義するには、希望の AdSize を次のように設定します。

Java

AdSize adSize = new AdSize(300, 50);

Kotlin

val adSize = AdSize(300, 50)

カスタムの広告サイズ

Google アド マネージャーでは、標準の広告ユニットのほか、任意のサイズの広告ユニットをアプリ内で配信できます。広告リクエストで定義された広告サイズ(幅、高さ)は、アプリに表示される広告ビュー(次の例の PublisherAdView)のサイズと一致している必要があります。

例:

Java

// Define custom AdSize of 250x250 for PublisherAdView

AdSize customAdSize = new AdSize(250, 250);
PublisherAdView adView = new PublisherAdView(this);
adView.setAdSizes(customAdSize);

Kotlin

// Define custom AdSize of 250x250 for PublisherAdView

val customAdSize = AdSize(250, 250)
val adView = PublisherAdView(this)
adView.setAdSizes(customAdSize)

Android API デモアプリにカスタムの広告サイズを実装する方法については、アド マネージャーによる複数の広告サイズの実装例をご覧ください。

複数の広告サイズ

アド マネージャーでは、PublisherAdView に配信する広告サイズを複数指定できます。SDK にこの機能を実装する前に、同じ広告ユニットをターゲティングして、異なるサイズのクリエイティブを関連付けた広告申込情報を作成してください。

アプリで、複数の AdSize パラメータが setAdSizes に渡されるようにします。

Java

PublisherAdView adView = new PublisherAdView(this);
adView.setAdSizes(AdSize.BANNER, new AdSize(120, 20), new AdSize(250, 250));

Kotlin

val adView = PublisherAdView(this)
adView.setAdSizes(AdSize.BANNER, AdSize(120, 20), AdSize(250, 250))

更新時に PublisherAdView のサイズが変わった場合は、レイアウトが新しいサイズに合わせて自動的に調整されるようになります。

アプリでサポートされる広告サイズを変更することが必要になった場合は、setAdSizes と新しいサイズのリストを呼び出します。

Java

// Drop support for 120x20 ad size.
adView.setAdSizes(AdSize.BANNER, new AdSize(250, 250));

Kotlin

// Drop support for 120x20 ad size.
adView.setAdSizes(AdSize.BANNER, AdSize(250, 250))

PublisherAdView は、次の広告が返されるまで、最初のパラメータで渡されたサイズにデフォルトで設定されます。

XML レイアウト ファイルで ads:adSizes 属性を使用して複数の広告サイズを指定することもできます。

<com.google.android.gms.ads.doubleclick.PublisherAdView
   android:id="@+id/multiple_ad_sizes_view"
   android:layout_width="wrap_parent"
   android:layout_height="wrap_content"
   android:layout_alignParentBottom="true"
   android:layout_centerHorizontal="true"
   ads:adSizes="BANNER,120x20,250x250"
   ads:adUnitId="ad unit ID" />

Android API デモアプリに複数の広告サイズを実装する方法については、アド マネージャーによる複数の広告サイズの実装例をご覧ください。

インプレッションの手動カウント

インプレッションを記録するタイミングについて特別な条件がある場合は、インプレッションの信号をアド マネージャーに手動で送信できます。それには、広告を読み込む前に、手動によるインプレッションに対して PublisherAdRequest を有効にします。

Java

PublisherAdRequest adRequest = new PublisherAdRequest.Builder()
    .setManualImpressionsEnabled(true)
    .build();

Kotlin

val adRequest = PublisherAdRequest.Builder()
    .setManualImpressionsEnabled(true)
    .build()

広告が正常に返され、画面に表示されていることを確認したら、インプレッションを手動で記録します。

Java

mPublisherAdView.recordManualImpression();

Kotlin

mPublisherAdView.recordManualImpression()

アプリ内イベント

アプリ内イベントを利用することで、アプリのコードにメッセージを送信する広告を作成できます。アプリは、送信されたメッセージに基づいて、処理を行います。

アド マネージャー専用のアプリ内イベントをリッスンするには、AppEventListener を使用します。これらのイベントは、広告ライフサイクルのあらゆるタイミングで(onAdLoaded() が呼び出される前でも)発生する可能性があります。

Java

public interface AppEventListener {
  void onAppEvent(String name, String info);
}

Kotlin

interface AppEventListener {
    fun onAppEvent(name: String, info: String)
}

広告でアプリ内イベントが発生すると、void onAppEvent(String name, String info) が呼び出されます。

このインターフェースは、アクティビティやその他のオブジェクトによって次のように実装できます。

Java

import com.google.android.gms.ads.doubleclick.*;

public class BannerExample extends Activity implements AppEventListener {
}

Kotlin

import com.google.android.gms.ads.doubleclick.*

class BannerExample : Activity(), AppEventListener {
}

次に PublisherAdView に渡されます。

Java

adView.setAppEventListener(this);

Kotlin

adView.appEventListener = this

色名を含むアプリ内イベントに応じてアプリの背景色を変更する方法について、次に例を示します。

Java

@Override
public void onAppEvent(String name, String info) {
  if ("color".equals(name)) {
    if ("green".equals(info) {
      // Set background color to green.
    } else if ("blue".equals(info) {
      // Set background color to blue.
    } else {
      // Set background color to black.
    }
  }
}

Kotlin

override fun onAppEvent(name: String?, info: String?) {
    if (name == "color") {
        when (info) {
            "green" -> {
                // Set background color to green.
            }
            "blue" -> {
                // Set background color to blue.
            }
            else -> {
                // Set background color to black.
            }
        }
    }
}

また、対応するクリエイティブは次のとおりです。これは、色に関するアプリ内イベント メッセージをリスナーに送信します。

<html>
<head>
  <script src="//media.admob.com/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0px;
      left: 0px;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>

Android API デモアプリにアプリ内イベントを実装する方法については、アド マネージャーによるアプリ内イベントの実装例をご覧ください。

Additional resources

Samples on GitHub

Mobile Ads Garage video tutorials