原生進階

顯示系統定義的原生廣告格式

當原生廣告加載時,您的應用將通過GADAdLoaderDelegate協議消息之一接收原生廣告對象。然後,您的應用負責展示廣告(儘管不一定要立即這樣做)。為了更輕鬆地顯示系統定義的廣告格式,SDK 提供了一些有用的資源。

GADNativeAdView

對於GADNativeAd ,有一個對應的“廣告視圖”類: GADNativeAdView 。此廣告視圖類是發布商用來展示廣告的UIView 。例如,單個GADNativeAdView可以顯示GADNativeAd的單個實例。用於顯示該廣告資源的每個UIView對像都應該是該GADNativeAdView對象的子視圖。

例如,如果您在UITableView中顯示廣告,則其中一個單元格的視圖層次結構可能如下所示:

GADNativeAdView類還提供了用於註冊用於每個單獨資產的視圖的IBOutlets ,以及註冊GADNativeAd對象本身的方法。以這種方式註冊視圖允許 SDK 自動處理以下任務:

  • 記錄點擊。
  • 記錄印象(當第一個像素在屏幕上可見時)。
  • 顯示 AdChoices 疊加層。

AdChoices 疊加層

對於間接原生廣告(通過 AdMob回填或通過 Ad Exchange 或 AdSense 投放),SDK 添加了 AdChoices 疊加層。請在您的原生廣告視圖的首選角落中為自動插入的 AdChoices 徽標留出空間。此外,請確保將 AdChoices 疊加層放置在易於看到圖標的內容上。有關重疊式廣告的外觀和功能的更多信息,請參閱程序化原生廣告實施指南

廣告歸因

在顯示程序化原生廣告時,您必須顯示廣告屬性以表明該視圖是廣告。

代碼示例

讓我們看看如何使用從 xib 文件動態加載的視圖來顯示原生廣告。當使用配置為請求多種格式的GADAdLoaders時,這可能是一種非常有用的方法。

佈局 UIViews

第一步是佈局將顯示原生廣告資源的UIViews 。您可以在 Interface Builder 中執行此操作,就像在創建任何其他 xib 文件時一樣。原生廣告的佈局可能如下所示:

請注意圖像右上角的自定義類值。它設置為

GADNativeAdView 。這是用於顯示GADNativeAd的廣告視圖類。

您還需要為GADMediaView設置自定義類,用於顯示廣告的視頻或圖像。

將出口鏈接到視圖

一旦視圖就位並且您已經為佈局分配了正確的廣告視圖類,請將廣告視圖的資產出口鏈接到您創建的UIViews 。以下是您可以如何將廣告視圖的資產出口鏈接到為廣告創建的UIViews

在 outlet 面板中, GADNativeAdView中的 outlet 已鏈接到 Interface Builder 中佈局的UIViews 。這讓 SDK 知道哪個UIView顯示哪個資產。同樣重要的是要記住,這些網點代表廣告中可點擊的視圖。

顯示廣告

佈局完成並鏈接出口後,最後一步是向您的應用添加代碼,該代碼在加載後顯示廣告。這是在上面定義的視圖中顯示廣告的方法:

迅速

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

我們的 GitHub 存儲庫包含用 Swift 和 Objective-C 編寫的原生高級廣告 的完整實現。

下載原生高級示例

GADMediaView

圖像和視頻資產通過GADMediaView顯示給用戶。這是一個可以在 xib 文件中定義或動態構建的UIView 。與任何其他資產視圖一樣,它應該放置在GADNativeAdView的視圖層次結構中。

與所有資產視圖一樣,媒體視圖需要填充其內容。這是使用 GADMediaView 上的mediaContent屬性GADMediaView的。 GADNativeAd 的mediaContent屬性包含可以傳遞給GADNativeAd的媒體GADMediaView

這是Native Advanced 示例 ( Swift | Objective-C )的片段,它展示瞭如何使用來自GADMediaContentGADMediaView使用原生廣告資源填充GADNativeAd

迅速

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

確保在原生廣告視圖的界面構建器文件中,將視圖自定義類設置為GADMediaView ,並且已將其連接到mediaView插座。

更改圖像內容模式

GADMediaView類在顯示圖像時尊重UIView contentMode屬性。如果要更改圖像在GADMediaView中的縮放方式,請在GADMediaViewcontentMode屬性上設置相應的UIViewContentMode以實現此目的。

例如,要在顯示圖像(廣告沒有視頻)時填充GADMediaView

迅速

nativeAdView.mediaView?.contentMode = .aspectFill

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

GAD媒體內容

GADMediaContent類保存與原生廣告的媒體內容相關的數據,這些數據使用GADMediaView類顯示。在GADMediaView mediaContent屬性上設置時:

  • 如果視頻資產可用,它會被緩衝並開始在GADMediaView內播放。您可以通過檢查hasVideoContent來判斷視頻資產是否可用。

  • 如果廣告不包含視頻資產,則會下載mainImage資產並將其放置在GADMediaView中。