Halaman ini diterjemahkan oleh Cloud Translation API.

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 dilakukan dengan segera. Untuk menampilkan format iklan yang ditetapkan sistem lebih mudah, SDK menawarkan beberapa sumber daya yang berguna, yang dijelaskan di bawah.

Class `NativeAdView`

Untuk format NativeAd, terdapat atribut yang sesuai NativeAdView . Kelas ini adalah ViewGroup yang harus digunakan penerbit sebagai root untuk NativeAd. J NativeAdView tunggal setara dengan satu iklan native. Setiap tampilan yang digunakan untuk menampilkan aset iklan tersebut (ImageView yang menampilkan (misalnya, aset screenshot) harus merupakan turunan dari NativeAdView .

Hierarki tampilan untuk iklan native yang menggunakan LinearLayout untuk menampilkan tampilan asetnya akan 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>


         // Other assets such as image or media view, call to action, etc follow.
         ...
    </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, "AD_UNIT_ID")
    .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 text, images and the native ad, etc into the ad
            // view.
            populateNativeAdView(nativeAd, adView);
            frameLayout.removeAllViews();
            frameLayout.addView(adView);
        }
});

Kotlin

val builder = AdLoader.Builder(this, "AD_UNIT_ID")
    .forNativeAd { nativeAd ->
        // 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 text, images and the native ad, etc into the ad
        // view.
        populateNativeAdView(nativeAd, 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)
    }

Perhatikan bahwa semua aset untuk iklan native 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.

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

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

Overlay AdChoices

Overlay AdChoices ditambahkan sebagai tampilan iklan oleh SDK saat iklan isi ulang dikembalikan. Jika aplikasi Anda menggunakan pengisian ulang iklan native, sisakan ruang di sudut yang diinginkan tampilan iklan native untuk logo AdChoices yang dimasukkan secara otomatis. Penting penting agar overlay AdChoices mudah dilihat, jadi pilih latar belakang warna dan gambar 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 programmatic native, Anda harus menampilkan atribusi iklan ke menunjukkan bahwa tampilan tersebut adalah iklan. Pelajari lebih lanjut di panduan kebijakan kami.

Contoh kode

Berikut langkah-langkah untuk menampilkan iklan native:

Buat instance class NativeAdView.
Untuk setiap aset iklan yang akan ditampilkan:
1. Isi tampilan aset dengan aset dalam objek iklan.
2. Daftarkan tampilan aset dengan class ViewGroup.
Daftarkan MediaView jika tata letak iklan native menyertakan aset media berukuran besar.
Daftarkan objek iklan dengan class ViewGroup.

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

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

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 ini untuk menemukan tampilan, mengatur nilainya, dan mendaftarkannya dengan kelas tampilan iklan harus diulang untuk setiap aset yang disediakan oleh objek iklan native yang akan ditampilkan aplikasi.

Menangani klik

Jangan terapkan pengendali klik kustom apa pun pada tampilan di atas atau di dalam tampilan iklan native. Untuk mengamati sendiri peristiwa klik, gunakan iklan pemroses.

Klik pada aset tampilan iklan ditangani oleh SDK selama Anda mengisi dan mendaftarkan tampilan aset dengan benar, seperti yang telah dibahas di bagian sebelumnya.

Berikut adalah contoh yang menggunakan iklan pemroses untuk mengamati peristiwa klik:

Java

AdLoader adLoader = new AdLoader.Builder(context, "/21775744923/example/native")
    ...
    .withAdListener(new AdListener() {
        @Override
        public void onAdFailedToLoad(LoadAdError adError) {
            // 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, "/21775744923/example/native")
    ...
    .withAdListener(object : AdListener() {
        override fun onAdFailedToLoad(adError: LoadAdError) {
            // Handle the failure by logging, altering the UI, and so on.
        }
    })
    .build()

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, video atau 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
```
MediaView mediaView = adView.findViewById(R.id.ad_media);
adView.setMediaView(mediaView);
```
Kotlin
```
adView.mediaView = adView.findViewById<MediaView>(R.id.ad_media)
```
Seperti halnya semua tampilan aset, tampilan media harus memiliki kontennya. Hal ini dilakukan dengan menggunakan getMediaContent() untuk mengambil konten media yang dapat diteruskan ke MediaView. Berikut adalah cuplikan kode yang menyetel konten media untuk media tersebut lihat:
Java
```
mediaView.setMediaContent(nativeAd.getMediaContent());
```
Kotlin
```
mediaView.mediaContent = nativeAd.mediaContent
```
ImageScaleType

Class MediaView memiliki properti ImageScaleType saat menampilkan gambar. Jika Anda ingin mengubah cara gambar diskalakan di MediaView, setel ImageView.ScaleType yang sesuai menggunakan setImageScaleType() 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 kelas 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 sebagai gantinya.
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 hanya akan digunakan jika tidak ada aset video.
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)
```

Hancurkan iklan

Setelah selesai menampilkan iklan native, Anda harus menghancurkannya agar iklan tersebut adalah pengumpulan sampah yang benar.

Java

nativeAd.destroy();

Kotlin

nativeAd.destroy()

Menguji kode iklan native

Iklan yang dijual langsung

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

/21775744923/example/native

Iklan ini dikonfigurasi untuk menayangkan contoh iklan konten dan instal aplikasi, 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 saat ini dibatasi untuk grup penayang tertentu. Kepada uji perilaku iklan pengisian ulang native, gunakan unit iklan Ad Manager ini:

/21775744923/example/native-backfill

Menayangkan contoh iklan instal aplikasi dan konten yang menyertakan AdChoices menjadi overlay.

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

Contoh di GitHub

Penerapan lengkap contoh iklan native:

Java Kotlin

Langkah berikutnya

Pelajari topik berikut:

Native lanjutan

Menampilkan NativeAd

Class NativeAdView

Java

Kotlin

Overlay AdChoices

Atribusi iklan untuk iklan native terprogram

Contoh kode

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

Java

Kotlin

ImageScaleType

Java

Kotlin

MediaContent

Java

Kotlin

Hancurkan iklan

Java

Kotlin

Menguji kode iklan native

Iklan yang dijual langsung

Iklan pengisian ulang native

Contoh di GitHub

Langkah berikutnya

Class `NativeAdView`