Yerel reklam görüntüleme

Platform seçin: Android iOS Android (Eski)

Sistem tarafından tanımlanan bir doğal reklam biçimi gösterme

Doğal reklam yüklendiğinde uygulamanız, GADAdLoaderDelegate protokol mesajlarından birini kullanarak doğal reklam nesnesi alır. Ardından uygulamanız, reklamı göstermekten sorumlu olur (ancak bunu hemen yapması gerekmez). SDK, sistem tarafından tanımlanan reklam biçimlerinin daha kolay gösterilmesi için bazı yararlı kaynaklar sunar.

Önemli nokta: Doğal reklamlar hakkında daha fazla bilgi için Doğal Reklamlar Başucu Kitabı'na göz atın. Ayrıca doğal reklamlarınızı nasıl oluşturacağınızla ilgili rehberlik için Doğal reklam politikaları ve yönergeleri'ni inceleyin.

GADNativeAdView

GADNativeAd için karşılık gelen bir "reklam görüntüleme" sınıfı vardır: GADNativeAdView. Bu reklam görünümü sınıfı, yayıncıların reklamı göstermek için kullanması gereken bir UIView öğesidir. Örneğin, tek bir GADNativeAdView, bir GADNativeAd'nin tek bir örneğini görüntüleyebilir. Bu reklamın öğelerini görüntülemek için kullanılan UIView nesnelerinin her biri, söz konusu GADNativeAdView nesnesinin alt görünümleri olmalıdır.

Örneğin, bir UITableView içinde reklam gösteriyorsanız hücrelerden birinin görünüm hiyerarşisi şöyle görünebilir:

GADNativeAdView sınıfı, her bir öğe için kullanılan görünümü kaydetmek amacıyla kullanılan IBOutlets ve GADNativeAd nesnesini kaydetmek için bir yöntem de sağlar. Görüntülemelerin bu şekilde kaydedilmesi, SDK'nın aşağıdaki gibi görevleri otomatik olarak işlemesine olanak tanır:

• Tıklamalar kaydediliyor.
• Gösterimleri kaydetme (ilk piksel ekranda göründüğünde).
• Reklam Seçenekleri yer paylaşımını gösterme

Reklam Seçenekleri yer paylaşımı

Dolaylı yerel reklamlar için (AdMob dolgusu veya Ad Exchange ya da AdSense aracılığıyla yayınlanan) SDK tarafından bir Reklam Seçenekleri yer paylaşımı eklenir. Doğal reklam görünümünüzün tercih ettiğiniz köşesinde otomatik olarak eklenen Reklam Seçenekleri logosu için boşluk bırakın. Ayrıca, Reklam Seçenekleri yer paylaşımının, simgenin net bir şekilde görülebileceği bir içeriğe yerleştirildiğinden emin olun. Yer paylaşımının görünümü ve işlevi hakkında daha fazla bilgi için programatik doğal reklam uygulama yönergelerini inceleyin.

Reklam ilişkilendirmesi

Programatik doğal reklamları gösterirken, görünümün bir reklam olduğunu belirtmek için reklam ilişkilendirmesi göstermeniz gerekir.

Kod örneği

Bu bölümde, xib dosyalarından dinamik olarak yüklenen görünümler kullanılarak doğal reklamların nasıl gösterileceği açıklanmaktadır. Bu, birden fazla biçim isteyecek şekilde yapılandırılmış GADAdLoaders kullanırken çok yararlı bir yaklaşım olabilir.

UIView'leri düzenleme

İlk adım, doğal reklam öğelerini gösterecek UIViews öğesini düzenlemektir. Bu işlemi, diğer xib dosyalarını oluştururken yaptığınız gibi Interface Builder'da yapabilirsiniz. Doğal reklam düzeni şu şekilde görünebilir:

Resmin sağ üst kısmındaki Özel Sınıf değerine dikkat edin. Şu değere ayarlandı:

GADNativeAdView. Bu, GADNativeAd görüntülemek için kullanılan reklam görünümü sınıfıdır.

Ayrıca, reklamın videosunu veya resmini görüntülemek için kullanılan GADMediaView için özel sınıfı ayarlamanız gerekir.

Çıkışları görünümlere bağlama

Görünümler hazır olduğunda ve düzene doğru reklam görünümü sınıfını atadığınızda reklam görünümünün öğe çıkışlarını oluşturduğunuz UIViews öğesine bağlayın. Reklam görünümünün öğe çıkışlarını bir reklam için oluşturulan UIViews öğesine şu şekilde bağlayabilirsiniz:

Çıkış panelinde, GADNativeAdView içindeki çıkışlar, Interface Builder'da oluşturulan UIViews ile bağlantılıdır. Bu sayede SDK, hangi UIView öğesinin hangi öğeyi gösterdiğini bilir. Bu kanalların, reklamda tıklanabilir olan görüşleri temsil ettiğini de unutmamak gerekir.

Reklamı gösterme

Düzen tamamlandıktan ve çıkışlar bağlandıktan sonra, uygulamanıza yüklendiğinde reklam gösteren aşağıdaki kodu ekleyin:

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
}
ViewController.swift

SwiftUI

Görünüm modeli oluşturma

Doğal reklam yükleyen ve doğal reklam verilerindeki değişiklikleri yayınlayan bir görünüm modeli oluşturun:

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(_ adLoader: AdLoader, didReceive nativeAd: NativeAd) {
    // Native ad data changes are published to its subscribers.
    self.nativeAd = nativeAd
    nativeAd.delegate = self
  }

  func adLoader(_ adLoader: AdLoader, didFailToReceiveAdWithError error: Error) {
    print("\(adLoader) failed with error: \(error.localizedDescription)")
  }
}
NativeAdViewModel.swift

UIViewRepresentable oluşturma

NativeView için bir UIViewRepresentable oluşturun ve ViewModel sınıfındaki veri değişikliklerine abone olun:

private struct NativeAdViewContainer: UIViewRepresentable {
  typealias UIViewType = NativeAdView

  // Observer to update the UIView when the native ad value changes.
  @ObservedObject var nativeViewModel: NativeAdViewModel

  func makeUIView(context: Context) -> NativeAdView {
    return
      Bundle.main.loadNibNamed(
        "NativeAdView",
        owner: nil,
        options: nil)?.first as! NativeAdView
  }

  func updateUIView(_ nativeAdView: NativeAdView, 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
  }
NativeContentView.swift

Görünümü, görünüm hiyerarşisine ekleme

Aşağıdaki kodda, UIViewRepresentable öğesinin görünüm hiyerarşisine nasıl ekleneceği gösterilmektedir:

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) {
        // Updates when the native ad data changes.
        NativeAdViewContainer(nativeViewModel: nativeViewModel)
          .frame(minHeight: 300)  // minHeight determined from xib.
NativeContentView.swift

Objective-C

- (void)adLoader:(GADAdLoader *)adLoader didReceiveNativeAd:(GADNativeAd *)nativeAd {
  // ...

  GADNativeAdView *nativeAdView = self.nativeAdView;

  // Set ourselves as the 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.
  ((UILabel *)nativeAdView.headlineView).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 content it displays.
  if (nativeAdView.mediaView != nil && nativeAd.mediaContent.aspectRatio > 0) {
    NSLayoutConstraint *aspectRatioConstraint =
        [NSLayoutConstraint constraintWithItem:nativeAdView.mediaView
                                     attribute:NSLayoutAttributeWidth
                                     relatedBy:NSLayoutRelationEqual
                                        toItem:nativeAdView.mediaView
                                     attribute:NSLayoutAttributeHeight
                                    multiplier:(nativeAd.mediaContent.aspectRatio)
                                      constant:0];
    [nativeAdView.mediaView addConstraint:aspectRatioConstraint];
    [nativeAdView layoutIfNeeded];
  }

  if (nativeAd.mediaContent.hasVideoContent) {
    // By acting as the delegate to the GADVideoController, this ViewController
    // receives messages about events in the video lifecycle.
    nativeAd.mediaContent.videoController.delegate = self;

    self.videoStatusLabel.text = @"Ad contains a video asset.";
  } else {
    self.videoStatusLabel.text = @"Ad does not contain a video.";
  }

  // 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.
  // Note: this should always be done after populating the ad views.
  nativeAdView.nativeAd = nativeAd;
}
ViewController.m

Not: Kod örneği, harekete geçirici mesaj için kullanıcı etkileşimini devre dışı bırakır UIButton. Doğal reklam öğelerini göstermek için UIButton'ları kullanıyorsanız Google Mobile Ads SDK'ın kullanıcı arayüzü etkinliklerini düzgün şekilde alıp işleyebilmesi için kullanıcı etkileşimlerini devre dışı bırakmanız gerekir. Bu ek adım nedeniyle, doğal reklam öğelerini UILabel ve UIImageView kullanarak göstermek en iyi yöntemdir.

GitHub'daki eksiksiz örnek

İlgili GitHub bağlantısını takip ederek Swift, SwiftUI ve Objective-C'de doğal reklamları entegre etmeyle ilgili eksiksiz örneği inceleyin.

Swift Doğal Gelişmiş Örneği SwiftUI Doğal Reklam Örneği Objective-C Doğal Gelişmiş Örneği

GADMediaView

Önemli nokta: Doğal reklamınızın düzenine ana resim öğesi eklemek istiyorsanız UIImageView öğesi yerine GADMediaView öğesini kullanmanız gerekir.

Resim ve video öğeleri, kullanıcılara GADMediaView kullanılarak gösterilir. Bu, bir xib dosyasında tanımlanabilen veya dinamik olarak oluşturulabilen bir UIView öğesidir. Diğer öğe görünümlerinde olduğu gibi, GADNativeAdView görünüm hiyerarşisine yerleştirilmelidir.

Tüm öğe görünümlerinde olduğu gibi, medya görünümünün de içeriğinin doldurulması gerekir. Bu, GADMediaView üzerinde mediaContent özelliği kullanılarak ayarlanır. GADNativeAd öğesinin mediaContent özelliği, GADMediaView öğesine aktarılabilecek medya içeriği barındırır.

Aşağıda, GADNativeAd sınıfından GADMediaContent kullanarak GADMediaView öğesini doğal reklam öğeleriyle nasıl dolduracağınızı gösteren Doğal Gelişmiş örneğinden (Swift | Objective-C) bir snippet verilmiştir:

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
ViewController.swift

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;
ViewController.m

Doğal reklam görünümünüz için arayüz oluşturucu dosyanızda, görünümlerin özel sınıfının GADMediaView olarak ayarlandığından ve bunu mediaView çıkışına bağladığınızdan emin olun.

Resim İçeriği Modunu Değiştirme

GADMediaView sınıfı, resimleri gösterirken UIView contentMode özelliğini dikkate alır. Bir resmin GADMediaView içinde nasıl ölçeklendirileceğini değiştirmek istiyorsanız GADMediaView öğesinin contentMode özelliğinde ilgili UIViewContentMode değerini ayarlayın.

Örneğin, bir resim gösterildiğinde (reklamda video yoksa) GADMediaView doldurmak için:

Swift

nativeAdView.mediaView?.contentMode = .scaleAspectFit
NativeAdSnippets.swift

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeScaleAspectFit;
NativeAdSnippets.m

GADMediaContent

GADMediaContent sınıfı, GADMediaView sınıfı kullanılarak gösterilen doğal reklamın medya içeriğiyle ilgili verileri barındırır. GADMediaView mediaContent mülkünde ayarlandığında:

• Video öğesi varsa arabelleğe alınır ve GADMediaView içinde oynatılmaya başlar. hasVideoContent sayfasını kontrol ederek bir video öğesinin kullanılabilir olup olmadığını öğrenebilirsiniz.

• Reklamda video öğesi yoksa mainImage öğesi indirilir ve GADMediaView içine yerleştirilir.

Önemli Nokta: Varsayılan olarak mainImage, indirilen ilk resim öğesidir. disableImageLoading kullanılıyorsa mainImage, nil olur ve bu özelliği manuel olarak indirdiğiniz resme ayarlamanız gerekir. Bu resmin yalnızca video öğesi olmadığında kullanılacağını unutmayın.

Sonraki adımlar

Kullanıcı gizliliği hakkında daha fazla bilgi edinin.