Menampilkan format iklan native yang ditetapkan sistem
Ketika 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 dilakukan).
Untuk mempermudah penayangan format iklan yang ditetapkan sistem, SDK menawarkan beberapa
Google Cloud Platform.
GADNativeAdView
Untuk GADNativeAd
, ada "tampilan iklan" yang sesuai
:
GADNativeAdView
.
Kelas tampilan iklan ini adalah UIView
yang harus digunakan penayang untuk menampilkan iklan.
Misalnya, satu GADNativeAdView
dapat menampilkan satu instance
GADNativeAd
. Setiap objek UIView
yang digunakan untuk menampilkan
aset harus berupa subtampilan objek GADNativeAdView
tersebut.
Misalnya, jika Anda menampilkan iklan di 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 individu, dan metode untuk mendaftarkan
GADNativeAd
objek itu sendiri. Mendaftarkan tampilan dengan cara ini memungkinkan SDK secara otomatis
menangani tugas seperti:
- Mencatat klik.
- Mencatat tayangan (saat piksel pertama terlihat di layar).
- Menampilkan overlay AdChoices.
Overlay AdChoices
Untuk iklan native tidak langsung (yang disajikan melalui Ad Manager atau melalui Ad Exchange atau AdSense), overlay AdChoices ditambahkan dengan SDK. Sisakan ruang di pilihan Anda pojok tampilan iklan native untuk logo AdChoices yang disisipkan secara otomatis. Selain itu, buat pastikan overlay AdChoices ditempatkan pada konten yang memungkinkan ikon mudah dilihat. Untuk informasi selengkapnya tentang tampilan dan fungsi overlay, lihat metode panduan penerapan iklan native terprogram.
Atribusi iklan untuk iklan programmatic native
Saat menampilkan iklan programmatic native, Anda harus menampilkan atribusi iklan ke menunjukkan bahwa tampilan tersebut 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
dikonfigurasi untuk meminta beberapa format.
Mengatur tata 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
xib. Berikut ini cara tata letak untuk native
iklan mungkin terlihat:
Perhatikan nilai Kelas Khusus di kanan atas gambar. Sudah 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 iklan.
Menautkan stopkontak ke tampilan
Setelah tampilan diterapkan dan Anda menetapkan kelas tampilan iklan yang tepat untuk
tata letak, tautkan outlet aset tampilan iklan ke UIViews
yang Anda buat.
Berikut cara menautkan outlet aset tampilan iklan ke UIViews
yang dibuat
untuk iklan:
Di panel stopkontak, stopkontak di GADNativeAdView
telah ditautkan ke
UIViews
yang disusun di Interface Builder. Hal ini memungkinkan
SDK mengetahui UIView
mana yang akan menampilkan aset yang mana.
Penting juga untuk diingat bahwa outlet
ini mewakili pandangan yang
dapat diklik di iklan.
Menampilkan iklan
Setelah tata letak selesai dan stopkontak ditautkan, tambahkan kode berikut ke aplikasi Anda yang akan menampilkan iklan setelah dimuat:
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
// 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
}
SwiftUI
Membuat model tampilan
Membuat model tampilan yang memuat iklan native dan memublikasikan data iklan native perubahan:
import GoogleMobileAds
class NativeAdViewModel: NSObject, ObservableObject, GADNativeAdLoaderDelegate {
@Published var nativeAd: GADNativeAd?
private var adLoader: GADAdLoader!
func refreshAd() {
adLoader = GADAdLoader(
adUnitID: "ca-app-pub-3940256099942544/3986624511",
// The UIViewController parameter is optional.
rootViewController: nil,
adTypes: [.native], options: nil)
adLoader.delegate = self
adLoader.load(GADRequest())
}
func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADNativeAd) {
// Native ad data changes are published to its subscribers.
self.nativeAd = nativeAd
nativeAd.delegate = self
}
func adLoader(_ adLoader: GADAdLoader, didFailToReceiveAdWithError error: Error) {
print("\(adLoader) failed with error: \(error.localizedDescription)")
}
}
Membuat UIViewRepresentable
Buat
UIViewRepresentable
untuk GADNativeView
, dan berlangganan perubahan data di ViewModel
:
private struct NativeAdView: UIViewRepresentable {
typealias UIViewType = GADNativeAdView
// Observer to update the UIView when the native ad value changes.
@ObservedObject var nativeViewModel: NativeAdViewModel
func makeUIView(context: Context) -> GADNativeAdView {
return
Bundle.main.loadNibNamed(
"NativeAdView",
owner: nil,
options: nil)?.first as! GADNativeAdView
}
func updateUIView(_ nativeAdView: GADNativeAdView, context: Context) {
guard let nativeAd = nativeViewModel.nativeAd else { return }
// Each UI property is configurable using your native ad.
(nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline
nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
(nativeAdView.bodyView as? UILabel)?.text = nativeAd.body
(nativeAdView.iconView as? UIImageView)?.image = nativeAd.icon?.image
(nativeAdView.starRatingView as? UIImageView)?.image = imageOfStars(from: nativeAd.starRating)
(nativeAdView.storeView as? UILabel)?.text = nativeAd.store
(nativeAdView.priceView as? UILabel)?.text = nativeAd.price
(nativeAdView.advertiserView as? UILabel)?.text = nativeAd.advertiser
(nativeAdView.callToActionView as? UIButton)?.setTitle(nativeAd.callToAction, for: .normal)
// 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
}
Menambahkan tampilan ke hierarki tampilan
Kode berikut menunjukkan penambahan UIViewRepresentable
ke tampilan
hierarki:
struct NativeContentView: View {
// Single source of truth for the native ad data.
@StateObject private var nativeViewModel = NativeAdViewModel()
var body: some View {
ScrollView {
VStack(spacing: 20) {
NativeAdView(nativeViewModel: nativeViewModel) // Updates when the native ad data changes.
.frame(minHeight: 300) // minHeight determined from xib.
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 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;
}
Contoh lengkap di GitHub
Lihat contoh lengkap integrasi iklan native di Swift, SwiftUI, dan Objective-C dengan mengikuti link GitHub terkait.
Contoh Rendering Kustom Swift Contoh Iklan Native SwiftUI Contoh Rendering Kustom Objective-C
GADMediaView
Aset gambar dan video ditampilkan kepada pengguna melalui
GADMediaView
Ini adalah UIView
yang dapat ditentukan dalam file xib atau dibuat secara dinamis.
Elemen ini harus ditempatkan dalam hierarki tampilan GADNativeAdView
, seperti pada
tampilan aset lainnya.
Seperti semua tampilan aset, tampilan media harus memiliki kontennya
telah diisi. Fungsi ini diatur menggunakan
mediaContent
pada GADMediaView
. Tujuan
mediaContent
properti
GADNativeAd
berisi konten media yang dapat diteruskan ke
GADMediaView
.
Berikut ini 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 bahwa dalam file pembuat antarmuka untuk tampilan iklan native Anda
class kustom tampilan disetel ke GADMediaView
dan Anda telah menghubungkannya ke class
Stopkontak mediaView
.
Mengubah Mode Konten Gambar
Class GADMediaView
mematuhi UIView
contentMode
saat menampilkan gambar. Jika Anda ingin mengubah cara
penskalaan gambar
GADMediaView
, setel atribut
UIViewContentMode
di properti contentMode
dari GADMediaView
untuk mencapai ini.
Misalnya, untuk mengisi GADMediaView
saat gambar ditampilkan (iklan tidak memiliki
):
Swift
nativeAdView.mediaView?.contentMode = .aspectFill
Objective-C
nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;
GADMediaContent
GADMediaContent
menyimpan data yang terkait dengan konten media iklan bawaan, yaitu
ditampilkan menggunakan class GADMediaView
. Jika ditetapkan di GADMediaView
Properti mediaContent
:
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
sebagai gantinya.
Langkah berikutnya
Pelajari lebih lanjut privasi pengguna.