Halaman ini diterjemahkan oleh Cloud Translation API.

Iklan native

Saat iklan native dimuat, Google Mobile Ads SDK (beta) memanggil pemroses untuk format iklan yang sesuai. Aplikasi Anda kemudian bertanggung jawab untuk menampilkan iklan, meskipun tidak harus melakukannya secara langsung. Untuk mempermudah menampilkan format iklan yang ditentukan sistem, SDK menawarkan beberapa resource yang berguna, seperti yang dijelaskan di bawah.

Tentukan class `NativeAdView`

Tentukan class NativeAdView. Class ini adalah class ViewGroup dan merupakan penampung level teratas untuk class NativeAdView. Setiap tampilan iklan native berisi aset iklan native, seperti elemen tampilan MediaView atau elemen tampilan Title, yang harus berupa turunan dari objek NativeAdView.

Tata Letak XML

Tambahkan NativeAdView XML ke project Anda:

<com.google.android.libraries.ads.mobile.sdk.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.libraries.ads.mobile.sdk.nativead.NativeAdView>

Jetpack Compose

Sertakan modul JetpackComposeDemo/compose-util yang menyertakan helper untuk menyusun NativeAdView dan asetnya.

Menggunakan modul compose-util, susun 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.
        }
    }

Menangani iklan native yang dimuat

Saat iklan native dimuat, tangani peristiwa callback, perluas tampilan iklan native, dan tambahkan ke hierarki tampilan:

Kotlin

// Build an ad request with native ad options to customize the ad.
val adTypes = listOf(NativeAd.NativeAdType.NATIVE)
val adRequest = NativeAdRequest
  .Builder("ca-app-pub-3940256099942544/2247696110", adTypes)
  .build()

val adCallback =
  object : NativeAdLoaderCallback {
    override fun onNativeAdLoaded(nativeAd: NativeAd) {
      activity?.runOnUiThread {

        val nativeAdBinding = NativeAdBinding.inflate(layoutInflater)
        val adView = nativeAdBinding.root
        val frameLayout = myActivityLayout.nativeAdPlaceholder

        // Populate and register the native ad asset views.
        displayNativeAd(nativeAd, nativeAdBinding)

        // Remove all old ad views and add the new native ad
        // view to the view hierarchy.
        frameLayout.removeAllViews()
        frameLayout.addView(adView)
      }
    }
  }

// Load the native ad with our request and callback.
NativeAdLoader.load(adRequest, adCallback)

Java

// Build an ad request with native ad options to customize the ad.
List<NativeAd.NativeAdType> adTypes = Arrays.asList(NativeAd.NativeAdType.NATIVE);
NativeAdRequest adRequest = new NativeAdRequest
                                .Builder("ca-app-pub-3940256099942544/2247696110", adTypes)
                                .build();

NativeAdLoaderCallback adCallback = new NativeAdLoaderCallback() {
    @Override
    public void onNativeAdLoaded(NativeAd nativeAd) {
      if (getActivity() != null) {
        getActivity()
          .runOnUiThread(() -> {
            // Inflate the native ad view and add it to the view hierarchy.
            NativeAdBinding nativeAdBinding = NativeAdBinding.inflate(getLayoutInflater());
            NativeAdView adView = (NativeAdView) nativeAdBinding.getRoot();
            FrameLayout frameLayout = myActivityLayout.nativeAdPlaceholder;

            // Populate and register the native ad asset views.
            displayNativeAd(nativeAd, nativeAdBinding);

            // Remove all old ad views and add the new native ad
            // view to the view hierarchy.
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        });
      }
    }
};

// Load the native ad with our request and callback.
NativeAdLoader.load(adRequest, adCallback);

Perhatikan bahwa semua aset untuk iklan native tertentu harus dirender di dalam tata letak NativeAdView. Google Mobile Ads SDK (beta) mencoba mencatat peringatan saat aset native dirender di luar tata letak tampilan iklan native.

Class tampilan iklan juga menyediakan metode yang digunakan untuk mendaftarkan tampilan yang digunakan untuk setiap aset individual, dan satu untuk mendaftarkan objek NativeAd itu sendiri. Mendaftarkan tampilan dengan cara ini memungkinkan SDK menangani tugas secara otomatis seperti:

Merekam klik
Merekam tayangan iklan saat piksel pertama terlihat di layar
Menampilkan overlay AdChoices

Menampilkan iklan native

Contoh berikut menunjukkan cara menampilkan iklan native:

Kotlin

private fun displayNativeAd(nativeAd: NativeAd, nativeAdBinding : NativeAdBinding) {
  // Set the native ad view elements.
  val nativeAdView = nativeAdBinding.root
  nativeAdView.advertiserView = nativeAdBinding.adAdvertiser
  nativeAdView.bodyView = nativeAdBinding.adBody
  nativeAdView.callToActionView = nativeAdBinding.adCallToAction
  nativeAdView.headlineView = nativeAdBinding.adHeadline
  nativeAdView.iconView = nativeAdBinding.adAppIcon
  nativeAdView.priceView = nativeAdBinding.adPrice
  nativeAdView.starRatingView = nativeAdBinding.adStars
  nativeAdView.storeView = nativeAdBinding.adStore

  // Set the view element with the native ad assets.
  nativeAdBinding.adAdvertiser.text = nativeAd.advertiser
  nativeAdBinding.adBody.text = nativeAd.body
  nativeAdBinding.adCallToAction.text = nativeAd.callToAction
  nativeAdBinding.adHeadline.text = nativeAd.headline
  nativeAdBinding.adAppIcon.setImageDrawable(nativeAd.icon?.drawable)
  nativeAdBinding.adPrice.text = nativeAd.price
  nativeAd.starRating?.toFloat().let { value ->
    nativeAdBinding.adStars.rating = value
  }
  nativeAdBinding.adStore.text = nativeAd.store

  // Hide views for assets that don't have data.
  nativeAdBinding.adAdvertiser.visibility = getAssetViewVisibility(nativeAd.advertiser)
  nativeAdBinding.adBody.visibility = getAssetViewVisibility(nativeAd.body)
  nativeAdBinding.adCallToAction.visibility = getAssetViewVisibility(nativeAd.callToAction)
  nativeAdBinding.adHeadline.visibility = getAssetViewVisibility(nativeAd.headline)
  nativeAdBinding.adAppIcon.visibility = getAssetViewVisibility(nativeAd.icon)
  nativeAdBinding.adPrice.visibility = getAssetViewVisibility(nativeAd.price)
  nativeAdBinding.adStars.visibility = getAssetViewVisibility(nativeAd.starRating)
  nativeAdBinding.adStore.visibility = getAssetViewVisibility(nativeAd.store)

  // Inform Google Mobile Ads SDK (beta) that you have finished populating
  // the native ad views with this native ad.
  nativeAdView.registerNativeAd(nativeAd, nativeAdBinding.adMedia)
}

/**
* Determines the visibility of an asset view based on the presence of its asset.
*
* @param asset The native ad asset to check for nullability.
* @return [View.VISIBLE] if the asset is not null, [View.INVISIBLE] otherwise.
*/
private fun getAssetViewVisibility(asset: Any?): Int {
  return if (asset == null) View.INVISIBLE else View.VISIBLE
}

Java

private void displayNativeAd(ad: NativeAd, nativeAdBinding : NativeAdBinding) {
  // Set the native ad view elements.
  NativeAdView nativeAdView = nativeAdBinding.getRoot();
  nativeAdView.setAdvertiserView(nativeAdBinding.adAdvertiser);
  nativeAdView.setBodyView(nativeAdBinding.adBody);
  nativeAdView.setCallToActionView(nativeAdBinding.adCallToAction);
  nativeAdView.setHeadlineView(nativeAdBinding.adHeadline);
  nativeAdView.setIconView(nativeAdBinding.adAppIcon);
  nativeAdView.setPriceView(nativeAdBinding.adPrice);
  nativeAdView.setStarRatingView(nativeAdBinding.adStars);
  nativeAdView.setStoreView(nativeAdBinding.adStore);

  // Set the view element with the native ad assets.
  nativeAdBinding.adAdvertiser.setText(nativeAd.getAdvertiser());
  nativeAdBinding.adBody.setText(nativeAd.getBody());
  nativeAdBinding.adCallToAction.setText(nativeAd.getCallToAction());
  nativeAdBinding.adHeadline.setText(nativeAd.getHeadline());
  if (nativeAd.getIcon() != null) {
      nativeAdBinding.adAppIcon.setImageDrawable(nativeAd.getIcon().getDrawable());
  }
  nativeAdBinding.adPrice.setText(nativeAd.getPrice());
  if (nativeAd.getStarRating() != null) {
      nativeAdBinding.adStars.setRating(nativeAd.getStarRating().floatValue());
  }
  nativeAdBinding.adStore.setText(nativeAd.getStore());

  // Hide views for assets that don't have data.
  nativeAdBinding.adAdvertiser.setVisibility(getAssetViewVisibility(nativeAd.getAdvertiser()));
  nativeAdBinding.adBody.setVisibility(getAssetViewVisibility(nativeAd.getBody()));
  nativeAdBinding.adCallToAction.setVisibility(getAssetViewVisibility(nativeAd.getCallToAction()));
  nativeAdBinding.adHeadline.setVisibility(getAssetViewVisibility(nativeAd.getHeadline()));
  nativeAdBinding.adAppIcon.setVisibility(getAssetViewVisibility(nativeAd.getIcon()));
  nativeAdBinding.adPrice.setVisibility(getAssetViewVisibility(nativeAd.getPrice()));
  nativeAdBinding.adStars.setVisibility(getAssetViewVisibility(nativeAd.getStarRating()));
  nativeAdBinding.adStore.setVisibility(getAssetViewVisibility(nativeAd.getStore()));

  // Inform Google Mobile Ads SDK (beta) that you have finished populating
  // the native ad views with this native ad.
  nativeAdView.registerNativeAd(nativeAd, nativeAdBinding.adMedia);
}

/**
* Determines the visibility of an asset view based on the presence of its asset.
*
* @param asset The native ad asset to check for nullability.
* @return {@link View#VISIBLE} if the asset is not null, {@link View#INVISIBLE} otherwise.
*/
private int getAssetViewVisibility(Object asset) {
    return (asset == null) ? View.INVISIBLE : View.VISIBLE;
}

Overlay AdChoices

Overlay AdChoices ditambahkan ke setiap tampilan iklan oleh SDK. Sisakan ruang di sudut pilihan tampilan iklan native Anda untuk logo AdChoices yang disisipkan secara otomatis. Selain itu, overlay AdChoices harus mudah dilihat, jadi pilihlah warna dan gambar latar belakang dengan tepat. Untuk mengetahui informasi selengkapnya tentang tampilan dan fungsi overlay, lihat Deskripsi kolom iklan native.

Atribusi iklan

Anda harus menampilkan atribusi iklan untuk menunjukkan bahwa penayangan tersebut adalah iklan. Pelajari lebih lanjut di pedoman kebijakan kami.

Menangani klik

Jangan menerapkan pengendali klik kustom apa pun pada tampilan di atas atau dalam tampilan iklan native. Klik pada aset tampilan iklan ditangani oleh SDK selama Anda mengisi dan mendaftarkan tampilan aset dengan benar.

Untuk memproses klik, terapkan callback klik Google Mobile Ads SDK (beta):

Kotlin

private fun setEventCallback(nativeAd: NativeAd) {
  nativeAd.adEventCallback =
    object : NativeAdEventCallback {
      override fun onAdClicked() {
        Log.d(Constant.TAG, "Native ad recorded a click.")
      }
    }
}

Java

private void setEventCallback(NativeAd nativeAd) {
  nativeAd.setAdEventCallback(new NativeAdEventCallback() {
      @Override
      public void onAdClicked() {
        Log.d(Constant.TAG, "Native ad recorded a click.");
      }
  });
}

ImageScaleType

Class MediaView memiliki properti ImageScaleType saat menampilkan gambar. Jika Anda ingin mengubah cara penskalaan gambar di MediaView, tetapkan ImageView.ScaleType yang sesuai menggunakan metode setImageScaleType() dari MediaView:

Kotlin

nativeAdViewBinding.mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP

Java

nativeAdViewBinding.mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);

MediaContent

Class MediaContent menyimpan data yang terkait dengan konten media iklan native, yang ditampilkan menggunakan class MediaView. Jika properti MediaView mediaContent ditetapkan dengan instance MediaContent:

Jika aset video tersedia, aset tersebut akan di-buffer dan mulai diputar di dalam MediaView. Anda dapat mengetahui apakah aset video tersedia dengan memeriksa hasVideoContent().
Jika iklan tidak berisi aset video, aset mainImage akan didownload dan ditempatkan di dalam MediaView.

Menghancurkan iklan

Setelah menampilkan iklan native, hancurkan iklan. Contoh berikut menghancurkan iklan native:

Kotlin

nativeAd.destroy()

Java

nativeAd.destroy();

Langkah berikutnya

Pelajari topik berikut:

Privasi pengguna

Contoh

Download dan jalankan aplikasi contoh yang menunjukkan penggunaan Google Mobile Ads SDK (beta).

Iklan native Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Tentukan class NativeAdView

Tata Letak XML

Jetpack Compose

Menangani iklan native yang dimuat

Kotlin

Java

Menampilkan iklan native

Kotlin

Java

Overlay AdChoices

Atribusi iklan

Menangani klik

Kotlin

Java

ImageScaleType

Kotlin

Java

MediaContent

Menghancurkan iklan

Kotlin

Java

Langkah berikutnya

Contoh

Iklan native

Tentukan class `NativeAdView`