ネイティブ アドバンス

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>


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

次の例では、NativeAdView と Chronicle を 次のように NativeAd を設定します。

AdLoader.Builder builder = new AdLoader.Builder(this, "AD_UNIT_ID")
    .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 text, images and the native ad, etc into the ad
            // view.
            populateNativeAdView(nativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});

val builder = AdLoader.Builder(this, "AD_UNIT_ID")
    .forNativeAd { nativeAd ->
        // 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 text, images and the native ad, etc into the ad
        // view.
        populateNativeAdView(nativeAd, 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)
    }

なお、ネイティブ広告のすべてのアセットは、 NativeAdView レイアウト。Google Mobile Ads SDK は、Google 広告が ネイティブ広告ビュー レイアウトの外部でレンダリングされるネイティブ アセット。

広告ビュークラスには、広告に使用されるビューの登録に使用するメソッドも用意されています。 もう 1 つは NativeAd オブジェクト自体を登録するためのものです。 この方法でビューを登録すると、SDK が自動的にタスクを処理できるようになります。 例:

• クリックの記録
• 画面に最初のピクセルが表示されたときにインプレッションを記録する
• AdChoices オーバーレイを表示する （ネイティブバックフィル） 現時点では一部のパブリッシャー様にのみご利用いただけます

AdChoices オーバーレイ

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

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

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

サンプルコード

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

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

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

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

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

個々のタスクは次のとおりです。

1. レイアウトをインフレートする

   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 がある場合は、それを再利用する。 レイアウト ファイルを使用せずにインスタンスを動的に作成することもできます。

2. アセットビューにデータを入力して登録する

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

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

3. クリックを処理する

   内部または内部のビューにはカスタム クリック ハンドラを実装しないでください。 獲得できますクリック イベントをご自身でモニタリングするには、広告 リスナー。

   広告ビューアセットのクリックは、適切に設定されていれば、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, 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, "/21775744923/example/native")
       ...
       .withAdListener(object : AdListener() {
           override fun onAdFailedToLoad(adError: LoadAdError) {
               // Handle the failure by logging, altering the UI, and so on.
           }
       })
       .build()
   

4. MediaView を登録する

   使用するには、 MediaView を使用します。 ImageView ネイティブのレイアウトにメインの画像アセットを含める場合は、このアセットを使用してください。 表示されます。

   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)
   

   すべてのアセットビューと同様に、メディアビューのコンテンツも入力する必要があります。 これは、getMediaContent() メソッドを使用して、MediaView に渡すことができるメディア コンテンツを取得することで行われます。メディアビューのメディア コンテンツを設定するコード スニペットは次のとおりです。

   Java

   mediaView.setMediaContent(nativeAd.getMediaContent());
   

   Kotlin

   mediaView.mediaContent = nativeAd.mediaContent
   

   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 クラスを使用して表示されるネイティブ広告この MediaView mediaContent プロパティは、MediaContent インスタンスを使用して設定します。

   • 動画アセットがある場合は、その動画アセットがバッファリングされ、MediaView 内で再生されます。動画アセットがあるかどうかを確認するには、 hasVideoContent()。

   • 広告に動画アセットが含まれていない場合は、mainImage アセットがダウンロードされます。 代わりに MediaView 内に配置します。

   デフォルトでは、mainImage が最初にダウンロードされる画像アセットです。条件 setReturnUrlsForImageAssets(true) が使用されています。mainImage は null であるため、次の操作を行う必要があります。 mainImage プロパティを、手動でダウンロードしたイメージに設定します。この画像が使用されるのは、使用できる動画アセットがない場合に限られます。

5. ネイティブ広告オブジェクトを登録する

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

   Java

   adView.setNativeAd(ad);
   

   Kotlin

   adView.setNativeAd(ad)
   

広告を破棄

ネイティブ広告の表示が終わったら、広告が ガベージ コレクションの対象になります。

nativeAd.destroy();

nativeAd.destroy()

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

直接販売の広告

直接販売のネイティブ広告がどのようなものか テストしたい場合は このアド マネージャー広告ユニット ID の使用:

/21775744923/example/native

サンプルのアプリ インストール広告とコンテンツ広告、および 次のアセットを含むカスタムのネイティブ広告フォーマットです

• 見出し（テキスト）
• MainImage（画像）
• キャプション（テキスト）

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

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

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

/21775744923/example/native-backfill

AdChoices を含む、アプリ インストール広告とコンテンツ広告のサンプルが配信されます。 オーバーレイします。

実際の広告ユニットとテンプレート ID を参照するようにコードを更新してください 確認しましょう

GitHub の例

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

Java Kotlin

次のステップ

次のトピックをご覧ください。

• ユーザーのプライバシー
• SDK の初期化と広告の読み込みを最適化 （ベータ版）