Native Ads

UnifiedNativeAd を表示する

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

UnifiedNativeAdView クラス

UnifiedNativeAd フォーマットには、対応する UnifiedNativeAdView クラスがあります。このクラスは、UnifiedNativeAd のルートとして使用する ViewGroup です。1 つの UnifiedNativeAdView が 1 つの統合型ネイティブ広告に対応します。その広告のアセットの表示に使われるビュー（スクリーンショット アセットを表示する ImageView など）はすべて、UnifiedNativeAdView オブジェクトの子になります。

LinearLayout を使ってアセットビューを表示する統合型ネイティブ広告のビュー階層は、次のようになります。

<com.google.android.gms.ads.formats.UnifiedNativeAdView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <LinearLayout
    android:orientation="vertical"
    ... >
        <LinearLayout
        android:orientation="horizontal"
        ... >
          <ImageView
           android:id="@+id/ad_app_icon"
           ... />
          <TextView
            android:id="@+id/ad_headline"
            ... />
         </LinearLayout>

         // Other assets such as image or media view, call to action, etc follow.
         ...
    </LinearLayout>
</com.google.android.gms.ads.formats.UnifiedNativeAdView>

次のサンプルでは、UnifiedNativeAdView を作成して UnifiedNativeAd を入力しています。

Java

AdLoader.Builder builder = new AdLoader.Builder(this, "<your ad unit ID>")
    .forUnifiedNativeAd(new UnifiedNativeAd.OnUnifiedNativeAdLoadedListener() {
        @Override
        public void onUnifiedNativeAdLoaded(UnifiedNativeAd unifiedNativeAd) {
            // Assumes you have a placeholder FrameLayout in your View layout
            // (with id fl_adplaceholder) where the ad is to be placed.
            FrameLayout frameLayout =
                findViewById(R.id.fl_adplaceholder);
            // Assumes that your ad layout is in a file call ad_unified.xml
            // in the res/layout folder
            UnifiedNativeAdView adView = (UnifiedNativeAdView) getLayoutInflater()
                .inflate(R.layout.ad_unified, null);
            // This method sets the text, images and the native ad, etc into the ad
            // view.
            populateUnifiedNativeAdView(unifiedNativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});

Kotlin

val builder = AdLoader.Builder(this, "<your ad unit ID>")
    .forUnifiedNativeAd { unifiedNativeAd ->
        // Assumes that your ad layout is in a file call ad_unified.xml
        // in the res/layout folder
        val adView = layoutInflater
                .inflate(R.layout.ad_unified, null) as UnifiedNativeAdView
        // This method sets the text, images and the native ad, etc into the ad
        // view.
        populateUnifiedNativeAdView(unifiedNativeAd, adView)
        // Assumes you have a placeholder FrameLayout in your View layout
        // (with id ad_frame) where the ad is to be placed.
        ad_frame.removeAllViews()
        ad_frame.addView(adView)
    }

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

  • クリックの記録
  • インプレッションの記録（画面に最初のピクセルが表示されたとき）
  • AdChoices オーバーレイの表示（現在一部のパブリッシャー様に限定で公開されているネイティブ バックフィル クリエイティブの場合）

AdChoices オーバーレイ

AdChoices オーバーレイは、バックフィル広告が返されたときに SDK によって広告ビューに追加されます。アプリでネイティブ広告のバックフィルを使用する場合は、AdChoices ロゴが自動的に挿入されるため、ネイティブ広告ビューのご希望の隅のスペースを空けておいてください。また、AdChoices オーバーレイは見やすいことが重要であるため、その背景色と背景画像は適切なものにしてください。オーバーレイの外観と機能について詳しくは、プログラマティック ネイティブ広告のためのガイドラインをご覧ください。

プログラマティック ネイティブ広告の帰属表示

プログラマティック ネイティブ広告を表示する場合は、広告の帰属表示を行って、そのビューが広告であることを示す必要があります。詳しくはポリシー ガイドラインをご覧ください。

サンプルコード

統合型ネイティブ広告を表示する手順は次のとおりです。

  1. UnifiedNativeAdView クラスのインスタンスを作成します。
  2. 表示する広告アセットすべてについて、次の処理を行います。
    1. アセットビューに広告オブジェクト内のアセットを入力します。
    2. アセットビューを ViewGroup クラスに登録します。
  3. ネイティブ広告レイアウトに大きなメディア アセットが含まれている場合は、MediaView を登録します。
  4. 広告オブジェクトを ViewGroup クラスに登録します。

UnifiedNativeAd を表示する関数の例を次に示します。

Java

private void displayUnifiedNativeAd(ViewGroup parent, UnifiedNativeAd ad) {

    // Inflate a layout and add it to the parent ViewGroup.
    LayoutInflater inflater = (LayoutInflater) parent.getContext()
            .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    UnifiedNativeAdView adView = (UnifiedNativeAdView) inflater
            .inflate(R.layout.my_ad_layout, parent);

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

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

    // If the app is using a MediaView, it should be
    // instantiated and passed to setMediaView. This view is a little different
    // in that the asset is populated automatically, so there's one less step.
    MediaView mediaView = (MediaView) adView.findViewById(R.id.ad_media);
    adView.setMediaView(mediaView);

    // Call the UnifiedNativeAdView's setNativeAd method to register the
    // NativeAdObject.
    adView.setNativeAd(ad);

    // Ensure that the parent view doesn't already contain an ad view.
    parent.removeAllViews();

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

Kotlin

fun displayUnifiedNativeAd(parent: ViewGroup, ad: UnifiedNativeAd) {

    // Inflate a layout and add it to the parent ViewGroup.
    val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
            as LayoutInflater
    val adView = inflater.inflate(R.layout.my_ad_layout, parent) as UnifiedNativeAdView

    // Locate the view that will hold the headline, set its text, and use the
    // UnifiedNativeAdView's headlineView property to register it.
    val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
    headlineView.text = ad.headline
    adView.headlineView = headlineView

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

    val mediaView = adView.findViewById<MediaView>(R.id.ad_media)
    adView.mediaView = mediaView

    // Call the UnifiedNativeAdView's setNativeAd method to register the
    // NativeAdObject.
    adView.setNativeAd(ad)

    // Ensure that the parent view doesn't already contain an ad view.
    parent.removeAllViews()

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

個々のタスクのコードは次のようになります。

レイアウトの拡張

Java

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

Kotlin

val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
        as LayoutInflater
val adView = inflater.inflate(R.layout.my_ad_layout, parent) as UnifiedNativeAdView

この例では、統合型ネイティブ広告の表示用ビューを含む XML レイアウトを拡張し、UnifiedNativeAdView への参照を配置しています。このほか、フラグメントまたはアクティビティに既存の UnifiedNativeAdView があればそれを再利用する方法や、レイアウト ファイルを使わずにインスタンスを動的に作成する方法もあります。

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

このサンプルコードでは、広告見出しの表示に使うビューを特定してから、広告オブジェクトで提供される文字列アセットを使ってテキストを設定し、UnifiedNativeAdView オブジェクトに登録しています。

Java

TextView headlineView = adView.findViewById<TextView>(R.id.ad_headline);
headlineView.setText(ad.getHeadline());
adView.setHeadlineView(headlineView);

Kotlin

val headlineView = adView.findViewById<TextView>(R.id.ad_headline)
headlineView.text = ad.headline
adView.headlineView = headlineView

ビューを特定して値を設定し、広告ビュークラスに登録するこのプロセスは、アプリが表示するネイティブ広告オブジェクトで提供されるアセットごとに繰り返す必要があります。

クリックの処理

前のセクションで説明したように、広告ビューアセットに対するクリックは、アセットビューの設定と登録が適切に行われていれば、SDK によって処理されます。

次に、広告リスナーを使ってクリック イベントをモニタリングするサンプルを示します。

Java

AdLoader adLoader = new AdLoader.Builder(context, "/6499/example/native")
    ...
    .withAdListener(new AdListener() {
        @Override
        public void onAdFailedToLoad(int errorCode) {
            // Handle the failure by logging, altering the UI, and so on.
        }
        @Override
        public void onAdClicked() {
            // Log the click event or other custom behavior.
        }
    })
    .build();

Kotlin

val adLoader = AdLoader.Builder(this, "/6499/example/native")
    ...
    .withAdListener(object : AdListener() {
        override fun onAdFailedToLoad(errorCode: Int) {
            // Handle the failure by logging, altering the UI, and so on.
        }
    })
    .build()

MediaView の登録

MediaView はメインのメディア アセット（動画または画像）を表示するための特別な View です。

MediaView は、XML レイアウトで定義することも、動的に作成することもできます。他のアセットビューの場合と同様に、NativeAdView のビュー階層内に配置してください。MediaView を使用するアプリは、次のように NativeAdView に登録する必要があります。

Java

MediaView mediaView = adView.findViewById(R.id.ad_media);
adView.setMediaView(mediaView);

Kotlin

adView.mediaView = adView.findViewById<MediaView>(R.id.ad_media)

他のすべてのアセットビューと同様に、メディアビューのコンテンツも設定する必要があります。 この設定には、mediaContent プロパティを使用します。UnifiedNativeAd の mediaContent プロパティには、MediaView に渡すことのできるメディア コンテンツが含まれています。

メディアビューのメディア コンテンツを設定するコード スニペットは次のとおりです。

Java

mediaView.setMediaContent(nativeAd.getMediaContent());

Kotlin

mediaView.mediaContent = nativeAd.mediaContent

ImageScaleType の設定

MediaView クラスには、画像を表示する際に使用できる ImageScaleType プロパティがあります。MediaView で画像のスケーリング方法を変更する場合は、対応する ImageView.ScaleType を MediaView の setImageScaleType() メソッドを使って設定します。

たとえば、画像を MediaView のビューいっぱいに表示するには、次のように設定します（広告に動画がない場合）。

Java

mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);

Kotlin

mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP

GitHub サンプル

GitHub リポジトリでは、ネイティブ カスタム レンダリング広告の完全な実装サンプルを、Java と Kotlin の両方でご覧いただけます。

Google アド マネージャーのネイティブのサンプルをダウンロード

MediaContent

MediaContent クラスは、MediaView クラスを使用して表示されるネイティブ広告のメディア コンテンツに関連するデータを保持します。MediaContent インスタンスで MediaView の mediaContent プロパティが設定されている場合:

  • 動画アセットがある場合は、その動画アセットがバッファリングされ、MediaView 内で再生されます。動画アセットの有無は、hasVideoContent() で確認できます。
  • 広告に動画アセットがない場合は、代わりに mainImage アセットがダウンロードされ、MediaView 内に配置されます。

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

最後に、ネイティブ広告オブジェクトを表示するビューに、オブジェクトを登録します。

Java

adView.setNativeAd(ad);

Kotlin

adView.setNativeAd(ad)

ネイティブ動画

一部のネイティブ広告には、画像、テキスト、数値に加え、動画アセットが含まれています。広告によっては動画アセットが含まれておらず、含まれている場合でも、必ずしもアプリに表示しなくてもかまいません。

動画の設定と表示をシンプルにするため、Mobile Ads SDK には次の動画関連クラスが用意されています。

VideoOptions

VideoOptions クラスを使うと、ネイティブ動画アセットの動作方法をアプリで設定できます。VideoOptions オブジェクトは、AdLoader の構成時に使う NativeAdOptions オブジェクトに割り当てる必要があります。次の例をご覧ください。

Java

VideoOptions videoOptions = new VideoOptions.Builder()
        .setStartMuted(false)
        .build();

NativeAdOptions adOptions = new NativeAdOptions.Builder()
        .setVideoOptions(videoOptions)
        .build();

AdLoader adLoader = new AdLoader.Builder(this, "/6499/example/native")
        .forUnifiedNativeAd( ... )
        .withNativeAdOptions(adOptions)
        .build();

Kotlin

val videoOptions = VideoOptions.Builder()
        .setStartMuted(false)
        .build()

val adOptions = NativeAdOptions.Builder()
        .setVideoOptions(videoOptions)
        .build()
val adLoader = AdLoader.Builder(this, "/6499/example/native")
        .forUnifiedNativeAd( ... )
        .withNativeAdOptions(adOptions)
        .build()

VideoOptions.Builder クラスで提供されているメソッドは、setStartMuted() メソッドだけです。これは動画アセットをミュート状態で開始すべきかどうかを SDK に伝えるメソッドで、デフォルト値は true です。

VideoController

VideoController クラスを使用すると、動画アセットに関する情報を取得できます。アプリで UnifiedNativeAd オブジェクトからコントローラへの参照を取得するには、getVideoController() メソッドを呼び出します。次の例をご覧ください。

Java

VideoController vc = nativeAd.getVideoController();

Kotlin

val vc = myNativeAd.videoController

このメソッドは常に VideoController オブジェクトを返します。広告内に動画アセットがない場合でも同様です。

VideoController には hasVideoContent() メソッドがあり、広告に動画アセットが含まれている場合は true、含まれていない場合は false を返します。

VideoController.VideoLifecycleCallbacks クラスを使って、動画アセットのライフサイクルでイベントが発生したときに通知を受け取ることもできます。次の例をご覧ください。

Java

VideoController vc = nativeAd.getVideoController();

vc.setVideoLifecycleCallbacks(new VideoController.VideoLifecycleCallbacks() {
    public void onVideoEnd() {
        // Here apps can take action knowing video playback is finished.
        // It's always a good idea to wait for playback to complete before
        // replacing or refreshing a native ad, for example.
        super.onVideoEnd();
    }
});

Kotlin

val vc = nativeAd.videoController

vc.setVideoLifecycleCallbacks(object : VideoController.VideoLifecycleCallbacks() {
    override fun onVideoEnd() {
        // Here apps can take action knowing video playback is finished.
        // It's always a good idea to wait for playback to complete before
        // replacing or refreshing a native ad, for example.
        super.onVideoEnd()
    }
})

広告の破棄

ネイティブ広告の表示が終わったら、その広告を必ず破棄し、ガベージ コレクションで適切に処理されるようにします。

Java

nativeAd.destroy();

Kotlin

nativeAd.destroy()

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

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

直接販売のネイティブ広告がどのように表示されるかテストするには、次のアド マネージャー広告ユニット ID を使用します。

/6499/example/native

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

  • 広告見出し（テキスト）
  • メイン画像（画像）
  • 説明（テキスト）

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

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

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

/6499/example/native-backfill

この広告ユニットは、AdChoices オーバーレイを含むアプリ インストール広告とコンテンツ広告のサンプルを配信します。