Menampilkan iklan native

Menampilkan format iklan native yang ditentukan sistem

Saat iklan native dimuat, aplikasi Anda akan menerima objek iklan native menggunakan salah satu pesan protokol GADAdLoaderDelegate. 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.

GADNativeAdView

Untuk GADNativeAd, ada class "penayangan iklan" yang sesuai: GADNativeAdView. Class 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 iklan tersebut harus berupa subview dari 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 individual, dan metode untuk mendaftarkan objek GADNativeAd itu sendiri. Dengan mendaftarkan tampilan dengan cara ini, SDK dapat menangani tugas secara otomatis seperti:

  • Klik rekaman.
  • Mencatat tayangan iklan (saat piksel pertama terlihat di layar).
  • Menampilkan overlay AdChoices.

Overlay AdChoices

Untuk iklan native tidak langsung (yang disajikan melalui isi ulang Ad Manager atau melalui Ad Exchange atau AdSense), overlay AdChoices akan ditambahkan oleh SDK. Sisakan ruang di sudut pilihan Anda tampilan iklan native untuk logo AdChoices yang disisipkan secara otomatis. Selain itu, pastikan overlay AdChoices ditempatkan pada konten yang memungkinkan ikon terlihat dengan jelas. Untuk mengetahui informasi selengkapnya tentang tampilan dan fungsi overlay, lihat pedoman penerapan iklan native terprogram.

Atribusi iklan untuk iklan native terprogram

Saat menampilkan iklan native terprogram, Anda harus menampilkan atribusi iklan untuk menunjukkan bahwa tampilan tersebut adalah iklan. Pelajari lebih lanjut di pedoman kebijakan kami.

Contoh kode

Bagian ini menunjukkan cara menampilkan iklan native menggunakan tampilan yang dimuat secara dinamis dari file xib. Pendekatan ini dapat sangat berguna saat menggunakan GADAdLoaders yang dikonfigurasi untuk meminta beberapa format.

Menyusun UIView

Langkah pertama adalah menata UIViews yang akan menampilkan aset iklan native. Anda dapat melakukannya di Interface Builder seperti saat membuat file xib lainnya. Berikut tampilan tata letak untuk iklan native:

Perhatikan nilai Custom Class di kanan atas gambar. Disetel ke

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

Anda juga perlu menyetel class kustom untuk GADMediaView, yang digunakan untuk menampilkan video atau gambar untuk iklan.

Setelah tampilan tersedia dan Anda telah menetapkan class 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 outlet, outlet di GADNativeAdView telah ditautkan ke UIViews yang disusun di Interface Builder. Dengan demikian, SDK akan 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 outlet ditautkan, tambahkan kode berikut ke aplikasi Anda yang menampilkan iklan setelah dimuat:

Swift

func adLoader(_ adLoader: AdLoader, didReceive nativeAd: NativeAd) {
  // ...

  // 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

  // Some native ads will include a video asset, while others do not. Apps can use the
  // GADVideoController's hasVideoContent property to determine if one is present, and adjust their
  // UI accordingly.
  let mediaContent = nativeAd.mediaContent
  if mediaContent.hasVideoContent {
    // By acting as the delegate to the GADVideoController, this ViewController receives messages
    // about events in the video lifecycle.
    mediaContent.videoController.delegate = self
    videoStatusLabel.text = "Ad contains a video asset."
  } else {
    videoStatusLabel.text = "Ad does not contain a video."
  }

  // 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 aspectRatioConstraint = NSLayoutConstraint(
      item: mediaView,
      attribute: .width,
      relatedBy: .equal,
      toItem: mediaView,
      attribute: .height,
      multiplier: CGFloat(nativeAd.mediaContent.aspectRatio),
      constant: 0)
    mediaView.addConstraint(aspectRatioConstraint)
    nativeAdView.layoutIfNeeded()
  }

  // 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(from: 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
}

SwiftUI

Membuat model tampilan

Buat model tampilan yang memuat iklan native, dan memublikasikan perubahan data iklan native:

import GoogleMobileAds

class NativeAdViewModel: NSObject, ObservableObject, NativeAdLoaderDelegate {
  @Published var nativeAd: NativeAd?
  private var adLoader: AdLoader!

  func refreshAd() {
    adLoader = AdLoader(
      adUnitID: "ca-app-pub-3940256099942544/3986624511",
      // The UIViewController parameter is optional.
      rootViewController: nil,
      adTypes: [.native], options: nil)
    adLoader.delegate = self
    adLoader.load(Request())
  }

  func adLoader(