ネイティブアドバンス広告

UnifiedNativeAd を表示する

ネイティブ広告が読み込まれると、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 オーバーレイは見やすいことが重要であるため、その背景色と背景画像は適切なものにしてください。オーバーレイのデザインと機能について詳しくは、ネイティブアドバンス広告のフィールドの説明をご覧ください。

広告の帰属表示

広告の帰属表示は、そのビューが広告であることを示すために表示が義務付けられています。広告の帰属表示に関するポリシーガイドラインについては、こちらのページをご覧ください。

サンプルコード

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

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

    // If the app is using a MediaView, it should be instantiated and assigned
    // to the mediaView property. This view is a little different in that the asset
    // is populated automatically, so there's one less step.
    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

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

クリックの処理

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

Java

.withAdListener(new AdListener() {
    @Override onAdClicked() {
      // Log the click event or other custom behavior.
    }
})

Kotlin

.withAdListener(object : AdListener() {
    override fun onAdClicked() {
      // Log the click event or other custom behavior.
    }
})

MediaView の登録

MediaView はメインのメディアアセットを表示するための特別な View で、次のように動作します。

読み込まれた広告に動画アセットがある場合は、その動画がバッファリングされ、MediaView 内で再生が始まります。
読み込まれた広告に動画アセットがない場合は、代わりに最初の画像アセットがダウンロードされ、MediaView 内に配置されます。

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

Java

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

Kotlin

adView.mediaView = adView.findViewById(R.id.ad_media)

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

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

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, "ca-app-pub-3940256099942544/2247696110")
        .forUnifiedNativeAd( ... )
        .withNativeAdOptions(adOptions)
        .build();

Kotlin

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

val adOptions = NativeAdOptions.Builder()
        .setVideoOptions(videoOptions)
        .build()

val adLoader = AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
        .forUnifiedNativeAd( ... )
        .withNativeAdOptions(adOptions)
        .build()

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

VideoController

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

Java

VideoController vc = myNativeAd.getVideoController();

Kotlin

val vc = myNativeAd.videoController

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

VideoController には、動画の状態を問い合わせるための、次のようなメソッドがあります。

hasVideoContent() - 広告に動画アセットがある場合は true を、そうでない場合は false を返します。
getAspectRatio() - 動画のアスペクト比（幅 / 高さ）を返します。動画アセットがない場合はゼロを返します。

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()

ネイティブ アドバンス広告

UnifiedNativeAd を表示する

UnifiedNativeAdView クラス

Java

Kotlin

AdChoices オーバーレイ

広告の帰属表示

サンプルコード

Java

Kotlin

レイアウトの拡張

Java

Kotlin

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

Java

Kotlin

クリックの処理

Java

Kotlin

MediaView の登録

Java

Kotlin

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

Java

Kotlin

ネイティブ動画

VideoOptions

Java

Kotlin

VideoController

Java

Kotlin

Java

Kotlin

広告の破棄

Java

Kotlin

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

`UnifiedNativeAdView` クラス