Lanjutan asli

Tampilkan NativeAd

Saat iklan bawaan dimuat, SDK Iklan Seluler Google memanggil pemroses untuk format iklan yang sesuai. Aplikasi Anda kemudian bertanggung jawab untuk menampilkan iklan, meskipun tidak harus segera melakukannya. Untuk mempermudah menampilkan format iklan yang ditentukan sistem, SDK menawarkan beberapa sumber daya yang berguna, seperti yang dijelaskan di bawah ini.

Kelas NativeAdView

Untuk format NativeAd , ada kelas NativeAdView yang sesuai. Kelas ini adalah ViewGroup yang harus digunakan penerbit sebagai root untuk NativeAd . Satu NativeAdView sesuai dengan satu iklan bawaan. Setiap tampilan yang digunakan untuk menampilkan aset iklan tersebut ( ImageView yang menampilkan aset tangkapan layar, misalnya) harus merupakan turunan dari objek NativeAdView .

Hirarki tampilan untuk iklan bawaan 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>


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

Jawa

AdLoader.Builder builder = new AdLoader.Builder(this, "<your 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, "<your 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)
    }

Kelas 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 untuk secara otomatis menangani tugas-tugas seperti:

  • Merekam klik
  • Merekam tayangan (saat piksel pertama terlihat di layar)
  • Menampilkan hamparan PilihanIklan

Hamparan PilihanIklan

Hamparan PilihanIklan ditambahkan ke setiap tampilan iklan oleh SDK. Sisakan ruang di sudut pilihan tampilan iklan bawaan Anda untuk logo PilihanIklan yang disisipkan secara otomatis. Selain itu, penting agar hamparan PilihanIklan mudah dilihat, jadi pilihlah warna dan gambar latar belakang dengan tepat. Untuk informasi selengkapnya tentang tampilan dan fungsi hamparan, lihat Deskripsi bidang lanjutan iklan bawaan .

Atribusi iklan

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

Contoh kode

Berikut adalah langkah-langkah untuk menampilkan iklan bawaan:

  1. Buat instance kelas NativeAdView .
  2. Untuk setiap aset iklan yang akan ditampilkan:
    1. Isi tampilan aset dengan aset di objek iklan.
    2. Daftarkan tampilan aset dengan kelas ViewGroup .
  3. Daftarkan MediaView jika tata letak iklan bawaan Anda menyertakan aset media yang besar.
  4. Daftarkan objek iklan dengan kelas ViewGroup .

Berikut adalah contoh fungsi yang menampilkan NativeAd :

Jawa

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.my_ad_layout, 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.my_ad_layout, 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)
}

Mari kita lihat tugas individu:

Mengembang tata letak

Jawa

LayoutInflater inflater = (LayoutInflater) parent.getContext()
        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
NativeAdView adView = (NativeAdView) inflater
        .inflate(R.layout.my_ad_layout, parent);

Kotlin

val inflater = parent.getContext().getSystemService(Context.LAYOUT_INFLATER_SERVICE)
        as LayoutInflater
val adView = inflater.inflate(R.layout.my_ad_layout, parent) as NativeAdView

Dalam contoh ini, kami mengembangkan tata letak XML yang berisi tampilan untuk menampilkan iklan bawaan, lalu mencari referensi ke NativeAdView . Perhatikan bahwa Anda juga dapat menggunakan kembali NativeAdView yang ada jika ada di fragmen atau aktivitas Anda, atau bahkan membuat instance secara dinamis tanpa menggunakan file tata letak.

Isi dan daftarkan tampilan aset

Kode contoh ini menempatkan tampilan yang digunakan untuk menampilkan judul, menyetel teksnya menggunakan aset string yang disediakan oleh objek iklan, dan mendaftarkannya dengan objek NativeAdView :

Jawa

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, menyetel nilainya, dan mendaftarkannya ke kelas tampilan iklan harus diulang untuk setiap aset yang disediakan oleh objek iklan bawaan yang akan ditampilkan aplikasi.

Penanganan klik

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

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

Jawa

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, 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, "ca-app-pub-3940256099942544/2247696110")
    ...
    .withAdListener(object : AdListener() {
        override fun onAdFailedToLoad(adError: LoadAdError) {
            // Handle the failure by logging, altering the UI, and so on.
        }
    })
    .build()

Daftarkan MediaView

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

MediaView dapat didefinisikan dalam tata letak XML atau dibangun secara dinamis. Itu harus ditempatkan dalam hierarki tampilan NativeAdView , sama seperti tampilan aset lainnya. Aplikasi yang menggunakan MediaView harus mendaftarkannya ke NativeAdView seperti ini:

Jawa

MediaView mediaView = adView.findViewById(R.id.ad_media);
adView.setMediaView(mediaView);

Kotlin

adView.mediaView = adView.findViewById<MediaView>(R.id.ad_media)

Seperti semua tampilan aset, tampilan media harus diisi kontennya. Ini dilakukan menggunakan metode getMediaContent() untuk mengambil konten media yang dapat diteruskan ke MediaView . Berikut adalah cuplikan kode yang mengatur konten media untuk tampilan media:

Jawa

mediaView.setMediaContent(nativeAd.getMediaContent());

Kotlin

mediaView.mediaContent = nativeAd.mediaContent

Mengatur ImageScaleType

Kelas MediaView memiliki properti ImageScaleType saat menampilkan gambar. Jika Anda ingin mengubah cara gambar diskalakan di MediaView , setel ImageView.ScaleType yang sesuai menggunakan metode setImageScaleType() dari MediaView .

Misalnya, untuk mengisi MediaView saat gambar ditampilkan (iklan tidak memiliki video):

Jawa

mediaView.setImageScaleType(ImageView.ScaleType.CENTER_CROP);

Kotlin

mediaView.imageScaleType = ImageView.ScaleType.CENTER_CROP

Contoh GitHub

Repositori GitHub kami memiliki implementasi lengkap untukiklan Native Advanced ditulis dalam Java dan Kotlin.

Unduh Contoh Native Lanjutan

Konten media

Kelas MediaContent menyimpan data yang terkait dengan konten media iklan bawaan, yang ditampilkan menggunakan kelas MediaView . Saat properti MediaView mediaContent disetel dengan instance MediaContent :

  • Jika aset video tersedia, aset tersebut 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 diunduh dan ditempatkan di dalam MediaView .

Daftarkan objek iklan asli

Langkah terakhir ini mendaftarkan objek iklan bawaan dengan tampilan yang bertanggung jawab untuk menampilkannya:

Jawa

adView.setNativeAd(ad);

Kotlin

adView.setNativeAd(ad)

Hancurkan iklan

Ketika Anda selesai menampilkan iklan asli Anda, Anda harus menghancurkannya sehingga iklan tersebut dikumpulkan dengan benar.

Jawa

nativeAd.destroy();

Kotlin

nativeAd.destroy()