ネイティブ アドバンス

BILLING を表示する

ネイティブ広告が読み込まれると、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 と UDM の 次のように NativeAd を設定します。

Java

AdLoader.Builder builder = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    .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, "ca-app-pub-3940256099942544/2247696110")
    .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 は、Google 広告が ネイティブ広告ビュー レイアウトの外部でレンダリングされるネイティブ アセット。

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

  • クリックの記録
  • 画面に最初のピクセルが表示されたときのインプレッションの記録
  • AdChoices オーバーレイを表示する

AdChoices オーバーレイ

AdChoices オーバーレイは、SDK によって各広告ビューに追加されます。AdChoices ロゴは自動的に挿入されるため、ネイティブ広告ビューのご希望の隅のスペースを空けておいてください。また、 AdChoices オーバーレイは見やすくすることが重要なので、背景色を選択します。 画像を適切に作成できます。オーバーレイの外観と機能について詳しくは、ネイティブ広告のフィールドについてをご覧ください。

広告の帰属表示

広告の帰属表示は、そのビューが広告であることを示すために表示が義務付けられています。詳しくは、ポリシー ガイドラインをご覧ください。

サンプルコード

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

  1. NativeAdView クラスのインスタンスを作成します。
  2. 表示する広告アセットごとに、次の操作を行います。

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

  4. 広告オブジェクトを 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)
}

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

  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 によって処理されます。 アセットビューを設定して登録します。

    クリックをリッスンするには、Google Mobile Ads 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.
            }
            @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.
            }
            override fun onAdClicked() {
                // Log the click event or other custom behavior.
            }
        })
        .build()
    
  4. MediaView を登録する

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

    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 で画像のスケーリング方法を変更する場合は、MediaViewsetImageScaleType() メソッドを使用して対応する ImageView.ScaleType を設定します。

    Java

    mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
    

    Kotlin

    mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
    

    MediaContent

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

    • 動画アセットがある場合は、その動画アセットがバッファリングされ、 MediaView。動画アセットがあるかどうかは、 hasVideoContent()

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

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

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

    この最後のステップでは、ネイティブ広告のオブジェクトを、 表示されます。

    Java

    adView.setNativeAd(ad);
    

    Kotlin

    adView.setNativeAd(ad)
    

広告を破棄

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

Java

nativeAd.destroy();

Kotlin

nativeAd.destroy()

GitHub の例

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

Java Kotlin

次のステップ

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