ネイティブ アドバンス

プラットフォームを選択: Android iOS

ネイティブ広告が読み込まれると、Google Mobile Ads SDK によりそれに対応する広告フォーマットのリスナーが呼び出されます。広告を表示するのはアプリの役目ですが、必ずしも急ぐ必要はありません。システム定義の広告フォーマットを簡単に表示できるようにするため、SDK には便利なリソースが用意されています。

NativeAdView クラスを定義する

NativeAdView クラスを定義します。このクラスは ViewGroup クラスであり、NativeAdView クラスの最上位コンテナです。各ネイティブ広告ビューには、MediaView ビュー要素や Title ビュー要素などのネイティブ広告アセットが含まれています。これらのアセットは NativeAdView オブジェクトの子である必要があります。

XML レイアウト

プロジェクトに XML NativeAdView を追加します。

<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>

Jetpack Compose

JetpackComposeDemo/compose-util モジュールを含めます。このモジュールには、NativeAdView とそのアセットをコンポーズするためのヘルパーが含まれています。

compose-util モジュールを使用して NativeAdView を作成します。

  import com.google.android.gms.compose_util.NativeAdAttribution
  import com.google.android.gms.compose_util.NativeAdView

  @Composable
  /** Display a native ad with a user defined template. */
  fun DisplayNativeAdView(nativeAd: NativeAd) {
      NativeAdView {
          // Display the ad attribution.
          NativeAdAttribution(text = context.getString("Ad"))
          // Add remaining assets such as the image and media view.
        }
    }

読み込まれたネイティブ広告を処理する

ネイティブ広告が読み込まれたら、コールバック イベントを処理し、ネイティブ広告ビューを拡張して、ビュー階層に追加します。

Java

AdLoader.Builder builder = new AdLoader.Builder(this, "/21775744923/example/native")
    .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.
            displayNativeAd(nativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});

Kotlin

val builder = AdLoader.Builder(this, "/21775744923/example/native")
    .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.
        displayNativeAd(nativeAd, adView)
        frameLayout.removeAllViews()
        frameLayout.addView(adView)
    }

Jetpack Compose

@Composable
/** Load and display a native ad. */
fun NativeScreen() {
  var nativeAd by remember { mutableStateOf<NativeAd?>(null) }
  val context = LocalContext.current
  var isDisposed by remember { mutableStateOf(false) }

  DisposableEffect(Unit) {
    // Load the native ad when we launch this screen
    loadNativeAd(
      context = context,
      onAdLoaded = { ad ->
        // Handle the native ad being loaded.
        if (!isDisposed) {
          nativeAd = ad
        } else {
          // Destroy the native ad if loaded after the screen is disposed.
          ad.destroy()
        }
      },
    )
    // Destroy the native ad to prevent memory leaks when we dispose of this screen.
    onDispose {
      isDisposed = true
      nativeAd?.destroy()
      nativeAd = null
    }
  }

  // Display the native ad view with a user defined template.
  nativeAd?.let { adValue -> DisplayNativeAdView(adValue) }
}

fun loadNativeAd(context: Context, onAdLoaded: (NativeAd) -> Unit) {
  val adLoader =
    AdLoader.Builder(context, NATIVE_AD_UNIT_ID)
      .forNativeAd { nativeAd -> onAdLoaded(nativeAd) }
      .withAdListener(
        object : AdListener() {
          override fun onAdFailedToLoad(error: LoadAdError) {
            Log.e(TAG, "Native ad failed to load: ${error.message}")
          }

          override fun onAdLoaded() {
            Log.d(TAG, "Native ad was loaded.")
          }

          override fun onAdImpression() {
            Log.d(TAG, "Native ad recorded an impression.")
          }

          override fun onAdClicked() {
            Log.d(TAG, "Native ad was clicked.")
          }
        }
      )
      .build()
  adLoader.loadAd(AdRequest.Builder().build())
}

NativeScreen.kt

どのネイティブ広告の場合でも、アセットはすべて NativeAdView レイアウト内でレンダリングしてください。ネイティブ広告のビュー レイアウトの外でネイティブ アセットがレンダリングされると、Google Mobile Ads SDK は警告を記録しようと試みます。

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

  • クリックの記録
  • 画面に最初のピクセルが表示されたときにインプレッションを記録する
  • AdChoices オーバーレイの表示（現在一部のパブリッシャー様に限定で公開されているネイティブ バックフィル クリエイティブの場合）

ネイティブ広告を表示する

次の例は、ネイティブ広告を表示する方法を示しています。

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 you use a MediaView, call theNativeAdView.setMediaView() method
  // before calling the NativeAdView.setNativeAd() method.
  MediaView mediaView = (MediaView) adView.findViewById(R.id.ad_media);
  adView.setMediaView(mediaView);

  // Register the native ad with its ad view.
  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)
}

Jetpack Compose

@Composable
/** Display a native ad with a user defined template. */
fun DisplayNativeAdView(nativeAd: NativeAd) {
  val context = LocalContext.current
  Box(modifier = Modifier.padding(8.dp).wrapContentHeight(Alignment.Top)) {
    // Call the NativeAdView composable to display the native ad.
    NativeAdView {
      // Inside the NativeAdView composable, display the native ad assets.
      Column(Modifier.align(Alignment.TopStart).wrapContentHeight(Alignment.Top)) {
        // Display the ad attribution.
        NativeAdAttribution(text = context.getString(R.string.attribution))
        Row {
          // If available, display the icon asset.
          nativeAd.icon?.let { icon ->
            NativeAdIconView(Modifier.padding(5.dp)) {
              icon.drawable?.toBitmap()?.let { bitmap ->
                Image(bitmap = bitmap.asImageBitmap(), "Icon")
              }
            }
          }
          Column {
            // If available, display the headline asset.
            nativeAd.headline?.let {
              NativeAdHeadlineView {
                Text(text = it, style = MaterialTheme.typography.headlineLarge)
              }
            }
            // If available, display the star rating asset.
            nativeAd.starRating?.let {
              NativeAdStarRatingView {
                Text(text = "Rated $it", style = MaterialTheme.typography.labelMedium)
              }
            }
          }
        }

        // If available, display the body asset.
        nativeAd.body?.let { NativeAdBodyView { Text(text = it) } }
        // Display the media asset.
        NativeAdMediaView(Modifier.fillMaxWidth().height(500.dp).fillMaxHeight())

        Row(Modifier.align(Alignment.End).padding(5.dp)) {
          // If available, display the price asset.
          nativeAd.price?.let {
            NativeAdPriceView(Modifier.padding(5.dp).align(Alignment.CenterVertically)) {
              Text(text = it)
            }
          }
          // If available, display the store asset.
          nativeAd.store?.let {
            NativeAdStoreView(Modifier.padding(5.dp).align(Alignment.CenterVertically)) {
              Text(text = it)
            }
          }
          // If available, display the call to action asset.
          // Note: The Jetpack Compose button implements a click handler which overrides the native
          // ad click handler, causing issues. Use the NativeAdButton which does not implement a
          // click handler. To handle native ad clicks, use the NativeAd AdListener onAdClicked
          // callback.
          nativeAd.callToAction?.let { callToAction ->
            NativeAdCallToActionView(Modifier.padding(5.dp)) { NativeAdButton(text = callToAction) }
          }
        }
      }
    }
  }
}

NativeScreen.kt

AdChoices オーバーレイ

AdChoices オーバーレイは、バックフィル広告が返されたときに SDK によって広告ビューに追加されます。アプリでネイティブ広告のバックフィルを使用する場合は、AdChoices ロゴが自動的に挿入されるため、ネイティブ広告ビューのご希望の隅のスペースを空けておいてください。また、AdChoices オーバーレイは見やすいことが重要であるため、背景色と背景画像は適切なものにしてください。オーバーレイの外観と機能について詳しくは、プログラマティック ネイティブ広告の実装に関するガイドラインを参照してください。

プログラマティック ネイティブ広告の帰属表示

プログラマティック ネイティブ広告を表示する際は、広告の帰属表示を行って、そのビューが広告であることを示す必要があります。詳しくはポリシー ガイドラインをご覧ください。

クリックを処理する

ネイティブ広告ビューの上に重なるビューまたはその内側のビューには、カスタム クリック ハンドラを実装しないでください。広告ビューアセットに対するクリックは、アセットビューの設定と登録が適切に行われていれば、SDK によって処理されます。

クリックをリッスンするには、Google Mobile Ads SDK のクリック コールバックを実装します。

Java

AdLoader adLoader = new AdLoader.Builder(context, "/21775744923/example/native")
    // ...
    .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, "/21775744923/example/native")
    // ...
    .withAdListener(object : AdListener() {
        override fun onAdFailedToLoad(adError: LoadAdError) {
            // Handle the failure.
        }
        override fun onAdClicked() {
            // Log the click event or other custom behavior.
        }
    })
    .build()

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 内に配置されます。

∂## 広告を破棄する

ネイティブ広告を表示したら、広告を破棄します。次の例では、ネイティブ広告を破棄しています。

Java

nativeAd.destroy();

Kotlin

nativeAd.destroy()

ネイティブ広告コードをテストする

直接販売広告

直接販売のネイティブ広告がどのように表示されるかテストするには、次のアド マネージャー広告ユニット ID を使用します。

/21775744923/example/native

この ID は、アプリ インストール広告やコンテンツ広告のサンプルに加え、次のアセットを含むカスタム ネイティブ広告フォーマットも配信するよう設定されています。

  • 広告見出し（テキスト）
  • MainImage（画像）
  • 説明（テキスト）

カスタム ネイティブ広告フォーマットのテンプレート ID は 10063170 です。

ネイティブ バックフィル広告

Ad Exchange バックフィルは、一部のパブリッシャー様限定で公開されています。ネイティブ バックフィル広告の動作をテストするには、次のアド マネージャー広告ユニットを使用します。

/21775744923/example/native-backfill

この広告ユニットは、AdChoices オーバーレイを含むアプリ インストール広告とコンテンツ広告のサンプルを配信します。

広告配信を開始する際は、実際の広告ユニットとテンプレート ID を参照するようコードを事前に更新してください。

GitHub の例

ネイティブ広告の実装例の全体像:

Java Kotlin JetpackCompose

次のステップ

次のトピックについて確認します。