Native lanjutan

Menampilkan format iklan native yang ditentukan sistem

Saat iklan native dimuat, aplikasi Anda akan menerima objek iklan native melalui salah satu pesan protokol GADAdLoaderDelegate. Selanjutnya, aplikasi Anda bertanggung jawab untuk menampilkan iklan (meskipun tidak harus segera melakukannya). Untuk mempermudah penayangan format iklan yang ditentukan sistem, SDK menawarkan beberapa resource yang berguna.

Poin Penting: Tinjau Kebijakan dan pedoman iklan native untuk panduan tentang cara merender iklan native Anda.

GADNativeAdView

Untuk GADNativeAd, ada kelas "tampilan iklan" yang sesuai: GADNativeAdView. Class 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 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 individual, dan metode untuk mendaftarkan objek GADNativeAd itu sendiri. Mendaftarkan tampilan dengan cara ini memungkinkan SDK untuk otomatis menangani tugas-tugas seperti:

• Mencatat klik.
• Merekam tayangan (saat piksel pertama terlihat di layar).
• Menampilkan overlay AdChoices.

Overlay AdChoices

Untuk iklan native tidak langsung (yang disajikan melalui pengisian ulang Ad Manager atau melalui Ad Exchange atau AdSense), overlay AdChoices akan ditambahkan oleh SDK. Sisakan ruang di sudut pilihan Anda pada tampilan iklan native untuk logo AdChoices yang disisipkan secara otomatis. Pastikan juga overlay AdChoices ditempatkan pada konten yang memungkinkan ikon lebih mudah terlihat. Untuk informasi selengkapnya tentang tampilan dan fungsi overlay, lihat panduan penerapan iklan native terprogram.

Catatan: AdChoices hanya ditampilkan untuk iklan yang dijual langsung di EEA.

Atribusi iklan untuk iklan programmatic native

Ketika menampilkan iklan programmatic native, Anda harus menampilkan atribusi iklan untuk menunjukkan bahwa penayangan 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 yang dikonfigurasi untuk meminta beberapa format.

Menata letak UIViews

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 iklan native:

Perhatikan nilai Class Kustom di kanan atas gambar. Sudah diatur ke

GADNativeAdView. Ini adalah kelas tampilan iklan yang digunakan untuk menampilkan GADNativeAd.

Anda juga harus menetapkan class kustom untuk GADMediaView, yang digunakan untuk menampilkan video atau gambar untuk iklan.

Menautkan stopkontak ke tampilan

Setelah tampilan diterapkan dan Anda telah menetapkan kelas tampilan iklan yang benar ke tata letak, tautkan outlet aset tampilan iklan ke UIViews yang telah 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 ditetapkan di Interface Builder. Hal ini memungkinkan SDK mengetahui UIView mana yang menampilkan aset mana. Penting juga untuk diingat bahwa stopkontak ini mewakili tampilan yang dapat diklik pada iklan.

Menampilkan iklan

Tips: Pelajari cara menampilkan iklan native menggunakan SwiftUI.

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 dalam tampilan yang didefinisikan 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;
}

Catatan: Seperti yang Anda lihat, contoh kode di atas menonaktifkan interaksi pengguna untuk UIButton yang menampilkan pesan ajakan (CTA). Jika menggunakan UIButtons untuk menampilkan aset iklan native, Anda juga perlu menonaktifkan interaksi penggunanya sehingga Google Mobile Ads SDK dapat menerima dan memproses peristiwa UI dengan benar. Karena langkah tambahan ini, sebaiknya hindari UIButtons sepenuhnya dan gunakan UILabel dan UIImageView sebagai gantinya.

Repositori GitHub kami memiliki implementasi lengkap untuk iklan rendering kustom native yang ditulis dalam Swift dan Objective-C.

Download Contoh Rendering Kustom Google Ad Manager

GADMediaView

Poin Penting: Anda harus menggunakan aset GADMediaView, bukan aset UIImageView, jika ingin menyertakan aset gambar utama dalam tata letak untuk iklan native Anda.

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 terisi kontennya. Ini ditetapkan menggunakan properti mediaContent pada GADMediaView. Properti mediaContent dari GADNativeAd berisi konten media yang dapat diteruskan ke GADMediaView.

Berikut adalah 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;

Dalam file pembuat antarmuka untuk tampilan iklan native, pastikan Anda memiliki class kustom tampilan yang ditetapkan ke GADMediaView dan telah menghubungkannya ke outlet mediaView.

Mengubah Mode Konten Gambar

Class GADMediaView mengikuti properti contentMode UIView saat menampilkan gambar. Jika Anda ingin mengubah cara gambar diskalakan di GADMediaView, tetapkan UIViewContentMode yang sesuai pada properti contentMode dari GADMediaView untuk mencapai hal ini.

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

Swift

nativeAdView.mediaView?.contentMode = .aspectFill

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

GADMediaContent

Class GADMediaContent menyimpan data terkait konten media iklan native, yang ditampilkan menggunakan class GADMediaView. Jika ditetapkan di properti GADMediaView mediaContent:

• Jika aset video tersedia, aset tersebut akan di-buffer dan mulai diputar di dalam GADMediaView. Anda dapat mengetahui apakah aset video tersedia dengan memeriksa hasVideoContent.

• Jika iklan tidak berisi aset video, aset mainImage akan didownload dan ditempatkan di dalam GADMediaView sebagai gantinya.

Poin Penting: Secara default, mainImage adalah aset gambar pertama yang didownload. Jika disableImageLoading digunakan, mainImage adalah nil dan Anda harus menetapkan properti ini ke gambar yang didownload secara manual. Perhatikan bahwa gambar ini hanya akan digunakan jika tidak ada aset video yang tersedia.

Langkah berikutnya

Pelajari privasi pengguna lebih lanjut.