このページは Cloud Translation API によって翻訳されました。

ネイティブアドバンス

NativeAd を表示する

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

`NativeAdView` クラス

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

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

<com.google.android.gms.ads.nativead.NativeAdView
    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>
         <!--Add remaining assets such as the image and media view.-->
    </LinearLayout>
</com.google.android.gms.ads.nativead.NativeAdView>

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

Java

AdLoader.Builder builder = new AdLoader.Builder(this, "/21775744923/example/native")
    .forNativeAd(new NativeAd.OnNativeAdLoadedListener() {
        @Override
        public void onNativeAdLoaded(NativeAd nativeAd) {
            // 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 native_ad_layout.xml
            // in the res/layout folder
            NativeAdView adView = (NativeAdView) getLayoutInflater()
                .inflate(R.layout.native_ad_layout, null);
            // This method sets the assets into the ad view.
            populateNativeAdView(nativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});

Kotlin

val builder = AdLoader.Builder(this, "/21775744923/example/native")
    .forNativeAd { nativeAd ->
        // Assumes you have a placeholder FrameLayout in your View layout
        // (with ID fl_adplaceholder) where the ad is to be placed.
        val frameLayout: FrameLayout = findViewById(R.id.fl_adplaceholder)
        // Assumes that your ad layout is in a file call native_ad_layout.xml
        // in the res/layout folder
        val adView = layoutInflater
                .inflate(R.layout.native_ad_layout, null) as NativeAdView
        // This method sets the assets into the ad view.
        populateNativeAdView(nativeAd, adView)
        frameLayout.removeAllViews()
        frameLayout.addView(adView)
    }

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

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

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

AdChoices オーバーレイ

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

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

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

サンプルコード

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

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

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

Java

private void displayNativeAd(ViewGroup parent, NativeAd ad) {

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

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

  // Repeat the process for the other assets in the NativeAd
  // 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 NativeAdView'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 displayNativeAd(parent: ViewGroup, ad: NativeAd) {

  // 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.ad_layout_file, parent) as NativeAdView

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

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

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

  // Call the NativeAdView'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);
NativeAdView adView = (NativeAdView) inflater
        .inflate(R.layout.ad_layout_file, parent);
```
Kotlin
```
val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
        as LayoutInflater
val adView = inflater.inflate(R.layout.ad_layout_file, parent) as NativeAdView
```
このコードは、ネイティブ広告の表示用ビューを含む XML レイアウトをインフレートし、NativeAdView への参照を配置しています。このほか、フラグメントまたはアクティビティに既存の NativeAdView があればそれを再利用する方法や、レイアウトファイルを使わずにインスタンスを動的に作成する方法もあります。
アセットビューの設定と登録

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

クリックをリッスンするには、Google Mobile Ads SDK のクリックコールバックを実装します。

Java

AdLoader adLoader = new AdLoader.Builder(context, "/21775744923/example/native")
    // ...
    .withAdListener(new AdListener() {
        @Override
        public void onAdFailedToLoad(LoadAdError adError) {
            // Handle the failure by logging.
        }
        @Override
        public void onAdClicked() {
            // Log the click event or other custom behavior.
        }
    })
    .build();

Kotlin

val adLoader = AdLoader.Builder(this, "/21775744923/example/native")
    // ...
    .withAdListener(object : AdListener() {
        override fun onAdFailedToLoad(adError: LoadAdError) {
            // Handle the failure.
        }
        override fun onAdClicked() {
            // Log the click event or other custom behavior.
        }
    })
    .build()

MediaView を登録する

ネイティブ広告のレイアウトにメイン画像アセットを含める場合は、ImageView アセットではなく MediaView アセットを使用する必要があります。

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

MediaView は、XML レイアウトで定義することも、動的に作成することもできます。他のアセットビューの場合と同様に、NativeAdView のビュー階層内に配置してください。MediaView を使用するアプリは、NativeAdView に登録する必要があります。
Java
```
 // Populate and register the media asset view.
 nativeAdView.setMediaView(nativeAdBinding.adMedia);
```
Kotlin
```
 // Populate and register the media asset view.
 nativeAdView.mediaView = nativeAdBinding.adMedia
```
ImageScaleType

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

MediaContent クラスは、MediaView クラスを使用して表示されるネイティブ広告のメディアコンテンツに関連するデータを保持します。MediaContent インスタンスで MediaView の mediaContent プロパティが設定されている場合:
- 動画アセットがある場合は、その動画アセットがバッファリングされ、MediaView 内で再生されます。動画アセットの有無は、hasVideoContent() で確認できます。
- 広告に動画アセットがない場合は、代わりに mainImage アセットがダウンロードされ、MediaView 内に配置されます。
デフォルトでは、mainImage は最初にダウンロードされる画像アセットです。setReturnUrlsForImageAssets(true) が使用されている場合、mainImage は null になるため、手動でダウンロードした画像を mainImage プロパティに設定する必要があります。この画像が使用されるのは、使用できる動画アセットがない場合に限られます。
ネイティブ広告オブジェクトを登録する

最後に、ネイティブ広告オブジェクトを表示するビューに、オブジェクトを登録します。
Java
```
adView.setNativeAd(ad);
```
Kotlin
```
adView.setNativeAd(ad)
```

広告の破棄

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

Java

nativeAd.destroy();

Kotlin

nativeAd.destroy()

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

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

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

/21775744923/example/native

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

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

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

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

Ad Exchange バックフィルは、一部のパブリッシャー様に限定されています。ネイティブバックフィル広告の動作をテストするには、次のアドマネージャー広告ユニットを使用します。

/21775744923/example/native-backfill

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

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

GitHub の例

ネイティブ広告の完全な実装例:

Java Kotlin

次のステップ

次のトピックを確認します。

ユーザーのプライバシー

SDK の初期化と広告読み込みを最適化（ベータ版）

ネイティブ アドバンス

NativeAd を表示する

NativeAdView クラス

Java

Kotlin

AdChoices オーバーレイ

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

サンプルコード

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

ImageScaleType

Java

Kotlin

MediaContent

Java

Kotlin

広告の破棄

Java

Kotlin

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

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

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

GitHub の例

次のステップ

ネイティブアドバンス

`NativeAdView` クラス

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

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