ネイティブアドバンス

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

広告の帰属表示

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

サンプルコード

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

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

        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, "ca-app-pub-3940256099942544/2247696110")
        ...
        .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, "ca-app-pub-3940256099942544/2247696110")
        ...
        .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 の両方でご覧いただけます。

ネイティブアドバンスのサンプルをダウンロード

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, "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() メソッドだけです。これは動画アセットをミュート状態で開始すべきかどうかを 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()

ネイティブ アドバンス

UnifiedNativeAd を表示する

UnifiedNativeAdView クラス

Java

Kotlin

AdChoices オーバーレイ

広告の帰属表示

サンプルコード

Java

Kotlin

レイアウトの拡張

Java

Kotlin

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

Java

Kotlin

クリックの処理

Java

Kotlin

MediaView の登録

Java

Kotlin

Java

Kotlin

ImageScaleType の設定

Java

Kotlin

GitHub サンプル

MediaContent

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

Java

Kotlin

ネイティブ動画

VideoOptions

Java

Kotlin

VideoController

Java

Kotlin

Java

Kotlin

広告の破棄

Java

Kotlin

ネイティブアドバンス

`UnifiedNativeAdView` クラス