ネイティブ アドバンス

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

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 では、ネイティブ アセットがネイティブ広告ビューのレイアウトの外部でレンダリングされた場合、警告がログに記録されます。

広告ビュークラスには、個々のアセットに使用されるビューを登録するためのメソッドと、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, "ca-app-pub-3940256099942544/2247696110")
       ...
       .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, "ca-app-pub-3940256099942544/2247696110")
       ...
       .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
   

   画像スケールタイプ

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

   Java

   mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
   

   Kotlin

   mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
   

   メディア コンテンツ

   MediaContent クラスは、MediaView クラスを使用して表示されるネイティブ広告のメディア コンテンツに関するデータを保持します。MediaContent インスタンスで MediaView mediaContent プロパティが設定されている場合:

   • 動画アセットが利用可能な場合は、バッファリングされ、MediaView 内で再生が開始されます。動画アセットが利用可能かどうかは、hasVideoContent() で確認できます。

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

   デフォルトでは、最初にダウンロードされた画像アセットが mainImage です。setReturnUrlsForImageAssets(true) を使用している場合、mainImage は null であるため、mainImage プロパティを手動でダウンロードされた画像に設定する必要があります。この画像は、利用可能な動画アセットがない場合にのみ使用されます。

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

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

   Java

   adView.setNativeAd(ad);
   

   Kotlin

   adView.setNativeAd(ad)
   

広告を破棄

ネイティブ広告の表示が終了したら、広告が適切にガベージ コレクションになるようにします。

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

nativeAd.destroy()

GitHub の例

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

Java Kotlin

次のステップ

次のトピックを確認してください。

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