Menampilkan iklan native

Pilih platform: Android iOS Android (Lama)

Saat iklan native dimuat, GMA Next-Gen SDK akan memanggil pemroses untuk format iklan yang sesuai. Kemudian, aplikasi Anda bertanggung jawab untuk menampilkan iklan, meskipun tidak harus segera melakukannya. Untuk mempermudah menampilkan format iklan yang ditentukan sistem, SDK menawarkan beberapa referensi yang berguna, seperti yang dijelaskan di bawah.

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

  1. Sertakan folder JetpackCompose Utilities. Folder ini mencakup helper untuk menyusun objek dan aset NativeAdView.

Tulis 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, inflate 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("/21775744923/example/native", 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("/21775744923/example/native", 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. GMA Next-Gen SDK mencoba mencatat peringatan ke dalam log 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, dan satu metode untuk mendaftarkan objek NativeAd itu sendiri. Dengan mendaftarkan tampilan dengan cara ini, SDK dapat otomatis menangani tugas seperti:

  • Mencatat klik
  • Mencatat tayangan iklan saat piksel pertama terlihat di layar
  • Menampilkan overlay AdChoices untuk materi iklan pengisian ulang native—saat ini terbatas untuk grup penayang tertentu

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 GMA Next-Gen SDK 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 GMA Next-Gen SDK 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 sebagai tampilan iklan oleh SDK saat iklan pengisian ulang ditampilkan. Jika aplikasi Anda menggunakan pengisian ulang iklan native, sisakan ruang di sudut pilihan tampilan iklan native untuk logo AdChoices yang disisipkan secara otomatis. Selain itu, overlay AdChoices harus terlihat, jadi pilihlah warna dan gambar latar belakang dengan tepat. Untuk informasi selengkapnya tentang tampilan dan fungsi overlay, lihat panduan penerapan iklan native terprogram.

Atribusi iklan untuk iklan native terprogram

Saat menampilkan iklan native terprogram, Anda harus menampilkan atribusi iklan untuk menunjukkan bahwa tampilan tersebut adalah iklan. Pelajari lebih lanjut di panduan kebijakan kami.

Menangani klik

Jangan terapkan pengendali klik kustom pada tampilan apa pun di atas atau di 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 GMA Next-Gen SDK:

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 gambar diskalakan 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.

Tambahkan ringkasan materi iklan

Dalam aplikasi percakapan dan chat AI, GMA Next-Gen SDK menyediakan aset ringkasan materi iklan (creativeSummary) untuk materi iklan. Anda dapat mengintegrasikan iklan ke dalam alur chat aplikasi dengan pesan pengantar.

Menambahkan tampilan teks ke tata letak

Tambahkan TextView untuk aset ringkasan materi iklan di dalam tata letak penampung NativeAdView:

<TextView
    android:id="@+id/ad_creative_summary"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="13sp" />

Mengisi dan mendaftarkan tampilan

Isi TextView dengan creativeSummary dan daftarkan dengan properti creativeSummaryView pada objek NativeAdView Anda. Mendaftarkan tampilan akan mengaktifkan pelacakan klik otomatis untuk aset ringkasan materi iklan.

Kotlin

private fun populateCreativeSummary(
  nativeAd: NativeAd,
  nativeAdBinding: NativeAdBinding,
  nativeAdView: NativeAdView,
) {
  val summary = nativeAd.creativeSummary
  if (summary == null) {
    nativeAdBinding.adCreativeSummary.visibility = View.GONE
    return
  }

  nativeAdBinding.adCreativeSummary.text = summary
  nativeAdBinding.adCreativeSummary.visibility = View.VISIBLE
  nativeAdView.creativeSummaryView = nativeAdBinding.adCreativeSummary
}

Java

private void populateCreativeSummary(
    NativeAd nativeAd, NativeAdBinding nativeAdBinding, NativeAdView nativeAdView) {
  String summary = nativeAd.getCreativeSummary();
  if (summary == null) {
    nativeAdBinding.adCreativeSummary.setVisibility(View.GONE);
    return;
  }

  nativeAdBinding.adCreativeSummary.setText(summary);
  nativeAdBinding.adCreativeSummary.setVisibility(View.VISIBLE);
  nativeAdView.setCreativeSummaryView(nativeAdBinding.adCreativeSummary);
}

Pelacakan klik dan teks yang diubah

  • Rendering langsung: Saat Anda merender string creativeSummary persis yang disediakan oleh SDK, daftarkan string tersebut ke properti creativeSummaryView di dalam penampung NativeAdView untuk mengaktifkan penanganan klik SDK.
  • Pengantar yang dimodifikasi: Jika aplikasi Anda mengubah, meringkas, atau menambahkan teks percakapan kustom ke ringkasan materi iklan, tempatkan teks yang dimodifikasi di luar penampung NativeAdView.

Menghancurkan iklan

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

Kotlin

nativeAd.destroy()

Java

nativeAd.destroy();

Menguji kode iklan native

Iklan yang dijual langsung

Jika ingin menguji seperti apa iklan native yang dijual langsung, Anda dapat menggunakan ID unit iklan Ad Manager ini:

/21775744923/example/native

Iklan ini dikonfigurasi untuk menayangkan contoh iklan instal aplikasi dan iklan konten, serta format iklan native kustom dengan aset berikut:

  • Judul (teks)
  • MainImage (gambar)
  • Teks (teks)

ID template untuk format iklan native kustom adalah 10063170.

Iklan pengisian ulang native

Pengisian ulang Ad Exchange dibatasi untuk beberapa penayang tertentu. Untuk menguji perilaku iklan pengisian ulang native, gunakan unit iklan Ad Manager ini:

/21775744923/example/native-backfill

Aplikasi ini menayangkan contoh iklan instal aplikasi dan iklan konten yang menyertakan overlay AdChoices.

Ingatlah untuk memperbarui kode Anda agar merujuk ke ID unit iklan dan ID template yang sebenarnya sebelum ditayangkan.

Langkah berikutnya

Pelajari topik berikut:

Contoh

Download dan jalankan aplikasi contoh yang menunjukkan penggunaan GMA Next-Gen SDK.