ネイティブ広告とカスタム レンダリング

この機能は現在、ベータ版での公開となっております。ベータテストへの参加をご希望の場合は、アカウント マネージャーにお問い合わせください。ベータテストが完了しましたら、すべてのパブリッシャー様がこの機能をご利用いただけるようになります。

ネイティブ広告のカスタム レンダリングを導入する詳しい手順については、コードラボをご覧ください。

このガイドでは、Google Mobile Ads SDK を使用して Android アプリに DFP ネイティブ広告を実装する方法と、その過程で注意すべき事項を説明します。

前提条件

このガイドは、Google Mobile Ads SDK についてある程度の知識をお持ちの方を対象としています。Google Mobile Ads SDK についてあまりご存じでない場合は、スタートガイドをお読みください。

ネイティブ広告とは

ネイティブ広告とは、プラットフォームに由来する UI コンポーネントを通じてユーザーに表示される広告のことです。作成済みのレイアウトと同じ種類のビューで表示され、ユーザー エクスペリエンスの視覚デザインに溶け込むようフォーマットされます。コーディングの面では、ネイティブ広告の読み込み時に、アプリが広告のアセットを含む NativeAd オブジェクトを受け取ります。そして(SDK ではなく)アプリで広告表示の処理が行われます。

システム定義のネイティブ広告フォーマット

ネイティブ広告には、アプリ インストール広告とコンテンツ広告の 2 つのシステム定義フォーマットがあります。アプリ インストール広告は NativeAppInstallAd で、コンテンツ広告は NativeContentAd で表されます。これらのオブジェクトには、ネイティブ広告のアセットが格納されています。

カスタムのネイティブ広告フォーマット

DFP をご利用のパブリッシャー様は、システム定義のネイティブ広告フォーマットの作成だけでなく、アセットのカスタムリストを定義することで、ご自身のネイティブ広告フォーマットも作成できます。これはカスタムのネイティブ広告フォーマットと呼ばれ、作成済みの広告と一緒に使用できます。カスタムのネイティブ広告フォーマットを使用すると、任意の構造のデータをアプリに渡すことができます。カスタムのネイティブ広告は NativeCustomTemplateAd オブジェクトで表されます。

システム定義の広告フォーマットの読み込み

ネイティブ広告の読み込みには AdLoader クラスを使用します。このクラスには、作成時にカスタマイズするための独自の Builder クラスが含まれます。AdLoader のビルド中にリスナーを追加することで、アプリで受信の準備ができているネイティブ広告のタイプが指定され、AdLoader ではこのタイプの広告だけがリクエストされるようになります。

AdLoader の作成

次のコードは、1 回のリクエストでアプリ インストール広告かコンテンツ広告のどちらかを読み込む AdLoader の作成方法です。

AdLoader adLoader = new AdLoader.Builder(context, "/6499/example/native")
    .forAppInstallAd(new OnAppInstallAdLoadedListener() {
        @Override
        public void onAppInstallAdLoaded(NativeAppInstallAd appInstallAd) {
            // Show the app install ad.
        }
    })
    .forContentAd(new OnContentAdLoadedListener() {
        @Override
        public void onContentAdLoaded(NativeContentAd contentAd) {
            // Show the content ad.
        }
    })
    .withAdListener(new AdListener() {
        @Override
        public void onAdFailedToLoad(int errorCode) {
            // Handle the failure by logging, altering the UI, etc.
        }
    })
    .withNativeAdOptions(new NativeAdOptions.Builder()
            // Methods in the NativeAdOptions.Builder class can be
            // used here to specify individual options settings.
            .build())
    .build();

個々の広告フォーマットに対する準備

上記の最初のメソッドでは、ネイティブ広告の各タイプに対し AdLoader を次のように準備します。

forAppInstallAd このメソッドを呼び出すと、アプリ インストール広告をリクエストするように AdLoader が設定されます。広告が正常に読み込まれた場合、リスナー オブジェクトの onAppInstallAdLoaded メソッドが呼び出されます。

forContentAd このメソッドは forAppInstallAd と同様に動作しますが、対象となるのはコンテンツ広告です。広告が正常に読み込まれた場合、リスナー オブジェクトの onContentAdLoaded メソッドが呼び出されます。

AdLoader に複数のネイティブ広告フォーマットのハンドラがあっても、SDK が広告をリクエストするのは 1 回だけです。パブリッシャー様の収益が最大化されるよう Google が選択した広告が返されます。

AdLoader での AdListener の使用

上記の AdLoader の作成時には、AdListener を設定するための関数である withAdListener も含めます。この手順は省略可能です。メソッドには唯一のパラメータとして AdListener が含まれます。このパラメータは、広告のライフサイクル イベントの発生時に AdLoader からコールバックを受け取ります。

.withAdListener(new AdListener() {
  // AdListener callbacks like OnAdFailedToLoad, OnAdOpened, and so on,
  // can be overridden here.
})

AdListeners のネイティブ広告での動作と、バナーやインタースティシャルでの動作には、1 つの大きな違いがあります。AdLoader には広告の読み込み時に使用する、フォーマットに固有な独自のリスナー(OnAppInstallAdLoadedListener など)があるため、ネイティブ広告が正常に読み込まれたときに AdListener から onAdLoaded メソッドは呼び出されません

NativeAdOptions

上記の AdLoader の作成時に含める最後の関数は withNativeAdOptions です。これも省略可能なメソッドです。

.withNativeAdOptions(new NativeAdOptions.Builder()
        // Methods in the NativeAdOptions.Builder class can be
        // used here to specify individual options settings.
        .build()
)

NativeAdOptions オブジェクトを使用すると、アプリではリクエストに使用する特定のオプションを設定できます。その Builder クラスには、インスタンスの作成時に使用される次のメソッドがあります。

setReturnUrlsForImageAssets DrawableUri を格納する NativeAd.Image のインスタンスを通じて、ネイティブ広告の画像アセットが返されます。このオプションをデフォルトの false に設定した場合、SDK で自動的に画像アセットが取得され、DrawableUri が設定されます。ただし、このオプションを true に設定した場合、SDK で Uri フィールドのみが設定され、ご自身の裁量で実際の画像をダウンロードできます。

setImageOrientation クリエイティブの中には、端末の向きが異なる場合でも対応できるよう、複数の画像が含まれているものがあります。NativeAdOptions 方向定数(ORIENTATION_PORTRAITORIENTATION_LANDSCAPEORIENTATION_ANY)のどれかを指定してこのメソッドを呼び出すと、向きを特定して画像がリクエストされます。このメソッドを呼び出さない場合は、デフォルト値の ORIENTATION_ANY が使用されます。

setImageOrientation を使用して画像の向きを横向きか縦向きに設定した場合、その向きと一致する画像が SDK によって画像アセット配列でまず配置されます。一致する画像がなければ、一致しない画像が配置されます。片方の向きしか利用できない広告もあるため、アプリでは横向きと縦向きの両方の画像を処理できるようにしてください。

setRequestMultipleImages 画像アセットには、1 枚の画像だけではなく、一連の複数の画像が含まれるものもあります。この値を true に設定した場合、複数の画像を含むアセットで、すべての画像を表示する準備ができていることがアプリで示されます。この値をデフォルトの false に設定した場合、一連の複数の画像を含むアセットの最初の画像だけを表示するよう、アプリから SDK に指示されます。

AdLoader の作成時に withNativeAdOptions が呼び出されない場合は、各オプションのデフォルト値が使用されます。

setAdChoicesPlacement()

AdChoices オーバーレイは、デフォルトでは右上隅に配置されます。オーバーレイのレンダリング位置をアプリで変更するには、プロパティを次のいずれかに設定します。

  • ADCHOICES_TOP_LEFT
  • ADCHOICES_TOP_RIGHT
  • ADCHOICES_BOTTOM_RIGHT
  • ADCHOICES_BOTTOM_LEFT

ネイティブ広告の読み込み

AdLoader の作成が完了したら、その loadAd メソッドを呼び出して広告をリクエストします。

adLoader.loadAd(new PublisherAdRequest.Builder().build());

AdLoaders では、バナーやインタースティシャルの場合と同じ PublisherAdRequest クラスが使用されます。他の広告タイプの場合と同様に、このクラスのメソッドを使用してターゲット設定情報を追加できます。

1 つの AdLoader で複数の広告をリクエストできますが、1 回に 1 つずつリクエストする必要があります。AdLoader を再利用する場合は、各リクエストが完了するのを待ってから、loadAd を再度呼び出して次のリクエストを開始するようにします。複数の広告を同時にリクエストする必要がある場合は、必ず複数の AdLoader オブジェクトを使用するようにします。

広告をリクエストするタイミング

ネイティブ広告を表示するアプリでは、実際に表示する前に広告をリクエストできます。通常はこの方法がおすすめです。たとえば、ネイティブ広告を含んだ項目のリストを表示するアプリでは、リスト全体に対してネイティブ広告を読み込むことができます。ユーザーが画面をスクロールした後にのみ表示される広告や、まったく表示されない可能性がある広告があってもかまいません。

あらかじめ広告を取得しておくことはよい方法ですが、表示されない古い広告をいつまでも放置しないことが重要です。1 時間以上表示されないまま保持されているネイティブ広告オブジェクトは破棄し、新しいリクエストを行って、新しい広告に置き換える必要があります。

システム定義の広告フォーマットの表示

ネイティブ広告が読み込まれると、対応する広告フォーマットのリスナーが SDK で呼び出されます。次にアプリが広告を表示することになりますが、必ずしもすぐに表示する必要はありません。システム定義の広告フォーマットの表示を容易にするために、SDK には便利なリソースが用意されています。

広告ビュークラス

各システム定義フォーマットには、対応する広告ビュークラスがあります。アプリ インストール広告用の NativeAppInstallAdView と、コンテンツ広告用の NativeContentAdView です。これらの広告ビュークラスは、対応するフォーマットのネイティブ広告でルートとして使用する必要がある ViewGroups です。たとえば、1 つの NativeContentAdView は、1 つのコンテンツ広告に対応しています。その広告のアセットを表示するために使用するそれぞれのビュー(スクリーンショット アセットを表示する ImageView など)は、NativeContentAdView オブジェクトの子にする必要があります。

RelativeLayout を使用してアセットビューを表示するコンテンツ広告のビュー階層は、次のようになります。

広告ビュークラスには、個々のアセットで使用されるビューを登録するためのメソッドと、NativeAd オブジェクト自体を登録するためのメソッドも用意されています。この方法でビューを登録することにより、SDK で次のようなタスクを自動的に処理できます。

  • クリックの記録
  • インプレッションの記録(画面に最初のピクセルが表示されたとき)
  • ネイティブ広告のバックフィル クリエイティブに対する AdChoices オーバーレイの表示

AdChoices オーバーレイ

AdChoices オーバーレイは、バックフィル広告が返されたときに SDK によって広告ビューに追加されます。アプリでネイティブ広告のバックフィルを使用する場合は、AdChoices ロゴが自動的に挿入されるため、ネイティブ広告ビュー内の位置を指定してスペースを確保します。また、AdChoices オーバーレイがすぐに判別できることが重要なため、適切な背景色と背景画像を選択します。オーバーレイの表示や機能について、詳しくはネイティブ広告のバックフィル実装のガイドラインをご覧ください。

コード例

システム定義のネイティブ広告フォーマットを表示する手順は、次のとおりです。

  1. 適切な広告ビュークラスのインスタンスを作成します。
  2. 表示する各広告アセットに対して、次の処理を行います。
    1. ネイティブ広告オブジェクトのアセットにアセットビューを設定します。
    2. ViewGroup クラスでアセットビューを登録します。
  3. ViewGroup クラスでネイティブ広告オブジェクトを登録します。

次に示すのは、NativeContentAd を表示する関数の例です。

private void displayContentAd(ViewGroup parent, NativeContentAd contentAd) {
    // Inflate a layout and add it to the parent ViewGroup.
    LayoutInflater inflater = (LayoutInflater) parent.getContext()
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    NativeContentAdView adView = (NativeContentAdView) inflater
            .inflate(R.layout.my_content_ad, parent);

    // Locate the view that will hold the headline, set its text, and call the
    // NativeContentAdView's setHeadlineView method to register it.
    TextView headlineView = (TextView) adView.findViewById(R.id.contentad_headline);
    headlineView.setText(contentAd.getHeadline());
    adView.setHeadlineView(headlineView);

    ...
    // Repeat the above process for the other assets in the NativeContentAd
    // using additional view objects (Buttons, ImageViews, etc).
    ...

    // Call the NativeContentAdView's setNativeAd method to register the
    // NativeAdObject.
    adView.setNativeAd(contentAd);

    // Place the AdView into the parent.
    parent.addView(adView);
}

タスクごとにコードを確認してみましょう。

XML レイアウトの利用

LayoutInflater inflater = (LayoutInflater) parent.getContext()
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
NativeContentAdView adView = (NativeContentAdView) inflater
        .inflate(R.layout.my_content_ad, parent);

この例では、コンテンツ広告を表示するビューを含む XML レイアウトを利用して、ルート要素である NativeContentAdView への参照を配置しています。はじめはこれが便利ですが、フラグメントやアクティビティに含まれている既存の NativeContentAdView を再利用したり、レイアウト ファイルを使用せずにインスタンスを動的に作成したりすることもできます。

アセットビューの設定と登録

TextView headlineView = (TextView) adView.findViewById(R.id.contentad_headline);
headlineView.setText(contentAd.getHeadline());
adView.setHeadlineView(headlineView);

ここでは、広告見出しの表示に使用するビューを指定し、contentAd から提供される文字列アセットでテキストを設定して、NativeContentAdView オブジェクトでビューを登録しています。ビューを指定し、値を設定して広告ビュークラスで登録するこのプロセスは、ネイティブ広告オブジェクトから提供される各アセットで繰り返す必要があります。

ネイティブ広告オブジェクトの登録

adView.setNativeAd(contentAd);

最後のこの手順では、ネイティブ広告オブジェクトを表示するビューで、そのオブジェクトを登録します。

カスタムのネイティブ広告フォーマットの読み込み

AdLoader の作成

システム定義のネイティブ広告フォーマットと同様に、カスタムのネイティブ広告フォーマットは AdLoader クラスを使用して読み込みます。

AdLoader adLoader = new AdLoader.Builder(context, "/6499/example/native")
    .forCustomTemplateAd("10063170",
      new NativeCustomTemplateAd.OnCustomTemplateAdLoadedListener() {
          @Override
          public void onCustomTemplateAdLoaded(NativeCustomTemplateAd ad) {
              // Show the custom template and record an impression.
          }
      },
      new NativeCustomTemplateAd.OnCustomClickListener() {
          @Override
          public void onCustomClick(NativeCustomTemplateAd ad, String s) {
              // Handle the click action
          }
      })
    .withAdListener( ... )
    .withNativeAdOptions( ... )
    .build();

アプリ インストール広告のリクエストのために forAppInstallAd メソッドで AdLoader を設定するのとほぼ同じように、カスタム テンプレート広告を扱うために forCustomTemplateAd メソッドで設定します。このメソッドには、次の 3 つのパラメータが渡されます。

  • AdLoader でのリクエストが必要なカスタム テンプレートのテンプレート ID。 カスタムの各ネイティブ広告フォーマットには、テンプレート ID 値が割り当てられています。このパラメータは、アプリで AdLoader がリクエストするテンプレートを表します。
  • 広告が正常に読み込まれたときに呼び出される OnCustomTemplateAdLoadedListener
  • ユーザーが広告をタップするか、クリックしたときに呼び出される OnCustomClickListener(省略可) このリスナーの詳細については、以下の「クリックとインプレッションの処理」セクションをご覧ください。

1 つの広告ユニットを設定すれば、複数のクリエイティブ テンプレートで利用できるため、一意のテンプレート ID で forCustomTemplateAd を複数回呼び出して、表示される可能性がある複数のカスタムのネイティブ広告フォーマットに AdLoader を用意することができます。

テンプレート ID

カスタムのネイティブ広告フォーマットを一意に参照するために使用するテンプレート ID は、DFP UI に表示されます([配信] タブの [クリエイティブ] から [ネイティブ広告フォーマット] を選択)。

カスタムの各ネイティブ広告フォーマットのテンプレート ID は、名前の下に表示されます。名前をクリックすると、詳細画面が開き、テンプレートのフィールドに関する情報が表示されます。

ここで、各フィールドの追加、編集、削除を行うことができます。右側の [変数 ID] 列にご注意ください。変数 ID は、個々のアセットへのアクセスに使用します。詳しくは、次のセクションで説明します。

カスタムのネイティブ広告フォーマットの表示

カスタムのネイティブ広告フォーマットがシステム定義のネイティブ広告フォーマットと異なるのは、パブリッシャー様がご自身の「テンプレート」、つまり広告を構成するアセットのリストを定義できる点です。そのため、カスタムのネイティブ広告フォーマットを表示するプロセスは、システム定義のフォーマットの場合と次の点で異なります。

  1. DFP で定義したカスタムのネイティブ広告フォーマットがすべて処理されるため、NativeCustomTemplateAd クラスにはアセットに対する名前付きの「ゲッター」がありません。代わりに、テンプレート フィールドの変数 ID をパラメータとする getTextgetImage などのメソッドが用意されています。
  2. NativeCustomTemplateAd で使用するための NativeContentAdView のような専用広告ビュークラスはありません。FrameLayout や RelativeLayout のほか、ユーザー エクスペリエンスに合う任意のクラスを自由に使用できます。
  3. 専用 ViewGroup クラスがないため、広告のアセットの表示に使用するビューを登録する必要はありません。これにより、広告を表示するためのコードが数行減りますが、後でクリックを処理するための作業が追加で必要になります。

次に示すのは、NativeCustomTemplateAd を表示する関数の例です。

public void displayCustomTemplateAd (ViewGroup parent,
                                     NativeCustomTemplateAd customTemplateAd) {
    // Inflate a layout and add it to the parent ViewGroup.
    LayoutInflater inflater = (LayoutInflater) parent.getContext()
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    View adView = inflater.inflate(R.layout.custom_template_ad, parent);

    // Locate the TextView that will hold the value for "Headline" and
    // set its text.
    TextView myHeadlineView = (TextView) adView.findViewById(R.id.headline);
    myHeadlineView.setText(customTemplateAd.getText("Headline"));

    // Locate the ImageView that will hold the value for "MainImage" and
    // set its drawable.
    Button myMainImageView = (ImageView) adView.findViewById(R.id.main_image);
    myMainImageView.setImageDrawable(
            nativeCustomTemplateAd.getImage("MainImage").getDrawable());

    ...
    // Continue locating views and displaying assets until finished.
    ...
}

カスタムのネイティブ広告フォーマットのクリックとインプレッションの処理

カスタムのネイティブ広告フォーマットでは、アプリによって SDK にインプレッションが記録され、クリックがレポートされます。

インプレッションの記録

カスタム テンプレート広告のインプレッションを記録するには、対応する NativeCustomTemplateAdrecordImpression メソッドを呼び出します。

myCustomTemplateAd.recordImpression();

アプリが同じ広告に対し誤ってメソッドを 2 回呼び出しても、SDK が 1 回のリクエストで重複しているインプレッションの記録を自動的に防止します。

クリックの記録

アセットビューでクリックが発生したことを SDK にレポートするには、対応する NativeCustomTemplateAdperformClick メソッドを呼び出し、クリックされたアセットの名前を渡します。たとえば、カスタム テンプレートに「MainImage」という名前のアセットがあり、そのアセットに対応する ImageView のクリックをレポートをする場合、コードは次のようになります。

myCustomTemplateAd.performClick("MainImage");

このメソッドは、広告に関連付けられているすべてのビューに呼び出す必要はありません。「Caption」という名前の別のフィールドがあり、表示されてもユーザーのクリックやタップには反応しない場合、そのアセットのビューにアプリで performClick を呼び出す必要はありません。

カスタム広告のクリック操作へのレスポンス

カスタム テンプレート広告がクリックされると、SDK が 3 つのレスポンスを次の順番で試行します。

  1. OnCustomClickListener がある場合は、AdLoader からそれを呼び出す。
  2. 各広告のディープリンクの URL でコンテンツ リゾルバの特定を試み、最初に特定したリゾルバを開始する。
  3. ブラウザを開き、広告の従来のリンク先 URL に移動する。

forCustomTemplateAd メソッドでは OnCustomClickListener が受け入れられます。リスナー オブジェクトを渡した場合、その onCustomClick メソッドが SDK で代わりに呼び出され、追加のアクションは実行されません。ただし、リスナーとして null 値を渡した場合、SDK は広告に登録されているディープリンクやリンク先 URL にフォールバックします。

カスタム クリック リスナーを使用すると、アプリでクリックへのレスポンスとして最適なアクションを決定できます(UI の更新、新しいアクティビティの開始、クリックの記録のみなど)。クリックの記録のみ行う例は次のとおりです。

AdLoader adLoader = new AdLoader.Builder(context, "/6499/example/native")
    .forCustomTemplateAd("10063170",
      new NativeCustomTemplateAd.OnCustomTemplateAdLoadedListener() {
        // Display the ad.
      },
      new NativeCustomTemplateAd.OnCustomClickListener() {
          @Override
          public void onCustomClick(NativeCustomTemplateAd ad, String assetName) {
            Log.i("MyApp", "A custom click just happened for " + assetName + "!");
          }
      }).build();

最初は、カスタム クリック リスナーがあることに違和感を持つかもしれません。クリックの発生をアプリで SDK に伝えたばかりなのに、なぜ SDK でレポートを返す必要があるのか、疑問に思うことでしょう。

この情報フローが有益な理由はいくつかありますが、最大の理由は SDK がクリックに対するレスポンスの管理を維持できることです。たとえば、SDK はクリエイティブに設定されているサードパーティのトラッキング URL を自動的に認識し、コードを追加することなくバックグラウンドの他のタスクを処理できます。

ネイティブ広告コードのテスト

直接販売のネイティブ広告

直接販売のネイティブ広告をテストするには、次の DFP 広告ユニット ID を使用します。

/6499/example/native

これは、アプリ インストール広告やコンテンツ広告のサンプルに加え、次のアセットを含むカスタムのネイティブ広告フォーマットでも利用できるように設定されています。

  • 広告見出し(テキスト)
  • MainImage(画像)
  • 説明(テキスト)

カスタムのネイティブ広告フォーマットのテンプレート ID は 10063170 です。

ネイティブ バックフィル広告

ネイティブ バックフィル広告の動作をテストするには、次の DFP 広告ユニットを使用します。

/6499/example/native-backfill

これは、AdChoices オーバーレイを含むアプリ インストール広告やコンテンツ広告のサンプルで利用できます。

広告の配信を開始する前に、実際の広告ユニットとテンプレート ID が参照されるよう、コードを更新してください。

フィードバックを送信...

SDK for DFP Users on Android
ご不明な点がありましたら、Google のサポートページをご覧ください。