Native Ads

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

キーポイント: どのネイティブ広告の場合でも、アセットはすべて UnifiedNativeAdView レイアウト内でレンダリングしてください。ネイティブ広告のビュー レイアウトの外でネイティブ アセットがレンダリングされると、Google Mobile Ads SDK は警告をログに記録しようと試みます。

広告ビュークラスには、個々のアセットで使うビューの登録に使用するメソッドと、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).
    ...

    // 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

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

クリックの処理

キーポイント: ネイティブ広告ビューの上に重なるビューや内側のビューには、カスタム クリック ハンドラを実装しないでください。クリック イベントをご自身でモニタリングするには、広告リスナーを使用してください。 広告ビューアセットに対するクリックは、アセットビューの設定と登録が適切に行われていれば、SDK によって処理されます。

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

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 の登録

キーポイント: ネイティブ広告のレイアウトにメイン画像アセットを含める場合は、ImageView アセットの代わりに 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, "/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() メソッド 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()

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

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

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

/6499/example/native

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

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

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

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

注: Ad Exchange バックフィルは、現在一部のパブリッシャー様限定で公開されています。

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

/6499/example/native-backfill

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

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