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 オーバーレイは見やすいことが重要であるため、背景色と背景色は適切なものを選択してください。オーバーレイのデザインと機能について詳しくは、プログラマティック ネイティブ広告の実装ガイドラインをご覧ください。
プログラマティック ネイティブ広告の帰属表示
プログラマティック ネイティブ広告を表示する場合は、広告の帰属表示を表示して、ビューが広告であることを示す必要があります。詳しくは、ポリシー ガイドラインをご覧ください。
サンプルコード
ネイティブ広告を表示する手順は次のとおりです。
NativeAdView
クラスのインスタンスを作成します。- 表示する広告アセットごとに次の操作を行います。
- 広告オブジェクトのアセットをアセットビューに入力します。
- アセットビューを
ViewGroup
クラスに登録します。
- ネイティブ広告のレイアウトに大きなメディア アセットが含まれている場合は、
MediaView
を登録します。 - 広告オブジェクトを
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)
}
個々のタスクは次のとおりです。
レイアウトをインフレートする
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 によって処理されます。
次のサンプルでは、広告リスナーを使用してクリック イベントを監視しています。
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()
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
で画像のスケーリング方法を変更する場合は、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();
.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 の例
ネイティブ広告の完全な実装例:
次のステップ
次のトピックをご覧ください。