ネイティブ アドバンス

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 を作成して NativeAd を入力しています。

Java

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

Kotlin

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 は、ネイティブ アセットがネイティブ広告のビュー レイアウト外でレンダリングされると、警告を記録しようとします。

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

  • クリックの記録
  • 画面に最初のピクセルが表示されたときにインプレッションを記録する
  • AdChoices オーバーレイの表示 (ネイティブ バックフィル クリエイティブ向け) (現時点では一部のパブリッシャー限定)

AdChoices オーバーレイ

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

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

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

サンプルコード

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

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

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

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 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, "/6499/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, "/6499/example/native")
        ...
        .withAdListener(object : AdListener() {
            override fun onAdFailedToLoad(adError: LoadAdError) {
                // Handle the failure by logging, altering the UI, and so on.
            }
        })
        .build()
    
  4. MediaView を登録する

    ネイティブ広告のレイアウトにメイン画像アセットを含める場合は、ImageView アセットではなく 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)
    

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

    Java

    mediaView.setMediaContent(nativeAd.getMediaContent());
    

    Kotlin

    mediaView.mediaContent = nativeAd.mediaContent
    

    ImageScaleType

    MediaView クラスは、画像を表示する際に ImageScaleType プロパティを持ちます。MediaView で画像のスケーリング方法を変更する場合は、MediaViewsetImageScaleType() メソッドを使用して、対応する 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) が使用されている場合、mainImagenull であるため、手動でダウンロードした画像を mainImage プロパティに設定する必要があります。この画像は、利用可能な動画アセットがない場合にのみ使用されます。

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

    この最後のステップでは、ネイティブ広告オブジェクトを表示するビューに、そのオブジェクトを登録します。

    Java

    adView.setNativeAd(ad);
    

    Kotlin

    adView.setNativeAd(ad)
    

広告を破棄

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

Java

nativeAd.destroy();
        .inflate(R.layout.ad_layout_file, parent);

Kotlin

nativeAd.destroy()

ネイティブ広告コードをテストする

直接販売広告

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

/6499/example/native

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

  • 見出し(テキスト)
  • メインイメージ(イメージ)
  • キャプション(テキスト)

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

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

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

/6499/example/native-backfill

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

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

GitHub の例

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

Java Kotlin

次のステップ

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