Menampilkan NativeAd
Saat iklan native dimuat, Google Mobile Ads SDK memanggil pemroses untuk format iklan yang sesuai. Aplikasi Anda kemudian bertanggung jawab untuk menampilkan iklan, meskipun tidak harus melakukannya secara langsung. Untuk mempermudah menampilkan format iklan yang ditentukan sistem, SDK menawarkan beberapa resource yang berguna, seperti yang dijelaskan di bawah.
Tentukan 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 berupa turunan dari objek NativeAdView
.
Tata Letak XML
Tambahkan NativeAdView
XML ke project Anda:
<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>
Jetpack Compose
Sertakan modul JetpackComposeDemo/compose-util
yang menyertakan helper untuk menyusun NativeAdView
dan asetnya.
Menggunakan modul compose-util
, susun 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, perluas tampilan iklan native, dan tambahkan ke hierarki tampilan:
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)
}
Jetpack Compose
@Composable
/** Load and display a native ad. */
fun NativeScreen() {
var nativeAd by remember { mutableStateOf<NativeAd?>(null) }
val context = LocalContext.current
var isDisposed by remember { mutableStateOf(false) }
DisposableEffect(Unit) {
// Load the native ad when we launch this screen
loadNativeAd(
context = context,
onAdLoaded = { ad ->
// Handle the native ad being loaded.
if (!isDisposed) {
nativeAd = ad
} else {
// Destroy the native ad if loaded after the screen is disposed.
ad.destroy()
}
},
)
// Destroy the native ad to prevent memory leaks when we dispose of this screen.
onDispose {
isDisposed = true
nativeAd?.destroy()
nativeAd = null
}
}
// Display the native ad view with a user defined template.
nativeAd?.let { adValue -> DisplayNativeAdView(adValue) }
}
fun loadNativeAd(context: Context, onAdLoaded: (NativeAd) -> Unit) {
val adLoader =
AdLoader.Builder(context, NATIVE_AD_UNIT_ID)
.forNativeAd { nativeAd -> onAdLoaded(nativeAd) }
.withAdListener(
object : AdListener() {
override fun onAdFailedToLoad(error: LoadAdError) {
Log.e(TAG, "Native ad failed to load: ${error.message}")
}
override fun onAdLoaded() {
Log.d(TAG, "Native ad was loaded.")
}
override fun onAdImpression() {
Log.d(TAG, "Native ad recorded an impression.")
}
override fun onAdClicked() {
Log.d(TAG, "Native ad was clicked.")
}
}
)
.build()
adLoader.loadAd(AdRequest.Builder().build())
}
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 individual, dan satu untuk mendaftarkan objek NativeAd
itu sendiri.
Mendaftarkan tampilan dengan cara ini memungkinkan SDK menangani tugas secara otomatis seperti:
- Merekam klik
- Merekam tayangan iklan 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 mengetahui 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 pedoman kebijakan 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
NativeAdView
.
Daftarkan
MediaView
jika tata letak iklan native Anda menyertakan aset media besar.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)
}
Jetpack Compose
@Composable
/** Display a native ad with a user defined template. */
fun DisplayNativeAdView(nativeAd: NativeAd) {
val context = LocalContext.current
Box(modifier = Modifier.padding(8.dp).wrapContentHeight(Alignment.Top)) {
// Call the NativeAdView composable to display the native ad.
NativeAdView {
// Inside the NativeAdView composable, display the native ad assets.
Column(Modifier.align(Alignment.TopStart).wrapContentHeight(Alignment.Top)) {
// Display the ad attribution.
NativeAdAttribution(text = context.getString(R.string.attribution))
Row {
// If available, display the icon asset.
nativeAd.icon?.let { icon ->
NativeAdIconView(Modifier.padding(5.dp)) {
icon.drawable?.toBitmap()?.let { bitmap ->
Image(bitmap = bitmap.asImageBitmap(), "Icon")
}
}
}
Column {
// If available, display the headline asset.
nativeAd.headline?.let {
NativeAdHeadlineView {
Text(text = it, style = MaterialTheme.typography.headlineLarge)
}
}
// If available, display the star rating asset.
nativeAd.starRating?.let {
NativeAdStarRatingView {
Text(text = "Rated $it", style = MaterialTheme.typography.labelMedium)
}
}
}
}
// If available, display the body asset.
nativeAd.body?.let { NativeAdBodyView { Text(text = it) } }
// Display the media asset.
NativeAdMediaView(Modifier.fillMaxWidth().height(500.dp).fillMaxHeight())
Row(Modifier.align(Alignment.End).padding(5.dp)) {
// If available, display the price asset.
nativeAd.price?.let {
NativeAdPriceView(Modifier.padding(5.dp).align(Alignment.CenterVertically)) {
Text(text = it)
}
}
// If available, display the store asset.
nativeAd.store?.let {
NativeAdStoreView(Modifier.padding(5.dp).align(Alignment.CenterVertically)) {
Text(text = it)
}
}
// If available, display the call to action asset.
// Note: The Jetpack Compose button implements a click handler which overrides the native
// ad click handler, causing issues. Use the NativeAdButton which does not implement a
// click handler. To handle native ad clicks, use the NativeAd AdListener onAdClicked
// callback.
nativeAd.callToAction?.let { callToAction ->
NativeAdCallToActionView(Modifier.padding(5.dp)) { NativeAdButton(text = callToAction) }
}
}
}
}
}
}
Berikut tugas-tugas individualnya:
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 kembaliNativeAdView
yang ada jika ada di fragmen atau aktivitas Anda, atau bahkan membuat instance secara dinamis tanpa menggunakan file tata letak.Mengisi dan mendaftarkan tampilan aset
Contoh kode ini menemukan tampilan yang digunakan untuk menampilkan judul, menyetel 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 diulangi untuk setiap aset yang disediakan oleh objek iklan native yang akan ditampilkan aplikasi.
Menangani klik
Jangan menerapkan pengendali klik kustom apa pun pada tampilan 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 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()
Mendaftarkan MediaView
Anda harus menggunakan aset
MediaView
dan bukan asetImageView
jika ingin menyertakan aset gambar utama dalam tata letak untuk iklan native Anda.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. Harus ditempatkan dalam hierarki tampilanNativeAdView
, seperti tampilan aset lainnya. Aplikasi yang menggunakanMediaView
harus mendaftarkannya keNativeAdView
: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 propertiImageScaleType
saat menampilkan gambar. Jika Anda ingin mengubah cara penskalaan gambar diMediaView
, tetapkanImageView.ScaleType
yang sesuai menggunakan metodesetImageScaleType()
dariMediaView
: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 aset video tersedia, aset tersebut 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
.
Secara default,
mainImage
adalah aset gambar yang pertama kali didownload. JikasetReturnUrlsForImageAssets(true)
digunakan,mainImage
adalahnull
dan Anda harus menetapkan propertimainImage
ke gambar yang Anda download secara manual. Perhatikan bahwa gambar ini hanya akan digunakan jika tidak ada aset video yang tersedia.Daftarkan 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 menampilkan iklan native, hancurkan iklan. Contoh berikut menghancurkan iklan native:
Java
nativeAd.destroy();
Kotlin
nativeAd.destroy()
Contoh di GitHub
Contoh penerapan lengkap iklan native:
Langkah berikutnya
Pelajari topik berikut: