UnifiedNativeAd を表示する
ネイティブ広告が読み込まれると、Google Mobile Ads SDK によりそれに対応する広告フォーマットのリスナーが呼び出されます。広告を表示するのはアプリの役目ですが、必ずしもすぐに表示しなければならないわけではありません。システム定義の広告フォーマットを簡単に表示できるようにするため、SDK には便利なリソースが用意されています。
UnifiedNativeAdView
クラス
UnifiedNativeAd
フォーマットには、対応する UnifiedNativeAdView
クラスがあります。このクラスは、UnifiedNativeAd
のルートとして使用する ViewGroup
です。1 つの UnifiedNativeAdView
が 1 つの統合型ネイティブ広告に対応します。その広告のアセットの表示に使われるビュー(スクリーンショット アセットを表示する ImageView
など)はすべて、UnifiedNativeAdView
オブジェクトの子になります。
LinearLayout
を使ってアセットビューを表示する統合型ネイティブ広告のビュー階層は、次のようになります。
<com.google.android.gms.ads.formats.UnifiedNativeAdView
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.formats.UnifiedNativeAdView>
次のサンプルでは、UnifiedNativeAdView
を作成して UnifiedNativeAd
を入力しています。
Java
AdLoader.Builder builder = new AdLoader.Builder(this, "<your ad unit ID>") .forUnifiedNativeAd(new UnifiedNativeAd.OnUnifiedNativeAdLoadedListener() { @Override public void onUnifiedNativeAdLoaded(UnifiedNativeAd unifiedNativeAd) { // 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 ad_unified.xml // in the res/layout folder UnifiedNativeAdView adView = (UnifiedNativeAdView) getLayoutInflater() .inflate(R.layout.ad_unified, null); // This method sets the text, images and the native ad, etc into the ad // view. populateUnifiedNativeAdView(unifiedNativeAd, adView); frameLayout.removeAllViews(); frameLayout.addView(adView); } });
Kotlin
val builder = AdLoader.Builder(this, "<your ad unit ID>") .forUnifiedNativeAd { unifiedNativeAd -> // Assumes that your ad layout is in a file call ad_unified.xml // in the res/layout folder val adView = layoutInflater .inflate(R.layout.ad_unified, null) as UnifiedNativeAdView // This method sets the text, images and the native ad, etc into the ad // view. populateUnifiedNativeAdView(unifiedNativeAd, 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) }
広告ビュークラスには、個々のアセットで使うビューの登録に使用するメソッドと、NativeAd
オブジェクト自体を登録するためのメソッドも用意されています。この方法でビューを登録することで、SDK で次のようなタスクを自動的に処理できます。
- クリックの記録
- インプレッションの記録(画面に最初のピクセルが表示されたとき)
- AdChoices オーバーレイの表示
AdChoices オーバーレイ
AdChoices オーバーレイは、SDK によって各広告ビューに追加されます。AdChoices ロゴは自動的に挿入されるため、ネイティブ広告ビューのご希望の隅のスペースを空けておいてください。また、AdChoices オーバーレイは見やすいことが重要であるため、背景色と背景画像は適切なものにしてください。オーバーレイの外観と機能について詳しくは、ネイティブ広告のフィールドについてをご覧ください。
広告の帰属表示
広告の帰属表示は、そのビューが広告であることを示すために表示が義務付けられています。 詳しくはポリシー ガイドラインをご覧ください。
サンプルコード
統合型ネイティブ広告を表示する手順は次のとおりです。
UnifiedNativeAdView
クラスのインスタンスを作成します。- 表示する広告アセットすべてについて、次の処理を行います。
- アセットビューに広告オブジェクト内のアセットを入力します。
- アセットビューを
ViewGroup
クラスに登録します。
- ネイティブ広告レイアウトに大きなメディア アセットが含まれている場合は、
MediaView
を登録します。 - 広告オブジェクトを
ViewGroup
クラスに登録します。
UnifiedNativeAd
を表示する関数の例を次に示します。
Java
private void displayUnifiedNativeAd(ViewGroup parent, UnifiedNativeAd ad) { // Inflate a layout and add it to the parent ViewGroup. LayoutInflater inflater = (LayoutInflater) parent.getContext() .getSystemService(Context.LAYOUT_INFLATER_SERVICE); UnifiedNativeAdView adView = (UnifiedNativeAdView) inflater .inflate(R.layout.my_ad_layout, parent); // Locate the view that will hold the headline, set its text, and call the // UnifiedNativeAdView'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 UnifiedNativeAd // 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 UnifiedNativeAdView'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 displayUnifiedNativeAd(parent: ViewGroup, ad: UnifiedNativeAd) { // 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.my_ad_layout, parent) as UnifiedNativeAdView // Locate the view that will hold the headline, set its text, and use the // UnifiedNativeAdView'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 UnifiedNativeAd using // additional view objects (Buttons, ImageViews, etc). ... val mediaView = adView.findViewById<MediaView>(R.id.ad_media) adView.mediaView = mediaView // Call the UnifiedNativeAdView'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); UnifiedNativeAdView adView = (UnifiedNativeAdView) inflater .inflate(R.layout.my_ad_layout, parent);
Kotlin
val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE) as LayoutInflater val adView = inflater.inflate(R.layout.my_ad_layout, parent) as UnifiedNativeAdView
この例では、統合型ネイティブ広告の表示用ビューを含む XML レイアウトをインフレートし、UnifiedNativeAdView
への参照を配置しています。このほか、フラグメントまたはアクティビティに既存の UnifiedNativeAdView
があればそれを再利用する方法や、レイアウト ファイルを使わずにインスタンスを動的に作成する方法もあります。
アセットビューの設定と登録
このサンプルコードでは、広告見出しの表示に使うビューを特定してから、広告オブジェクトで提供される文字列アセットを使ってテキストを設定し、UnifiedNativeAdView
オブジェクトに登録しています。
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, "ca-app-pub-3940256099942544/2247696110") ... .withAdListener(new AdListener() { @Override public void onAdFailedToLoad(int errorCode) { // 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(errorCode: Int) { // Handle the failure by logging, altering the UI, and so on. } }) .build()
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)
他のすべてのアセットビューと同様に、メディアビューのコンテンツも設定する必要があります。
この設定には、mediaContent
プロパティを使用します。UnifiedNativeAd
の mediaContent
プロパティには、MediaView
に渡すことのできるメディア コンテンツが含まれています。
メディアビューのメディア コンテンツを設定するコードは次のとおりです。
Java
mediaView.setMediaContent(nativeAd.getMediaContent());
Kotlin
mediaView.mediaContent = nativeAd.mediaContent
ImageScaleType の設定
MediaView
クラスには、画像を表示する際に使用できる ImageScaleType
プロパティがあります。
MediaView
で画像のスケーリング方法を変更する場合は、対応する ImageView.ScaleType
を MediaView
の setImageScaleType()
メソッドを使って設定します。
たとえば、画像を MediaView
のビューいっぱいに表示するには、次のように設定します(広告に動画がない場合)。
Java
mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);
Kotlin
mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP
GitHub サンプル
GitHub リポジトリでは、ネイティブ アドバンス広告の完全な実装サンプルを、Java と Kotlin の両方でご覧いただけます。
ネイティブ アドバンスのサンプルをダウンロードMediaContent
MediaContent
クラスは、MediaView
クラスを使用して表示されるネイティブ広告のメディア コンテンツに関連するデータを保持します。MediaContent
インスタンスで MediaView
の mediaContent
プロパティが設定されている場合:
- 動画アセットがある場合は、その動画アセットがバッファリングされ、
MediaView
内で再生されます。動画アセットの有無は、hasVideoContent()
で確認できます。 - 広告に動画アセットがない場合は、代わりに
mainImage
アセットがダウンロードされ、MediaView
内に配置されます。
ネイティブ広告オブジェクトの登録
最後に、ネイティブ広告オブジェクトを表示するビューに、オブジェクトを登録します。
Java
adView.setNativeAd(ad);
Kotlin
adView.setNativeAd(ad)
ネイティブ動画
一部のネイティブ広告には、画像、文字、数値のほか動画アセットが含まれています。広告によっては動画アセットが含まれておらず、含まれている場合でも、必ずしもアプリに表示しなくてもかまいません。
動画の設定と表示をシンプルにするため、Mobile Ads SDK には次の動画関連クラスが用意されています。
VideoOptions
VideoOptions
クラスを使うと、ネイティブ動画アセットの動作方法をアプリで設定できます。VideoOptions
オブジェクトは、AdLoader
の構成時に使う NativeAdOptions
オブジェクトに割り当てる必要があります。次の例をご覧ください。
Java
VideoOptions videoOptions = new VideoOptions.Builder() .setStartMuted(false) .build(); NativeAdOptions adOptions = new NativeAdOptions.Builder() .setVideoOptions(videoOptions) .build(); AdLoader adLoader = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110") .forUnifiedNativeAd( ... ) .withNativeAdOptions(adOptions) .build();
Kotlin
val videoOptions = VideoOptions.Builder() .setStartMuted(false) .build() val adOptions = NativeAdOptions.Builder() .setVideoOptions(videoOptions) .build() val adLoader = AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110") .forUnifiedNativeAd( ... ) .withNativeAdOptions(adOptions) .build()
VideoOptions.Builder
クラスで提供されているメソッドは、setStartMuted()
メソッドだけです。これは動画アセットをミュート状態で開始すべきかどうかを SDK に伝えるメソッドで、デフォルト値は true
です。
VideoController
VideoController
クラスを使用すると、動画アセットに関する情報を取得できます。アプリで UnifiedNativeAd
オブジェクトからコントローラへの参照を取得するには、getVideoController()
メソッドを呼び出します。次の例をご覧ください。
Java
VideoController vc = nativeAd.getVideoController();
Kotlin
val vc = myNativeAd.videoController
このメソッドは常に VideoController
オブジェクトを返します。広告内に動画アセットがない場合でも同様です。
VideoController
には hasVideoContent()
メソッドがあり、広告に動画アセットが含まれている場合は true、含まれていない場合は false を返します。
VideoController.VideoLifecycleCallbacks
クラスを使って、動画アセットのライフサイクルでイベントが発生したときに通知を受け取ることもできます。次の例をご覧ください。
Java
VideoController vc = nativeAd.getVideoController(); vc.setVideoLifecycleCallbacks(new VideoController.VideoLifecycleCallbacks() { public void onVideoEnd() { // Here apps can take action knowing video playback is finished. // It's always a good idea to wait for playback to complete before // replacing or refreshing a native ad, for example. super.onVideoEnd(); } });
Kotlin
val vc = nativeAd.videoController vc.setVideoLifecycleCallbacks(object : VideoController.VideoLifecycleCallbacks() { override fun onVideoEnd() { // Here apps can take action knowing video playback is finished. // It's always a good idea to wait for playback to complete before // replacing or refreshing a native ad, for example. super.onVideoEnd() } })
広告の破棄
ネイティブ広告の表示が終わったら、その広告を必ず破棄し、ガベージ コレクションで適切に処理されるようにします。
Java
nativeAd.destroy();
Kotlin
nativeAd.destroy()