本頁面由 Cloud Translation API 翻譯而成。

原生進階

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

原生廣告載入時，應用程式會透過其中一個 GADAdLoaderDelegate 通訊協定訊息。這樣一來，您的應用程式就會 (但不一定要立即進行)。為了輕鬆顯示系統定義的廣告格式，SDK 提供了實用的再複習一下，機構節點是所有 Google Cloud Platform 資源的根節點

GADNativeAdView

GADNativeAd 有一個對應的「廣告瀏覽」類別： GADNativeAdView。這個廣告檢視類別是發布商用來顯示廣告的 UIView。例如，單一 GADNativeAdView 可顯示單一執行個體的 GADNativeAd。每個 UIView 物件，用來顯示該廣告資產應為該 GADNativeAdView 物件的子視圖。

舉例來說，如果您在 UITableView 中放送廣告，其中一個儲存格的檢視區塊階層可能如下所示：

GADNativeAdView 類別也提供用於註冊的 IBOutlets 每個資產使用的檢視畫面，以及註冊 GADNativeAd敬上物件本身以這種方式註冊檢視畫面，SDK 會自動處理以下工作：

正在記錄點擊次數。
記錄曝光 (螢幕第一個像素顯示時)。
顯示 AdChoices 重疊廣告。

AdChoices 重疊元素

間接原生廣告 (透過 Ad Manager 放送) 候補廣告或透過 Ad Exchange 或 AdSense)，在 AdChoices 廣告標籤中加入「廣告」元素時， SDK。將聊天室保留為偏好的空間角落自動插入的 AdChoices 標誌。同時，請確認 AdChoices 重疊元素放在允許圖示顯示的內容中。如要進一步瞭解疊加層的外觀和功能，請參閱程式輔助原生廣告導入指南。

程式輔助原生廣告的廣告歸因

顯示程式輔助原生廣告時，您必須註明廣告標示：表示此檢視畫面為廣告。詳情請參閱我們的政策規範。

程式碼範例

我們來看看如何透過動態載入的檢視畫面顯示原生廣告從 xib 檔案中在使用 GADAdLoaders 時，這可以派上用場以便請求多種格式

設計 UIView

第一步是設定可顯示原生廣告素材資源的 UIViews。您可以按照在 Interface Builder 中進行這項操作，就像建立任何其他函式時一樣 xib 檔案。以下是原生廣告的版面配置廣告看起來可能：

請注意圖片右上方的自訂類別值。設為

GADNativeAdView。這是用來顯示 GADNativeAd 的廣告檢視類別。

您也需為 GADMediaView 設定自訂類別，而該類別會使用顯示廣告的影片或圖片。

連結前往檢視畫面的暢貨中心

設定完畢後，您為廣告瀏覽類別指派了正確的廣告檢視類別將廣告檢視畫面的素材資源位置連結至您建立的 UIViews。以下說明如何將廣告檢視畫面的素材資源位置連結至已建立的 UIViews 的廣告：

GADNativeAdView的插座已連結到插座面板上在介面建構工具中版面配置的 UIViews。這樣一來， SDK 知道哪個 UIView 會顯示哪個素材資源。請特別注意，這些平台代表可點擊的廣告。

顯示廣告

完成版面配置並連結插座後，請加入下列程式碼載入廣告的應用程式：

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

建立檢視畫面模型

建立用於載入原生廣告並發布原生廣告資料的檢視模型變更：

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)")
  }
}NativeAdViewModel.swift

建立 UIViewRepresentationable

撰寫 UIViewRepresentable敬上使用 GADNativeView，並訂閱 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
  }NativeContentView.swift

將檢視畫面新增至檢視區塊階層

下列程式碼示範如何將 UIViewRepresentable 新增至檢視區塊階層：

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.NativeContentView.swift

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

GitHub 上的完整範例

查看在 Swift、SwiftUI 和 Objective-C。

Swift 自訂轉譯範例 SwiftUI 原生廣告範例 Objective-C 自訂顯示範例

GADMediaView

圖片和影片素材資源是透過以下方式向使用者顯示： GADMediaView。這是可在 xib 檔案中定義，或以動態方式建構的 UIView。應放在 GADNativeAdView 的檢視區塊階層內，如：或觀看任何其他資產檢視畫面。

和所有素材資源檢視畫面一樣，媒體檢視畫面也必須包含其內容。系統是透過 mediaContent敬上「GADMediaView」上屬性。 mediaContent敬上以下地點的房源： GADNativeAd 包含的媒體內容，可以傳遞至 GADMediaView。

以下是 Google 搜尋的自訂轉譯範例 (Swift |Objective-C) 顯示如何使用原生廣告素材資源在 GADMediaView 中填入來自「GADNativeAd」的GADMediaContent：

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

確認原生廣告檢視畫面的介面製作工具檔案中，檢視畫面自訂類別設為 GADMediaView，並將該類別連結至 mediaView的插座。

變更圖片內容模式

GADMediaView 類別會遵循 UIView contentMode敬上屬性。如果想變更圖片的縮放方式 GADMediaView，設定對應的 UIViewContentMode GADMediaView 的 contentMode 屬性上，即可達到此目的。

例如，如要在顯示圖片時填入 GADMediaView (廣告沒有影片)：

Swift

nativeAdView.mediaView?.contentMode = .aspectFill

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

GADMediaContent

GADMediaContent 類別會保留與原生廣告的媒體內容相關的資料，亦即會透過 GADMediaView 類別顯示。在 GADMediaView 上設定時 mediaContent 屬性：

如果有可用的影片資產，系統會進行緩衝處理，並開始在 GADMediaView。如要確認影片資產是否可用，請查看 hasVideoContent。
如果廣告不包含影片素材資源，系統就會下載 mainImage 素材資源並改為放在 GADMediaView 中

，瞭解如何調查及移除這項存取權。

後續步驟

進一步瞭解使用者隱私。