Menampilkan format iklan native yang ditentukan sistem
Saat iklan native dimuat, aplikasi Anda akan menerima objek iklan native melalui salah satu pesan protokol GADAdLoaderDelegate
. Aplikasi Anda kemudian bertanggung jawab untuk
menampilkan iklan (meskipun tidak harus segera melakukannya).
Untuk mempermudah penayangan format iklan yang ditentukan sistem, SDK ini menawarkan beberapa referensi
yang berguna.
GWSNativeAdView
Untuk GADNativeAd
, ada class "tampilan iklan"
yang sesuai:
GADNativeAdView
.
Kelas tampilan iklan ini adalah UIView
yang harus digunakan penayang untuk menampilkan iklan.
Satu GADNativeAdView
, misalnya, dapat menampilkan satu instance
GADNativeAd
. Setiap objek UIView
yang digunakan untuk menampilkan aset
iklan tersebut harus merupakan subtampilan dari objek GADNativeAdView
tersebut.
Misalnya, jika Anda menampilkan iklan dalam UITableView
, hierarki tampilan untuk salah satu sel mungkin terlihat seperti ini:
Class GADNativeAdView
juga menyediakan IBOutlets
yang digunakan untuk mendaftarkan
tampilan yang digunakan untuk setiap aset, dan metode untuk mendaftarkan
objek GADNativeAd
itu sendiri. Mendaftarkan tampilan dengan cara ini memungkinkan SDK untuk secara otomatis
menangani tugas seperti:
- Merekam klik.
- Merekam tayangan (saat piksel pertama terlihat di layar).
- Menampilkan overlay AdChoices.
Overlay AdChoices
Untuk iklan native tidak langsung (ditayangkan melalui Ad Manager pengisian ulang atau melalui Ad Exchange atau AdSense), overlay AdChoices ditambahkan oleh SDK. Sisakan ruang di sudut pilihan Anda pada tampilan iklan native untuk logo AdChoices yang otomatis disisipkan. Selain itu, pastikan overlay AdChoices ditempatkan pada konten yang memungkinkan ikon terlihat dengan mudah. Untuk informasi selengkapnya tentang tampilan dan fungsi overlay, lihat panduan penerapan iklan native terprogram.
Atribusi iklan untuk iklan native terprogram
Saat menampilkan iklan native terprogram, Anda harus menampilkan atribusi iklan untuk menunjukkan bahwa tampilan adalah iklan. Lihat halaman ini untuk mengetahui panduan kebijakan.
Contoh kode
Mari kita lihat cara menampilkan iklan native menggunakan tampilan yang dimuat secara dinamis
dari file xib. Hal ini dapat menjadi pendekatan yang sangat berguna saat menggunakan GADAdLoaders
yang dikonfigurasi untuk meminta beberapa format.
Menata letak UIView
Langkah pertama adalah menata letak UIViews
yang akan menampilkan aset iklan native.
Anda dapat melakukannya di Interface Builder seperti yang Anda lakukan saat membuat file xib lainnya. Berikut adalah tampilan tata letak untuk iklan
native:
Perhatikan nilai Custom Class di kanan atas gambar. Fitur ini disetel ke
GADNativeAdView
.
Ini adalah class tampilan iklan yang digunakan untuk menampilkan GADNativeAd
.
Anda juga harus menetapkan class kustom untuk GADMediaView
, yang digunakan
untuk menampilkan video atau gambar untuk iklan.
Menghubungkan stopkontak ke tampilan
Setelah tampilan diterapkan dan Anda telah menetapkan class tampilan iklan yang benar ke
tata letak, tautkan outlet aset tampilan iklan ke UIViews
yang telah Anda buat.
Berikut adalah cara menautkan outlet aset tampilan iklan ke UIViews
yang dibuat
untuk iklan:
Di panel stopkontak, stopkontak di GADNativeAdView
telah ditautkan ke
UIViews
yang tercantum di Builder Pembuat. Hal ini memungkinkan
SDK mengetahui UIView
mana yang menampilkan aset mana.
Penting juga untuk diingat bahwa outlet ini mewakili tampilan yang dapat diklik di iklan.
Menampilkan iklan
Setelah tata letak selesai dan stopkontak ditautkan, langkah terakhir adalah menambahkan kode ke aplikasi Anda yang menampilkan iklan setelah dimuat. Berikut adalah metode untuk menampilkan iklan di tampilan yang ditentukan di atas:
Swift
// Mark: - GADNativeAdLoaderDelegate func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADNativeAd) { print("Received native ad: \(nativeAd)") refreshAdButton.isEnabled = true // Create and place ad in view hierarchy. let nibView = Bundle.main.loadNibNamed("NativeAdView", owner: nil, options: nil)?.first guard let nativeAdView = nibView as? GADNativeAdView else { return } setAdView(nativeAdView) // Set ourselves as the native ad delegate to be notified of native ad events. nativeAd.delegate = self // Populate the native ad view with the native ad assets. // The headline and mediaContent are guaranteed to be present in every native ad. (nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent // This app uses a fixed width for the GADMediaView and changes its height to match the aspect // ratio of the media it displays. if let mediaView = nativeAdView.mediaView, nativeAd.mediaContent.aspectRatio > 0 { let heightConstraint = NSLayoutConstraint( item: mediaView, attribute: .height, relatedBy: .equal, toItem: mediaView, attribute: .width, multiplier: CGFloat(1 / nativeAd.mediaContent.aspectRatio), constant: 0) heightConstraint.isActive = true } // These assets are not guaranteed to be present. Check that they are before // showing or hiding them. (nativeAdView.bodyView as? UILabel)?.text = nativeAd.body nativeAdView.bodyView?.isHidden = nativeAd.body == nil (nativeAdView.callToActionView as? UIButton)?.setTitle(nativeAd.callToAction, for: .normal) nativeAdView.callToActionView?.isHidden = nativeAd.callToAction == nil (nativeAdView.iconView as? UIImageView)?.image = nativeAd.icon?.image nativeAdView.iconView?.isHidden = nativeAd.icon == nil (nativeAdView.starRatingView as? UIImageView)?.image = imageOfStars( fromStarRating: nativeAd.starRating) nativeAdView.starRatingView?.isHidden = nativeAd.starRating == nil (nativeAdView.storeView as? UILabel)?.text = nativeAd.store nativeAdView.storeView?.isHidden = nativeAd.store == nil (nativeAdView.priceView as? UILabel)?.text = nativeAd.price nativeAdView.priceView?.isHidden = nativeAd.price == nil (nativeAdView.advertiserView as? UILabel)?.text = nativeAd.advertiser nativeAdView.advertiserView?.isHidden = nativeAd.advertiser == nil // In order for the SDK to process touch events properly, user interaction should be disabled. nativeAdView.callToActionView?.isUserInteractionEnabled = false // Associate the native ad view with the native ad object. This is // required to make the ad clickable. // Note: this should always be done after populating the ad views. nativeAdView.nativeAd = nativeAd }
Objective-C
#pragma mark GADNativeAdLoaderDelegate implementation - (void)adLoader:(GADAdLoader *)adLoader didReceiveNativeAd:(GADNativeAd *)nativeAd { NSLog(@"Received native ad: %@", nativeAd); self.refreshButton.enabled = YES; // Create and place ad in view hierarchy. GADNativeAdView *nativeAdView = [[NSBundle mainBundle] loadNibNamed:@"NativeAdView" owner:nil options:nil].firstObject; [self setAdView:nativeAdView]; // Set the mediaContent on the GADMediaView to populate it with available // video/image asset. nativeAdView.mediaView.mediaContent = nativeAd.mediaContent; // Populate the native ad view with the native ad assets. // The headline is guaranteed to be present in every native ad. ((UILabel *)nativeAdView.headlineView).text = nativeAd.headline; // These assets are not guaranteed to be present. Check that they are before // showing or hiding them. ((UILabel *)nativeAdView.bodyView).text = nativeAd.body; nativeAdView.bodyView.hidden = nativeAd.body ? NO : YES; [((UIButton *)nativeAdView.callToActionView)setTitle:nativeAd.callToAction forState:UIControlStateNormal]; nativeAdView.callToActionView.hidden = nativeAd.callToAction ? NO : YES; ((UIImageView *)nativeAdView.iconView).image = nativeAd.icon.image; nativeAdView.iconView.hidden = nativeAd.icon ? NO : YES; ((UIImageView *)nativeAdView.starRatingView).image = [self imageForStars:nativeAd.starRating]; nativeAdView.starRatingView.hidden = nativeAd.starRating ? NO : YES; ((UILabel *)nativeAdView.storeView).text = nativeAd.store; nativeAdView.storeView.hidden = nativeAd.store ? NO : YES; ((UILabel *)nativeAdView.priceView).text = nativeAd.price; nativeAdView.priceView.hidden = nativeAd.price ? NO : YES; ((UILabel *)nativeAdView.advertiserView).text = nativeAd.advertiser; nativeAdView.advertiserView.hidden = nativeAd.advertiser ? NO : YES; // In order for the SDK to process touch events properly, user interaction // should be disabled. nativeAdView.callToActionView.userInteractionEnabled = NO; // Associate the native ad view with the native ad object. This is // required to make the ad clickable. nativeAdView.nativeAd = nativeAd; }
Repositori GitHub memiliki implementasi lengkap untuk iklan rendering kustom native yang ditulis di Swift dan Objective-C.
Download Contoh Rendering Kustom Google Ad Manager
GWSMediaView
Aset gambar dan video ditampilkan kepada pengguna melalui
GADMediaView
.
Ini adalah UIView
yang dapat ditentukan dalam file xib atau dibuat secara dinamis.
Aset harus ditempatkan dalam hierarki tampilan GADNativeAdView
, seperti
tampilan aset lainnya.
Seperti semua tampilan aset, kontennya harus
diisi media tampilan. Ini disetel menggunakan
properti
mediaContent
di GADMediaView
. Properti
mediaContent
dari
GADNativeAd
berisi konten media yang dapat diteruskan ke
GADMediaView
.
Berikut cuplikan dari
Contoh Rendering Kustom
(Swift
| Objective-C)
yang menunjukkan cara mengisi GADMediaView
dengan aset iklan native menggunakan
GADMediaContent
dari GADNativeAd
:
Swift
nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
Objective-C
nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;
Pastikan dalam file builder antarmuka untuk tampilan iklan native Anda memiliki
class kustom tampilan yang ditetapkan ke GADMediaView
dan Anda telah menghubungkannya ke
outlet mediaView
.
Mengubah Mode Konten Gambar
Class GADMediaView
mengikuti properti UIView
contentMode
saat menampilkan gambar. Jika Anda ingin mengubah skala gambar di
GADMediaView
, tetapkan
UIViewContentMode
yang sesuai di properti contentMode
dari GADMediaView
untuk mencapainya.
Misalnya, untuk mengisi GADMediaView
saat gambar ditampilkan (iklan tidak memiliki
video):
Swift
nativeAdView.mediaView?.contentMode = .aspectFill
Objective-C
nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;
KontenMedia{6}
Class GADMediaContent
menyimpan data yang terkait dengan konten media iklan native, yang
ditampilkan menggunakan class GADMediaView
. Jika ditetapkan di properti mediaContent
GADMediaView
:
Jika aset video tersedia, aset tersebut akan di-buffer dan mulai diputar di dalam
GADMediaView
. Anda dapat mengetahui apakah aset video tersedia dengan memeriksahasVideoContent
.Jika iklan tidak berisi aset video, aset
mainImage
akan didownload dan ditempatkan di dalamGADMediaView
.
Langkah berikutnya
Pelajari privasi pengguna lebih lanjut.