Native lanjutan

Menampilkan NativeAd

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

Class NativeAdView

Untuk format NativeAd, ada class NativeAdView yang sesuai. Class ini adalah ViewGroup yang harus digunakan penayang sebagai root untuk NativeAd. Satu NativeAdView sesuai dengan satu iklan native. Setiap tampilan yang digunakan untuk menampilkan aset iklan tersebut (misalnya, ImageView yang menampilkan aset screenshot) harus merupakan turunan dari objek NativeAdView.

Hierarki tampilan untuk iklan native yang menggunakan LinearLayout untuk menampilkan tampilan asetnya mungkin terlihat seperti ini:

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

Berikut adalah contoh yang membuat NativeAdView dan mengisinya dengan NativeAd:

Java

AdLoader.Builder builder = new AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    .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.
            populateNativeAdView(nativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});

Kotlin

val builder = AdLoader.Builder(this, "ca-app-pub-3940256099942544/2247696110")
    .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.
        populateNativeAdView(nativeAd, adView)
        frameLayout.removeAllViews()
        frameLayout.addView(adView)
    }

Perhatikan bahwa semua aset untuk iklan native tertentu harus dirender di dalam tata letak NativeAdView. Google Mobile Ads SDK 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 individu, dan satu metode untuk mendaftarkan objek NativeAd itu sendiri. Dengan mendaftarkan tampilan dengan cara ini, SDK dapat otomatis menangani tugas seperti:

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

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 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 panduan kebijakan kami.

Contoh kode

Berikut adalah langkah-langkah untuk menampilkan iklan native:

  1. Buat instance class NativeAdView.

  2. Untuk setiap aset iklan yang akan ditampilkan:

    1. Isi tampilan aset dengan aset dalam objek iklan.
    2. Daftarkan tampilan aset dengan class NativeAdView.

  3. Daftarkan MediaView jika tata letak iklan native Anda menyertakan aset media yang besar.

  4. Daftarkan objek iklan dengan class NativeAdView.

Berikut adalah contoh fungsi yang menampilkan 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 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 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)
}

Berikut adalah tugas individu:

  1. Meng-inflate tata letak

    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

    Kode ini meng-inflate tata letak XML yang berisi tampilan untuk menampilkan iklan native, lalu menemukan referensi ke NativeAdView. Perhatikan bahwa Anda juga dapat menggunakan kembali NativeAdView yang ada jika ada di fragmen atau aktivitas, atau bahkan membuat instance secara dinamis tanpa menggunakan file tata letak.

  2. Mengisi dan mendaftarkan tampilan aset

    Kode contoh ini menemukan tampilan yang digunakan untuk menampilkan judul, menetapkan teksnya menggunakan aset string yang disediakan oleh objek iklan, dan mendaftarkannya dengan objek 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

    Proses menemukan tampilan, menetapkan nilainya, dan mendaftarkannya dengan class tampilan iklan harus diulang untuk setiap aset yang disediakan oleh objek iklan native yang akan ditampilkan aplikasi.

  3. Menangani klik

    Jangan terapkan pengendali klik kustom pada tampilan apa pun di atas atau dalam tampilan iklan native. Klik pada aset tampilan iklan ditangani oleh SDK selama Anda mengisi dan mendaftarkan tampilan aset dengan benar, seperti yang telah dibahas di bagian sebelumnya.

    Untuk memproses klik, terapkan callback klik Google Mobile Ads SDK:

    Java

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

  4. Mendaftarkan MediaView

    Anda harus menggunakan aset MediaView dan bukan aset ImageView jika ingin menyertakan aset gambar utama dalam tata letak untuk iklan native Anda.

    MediaView adalah View khusus yang dirancang untuk menampilkan aset media utama, baik video maupun gambar.

    MediaView dapat ditentukan dalam tata letak XML atau dibuat secara dinamis. Tampilan ini harus ditempatkan dalam hierarki tampilan NativeAdView, seperti tampilan aset lainnya. Aplikasi yang menggunakan MediaView harus mendaftarkannya dengan NativeAdView:

    Java

     // Populate and register the media asset view.
 nativeAdView.setMediaView(nativeAdBinding.adMedia);

    Kotlin

     // Populate and register the media asset view.
 nativeAdView.mediaView = nativeAdBinding.adMedia

    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:

    Java

    mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);

    Kotlin

    mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP

    MediaContent

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

    • Jika tersedia, aset video 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.

    Secara default, mainImage adalah aset gambar pertama yang didownload. Jika setReturnUrlsForImageAssets(true) digunakan, mainImage adalah null dan Anda harus menetapkan properti mainImage ke gambar yang didownload secara manual. Perhatikan bahwa gambar ini hanya akan digunakan jika tidak ada aset video yang tersedia.

  5. Mendaftarkan objek iklan native

    Langkah terakhir ini mendaftarkan objek iklan native dengan tampilan yang bertanggung jawab untuk menampilkannya.

    Java

    adView.setNativeAd(ad);

    Kotlin

    adView.setNativeAd(ad)

Menghancurkan iklan

Setelah selesai menampilkan iklan native, Anda harus menghancurkannya agar iklan dihapus dengan benar.

Java

nativeAd.destroy();

Kotlin

nativeAd.destroy()

Contoh di GitHub

Contoh penerapan iklan native yang lengkap:

Java Kotlin

Langkah berikutnya

Pelajari topik berikut: