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