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 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
:
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 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:
- Mencatat klik
- Mencatat tayangan saat piksel pertama terlihat di layar
- Menampilkan overlay AdChoices
Overlay AdChoices
Overlay AdChoices ditambahkan ke setiap tampilan iklan oleh SDK. Tinggalkan ruang di sudut yang diinginkan dari tampilan iklan native untuk logo AdChoices yang disisipkan secara otomatis. Penting penting agar overlay AdChoices mudah dilihat, jadi pilih warna latar belakang dan gambar dengan tepat. Untuk informasi selengkapnya tentang tampilan dan , lihat Kolom iklan native deskripsi.
Atribusi iklan
Anda harus menampilkan atribusi iklan untuk menunjukkan bahwa tampilan tersebut adalah iklan. Pelajari lebih lanjut dalam kebijakan kami pedoman kami.
Contoh kode
Berikut langkah-langkah untuk menampilkan iklan native:
- Buat instance class
NativeAdView
. - Untuk setiap aset iklan yang akan ditampilkan:
- Isi tampilan aset dengan aset dalam objek iklan.
- 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 masing-masing tugasnya:
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 bisa menggunakan kembaliNativeAdView
yang ada jika ada dalam fragmen atau aktivitas Anda, atau bahkan membuat instance secara dinamis tanpa menggunakan file tata letak.Mengisi dan mendaftarkan tampilan aset
Kode contoh ini mencari tampilan yang digunakan untuk menampilkan judul, menyetel teksnya menggunakan aset string yang disediakan oleh objek iklan, dan mendaftarkannya pada 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.
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 benar mengisi dan mendaftarkan tampilan aset, seperti yang dibahas di bagian sebelumnya.
Berikut adalah contoh yang menggunakan iklan pemroses untuk mengamati peristiwa klik:
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, 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()
Mendaftarkan MediaView
Anda harus menggunakan
MediaView
aset alih-alihImageView
jika ingin menyertakan aset gambar utama dalam tata letak untuk .MediaView
adalahView
khusus yang dirancang untuk menampilkan aset media utama, baik video maupun gambar.MediaView
dapat ditentukan dalam tata letak XML atau dibuat secara dinamis. Ini harus ditempatkan dalam hierarki tampilanNativeAdView
, sama seperti tampilan aset lainnya. Aplikasi yang menggunakanMediaView
harus mendaftarkannya denganNativeAdView
:Java
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, konten tampilan media harus diisi. Hal ini dilakukan dengan menggunakan
getMediaContent()
untuk mengambil konten media yang dapat diteruskan keMediaView
. 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 propertiImageScaleType
saat menampilkan gambar. Jika Anda ingin mengubah cara gambar diskalakan diMediaView
, setelImageView.ScaleType
yang sesuai menggunakansetImageScaleType()
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 classMediaView
. Jika PropertiMediaView
mediaContent
ditetapkan dengan instanceMediaContent
:Jika tersedia, aset video akan di-buffer dan mulai diputar di dalam
MediaView
. Anda dapat mengetahui apakah aset video tersedia dengan memeriksahasVideoContent()
.Jika iklan tidak berisi aset video, aset
mainImage
akan didownload dan ditempatkan di dalamMediaView
sebagai gantinya.
Secara default,
mainImage
adalah aset gambar pertama yang didownload. JikasetReturnUrlsForImageAssets(true)
digunakan,mainImage
adalahnull
dan Anda harus menetapkan propertimainImage
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()
Contoh di GitHub
Penerapan lengkap contoh iklan native:
Langkah berikutnya
Pelajari topik berikut: