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, "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 広告が
ネイティブ広告ビュー レイアウトの外部でレンダリングされるネイティブ アセット。
広告ビュークラスには、個々のアセットで使うビューの登録に使用するメソッドと、NativeAd
オブジェクト自体を登録するためのメソッドもあります。この方法でビューを登録することで、SDK で次のようなタスクを自動的に処理できます。
- クリックの記録
- 画面に最初のピクセルが表示されたときのインプレッションの記録
- AdChoices オーバーレイを表示する
AdChoices オーバーレイ
AdChoices オーバーレイは、SDK によって各広告ビューに追加されます。AdChoices ロゴは自動的に挿入されるため、ネイティブ広告ビューのご希望の隅のスペースを空けておいてください。また、AdChoices オーバーレイは見やすいことが重要であるため、その背景色と背景画像は適切なものにしてください。オーバーレイの外観と機能について詳しくは、ネイティブ広告のフィールドについてをご覧ください。
広告の帰属表示
広告の帰属表示は、そのビューが広告であることを示すために表示が義務付けられています。詳しくはポリシー ガイドラインをご覧ください。
サンプルコード
ネイティブ広告を表示する手順は次のとおりです。
NativeAdView
クラスのインスタンスを作成します。表示する広告アセットごとに、次の処理を行います。
- アセットビューに広告オブジェクト内のアセットを入力します。
- アセットビューを
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, "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()
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
で画像のスケーリング方法を変更する場合は、 対応するImageView.ScaleType
(setImageScaleType()
を使用)MediaView
のメソッドを使用します。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
プロパティを、手動でダウンロードしたイメージに設定します。なお、 使用できる動画アセットがない場合にのみ、画像が使用されます。ネイティブ広告オブジェクトを登録する
この最後のステップでは、ネイティブ広告のオブジェクトを、 表示されます。
Java
adView.setNativeAd(ad);
Kotlin
adView.setNativeAd(ad)
広告の破棄
ネイティブ広告の表示が終わったら、広告が ガベージ コレクションの対象になります。
Java
nativeAd.destroy();
Kotlin
nativeAd.destroy()
GitHub の例
ネイティブ広告の完全な実装例:
次のステップ
次のトピックをご覧ください。