Quảng cáo gốc nâng cao

Hiển thị định dạng quảng cáo gốc do hệ thống xác định

Khi một quảng cáo gốc tải, ứng dụng của bạn sẽ nhận được một đối tượng quảng cáo gốc thông qua một trong các thông báo giao thức GADAdLoaderDelegate. Sau đó, ứng dụng của bạn sẽ chịu trách nhiệm hiển thị quảng cáo (mặc dù ứng dụng không nhất thiết phải hiển thị ngay lập tức). Để việc hiển thị định dạng quảng cáo do hệ thống xác định trở nên dễ dàng hơn, SDK sẽ cung cấp một số tài nguyên hữu ích.

Lưu ý quan trọng: Xem lại Chính sách và nguyên tắc về Quảng cáo gốc để biết hướng dẫn về cách hiển thị quảng cáo gốc.

GADNativeAdView

Đối với GADNativeAd, có một lớp "chế độ xem quảng cáo" tương ứng: GADNativeAdView. Lớp chế độ xem quảng cáo này là UIView mà nhà xuất bản nên sử dụng để hiển thị quảng cáo. Ví dụ: một GADNativeAdView duy nhất có thể hiển thị một thực thể của GADNativeAd. Mỗi đối tượng UIView được dùng để hiển thị tài sản của quảng cáo đó phải là chế độ xem phụ của đối tượng GADNativeAdView đó.

Ví dụ: nếu bạn đang hiển thị một quảng cáo trong UITableView, hệ phân cấp khung hiển thị cho một trong các ô có thể có dạng như sau:

Lớp GADNativeAdView cũng cung cấp IBOutlets dùng để đăng ký chế độ xem cho từng thành phần riêng lẻ và một phương thức để đăng ký chính đối tượng GADNativeAd. Việc đăng ký các khung hiển thị theo cách này cho phép SDK tự động xử lý các công việc như:

• Ghi lại các lượt nhấp.
• Ghi lại các lượt hiển thị (khi pixel đầu tiên hiển thị trên màn hình).
• Hiển thị lớp phủ Lựa chọn quảng cáo.

Lớp phủ Lựa chọn quảng cáo

Đối với quảng cáo gốc gián tiếp (được phân phối qua tính năng chèn lấp Ad Manager hoặc thông qua Ad Exchange hoặc AdSense), SDK sẽ thêm lớp phủ Lựa chọn quảng cáo. Vui lòng để trống góc bạn muốn của chế độ xem quảng cáo gốc để hệ thống tự động chèn biểu trưng Lựa chọn quảng cáo. Ngoài ra, hãy đảm bảo rằng lớp phủ Lựa chọn quảng cáo được đặt trên nội dung cho phép dễ dàng nhìn thấy biểu tượng đó. Để biết thêm thông tin về giao diện và chức năng của lớp phủ, hãy xem nguyên tắc triển khai quảng cáo gốc có lập trình.

Lưu ý: Lựa chọn quảng cáo chỉ hiển thị cho quảng cáo được bán trực tiếp ở Khu vực kinh tế Châu Âu (EEA).

Thuộc tính quảng cáo cho quảng cáo gốc có lập trình

Khi hiển thị quảng cáo gốc có lập trình, bạn phải hiển thị một thuộc tính quảng cáo để biểu thị rằng lượt xem đó là một quảng cáo. Xem trang này để biết các nguyên tắc chính sách.

Ví dụ về mã

Hãy tìm hiểu cách hiển thị quảng cáo gốc bằng cách sử dụng các chế độ xem được tải động từ các tệp xib. Đây có thể là một phương pháp rất hữu ích khi sử dụng GADAdLoaders được định cấu hình để yêu cầu nhiều định dạng.

Giới thiệu UIViews

Bước đầu tiên cần làm là sắp xếp bố cục cho UIViews, chế độ này sẽ hiển thị thành phần quảng cáo gốc. Bạn có thể thực hiện việc này trong Trình tạo giao diện như khi tạo bất kỳ tệp xib nào khác. Dưới đây là hình thức hiển thị của bố cục của một quảng cáo gốc:

Hãy chú ý đến giá trị Lớp tuỳ chỉnh ở góc trên cùng bên phải của hình ảnh. Chế độ này đã được đặt thành

GADNativeAdView. Đây là lớp chế độ xem quảng cáo được dùng để hiển thị GADNativeAd.

Bạn cũng cần đặt lớp tuỳ chỉnh cho GADMediaView, lớp này dùng để hiển thị video hoặc hình ảnh cho quảng cáo.

Liên kết các đầu ra với chế độ xem

Sau khi các chế độ xem đã sẵn sàng và bạn đã chỉ định đúng lớp chế độ xem quảng cáo cho bố cục, hãy liên kết đầu ra thành phần của chế độ xem quảng cáo với UIViews bạn đã tạo. Dưới đây là cách liên kết đầu ra thành phần của chế độ xem quảng cáo với UIViews đã tạo cho quảng cáo:

Trong bảng điều khiển đầu ra, các đầu ra trong GADNativeAdView đã được liên kết với UIViews hiển thị trong Trình tạo giao diện. Điều này cho phép SDK biết được UIView nào sẽ hiển thị tài sản nào. Bạn cũng cần nhớ rằng các đầu ra này đại diện cho các khung hiển thị có thể nhấp vào trong quảng cáo.

Đang hiển thị quảng cáo

Mẹo: Tìm hiểu cách hiển thị quảng cáo gốc bằng SwiftUI.

Sau khi bố cục hoàn chỉnh và các đầu ra đã được liên kết, bước cuối cùng là thêm mã vào ứng dụng để hiển thị quảng cáo sau khi quảng cáo được tải. Dưới đây là một phương thức hiển thị quảng cáo trong chế độ xem đã xác định ở trên:

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

Lưu ý: Như bạn có thể thấy, mã ví dụ ở trên sẽ vô hiệu hoá hoạt động tương tác của người dùng đối với UIButton hiển thị lời kêu gọi hành động. Nếu sử dụng UIButton để hiển thị thành phần quảng cáo gốc, bạn cũng cần vô hiệu hóa hoạt động tương tác của người dùng để SDK Quảng cáo của Google trên thiết bị di động có thể nhận và xử lý đúng cách các sự kiện trên giao diện người dùng. Thông thường, do phải thực hiện bước bổ sung này, bạn nên tránh dùng UIButton hoàn toàn, mà nên dùng UILabel và UIImageView.

Kho lưu trữ GitHub của chúng tôi cung cấp đầy đủ thông tin về cách triển khai quảng cáo hiển thị tuỳ chỉnh gốc được viết trong cả Swift và Objective-C.

Tải ví dụ về quảng cáo hiển thị tuỳ chỉnh Google Ad Manager xuống

GADMediaView

Lưu ý quan trọng: Bạn phải sử dụng thành phần GADMediaView thay vì thành phần UIImageView nếu muốn đưa thành phần hình ảnh chính vào bố cục cho quảng cáo gốc của mình.

Thành phần hình ảnh và video hiển thị cho người dùng thông qua GADMediaView. Đây là một UIView có thể được xác định trong tệp xib hoặc được thiết lập động. Bạn phải đặt chế độ xem này bên trong hệ phân cấp chế độ xem của GADNativeAdView, giống như mọi chế độ xem tài sản khác.

Tương tự như với tất cả các chế độ xem tài sản khác, bạn phải điền nội dung vào chế độ xem nội dung nghe nhìn. Bạn có thể đặt thuộc tính này bằng thuộc tính mediaContent trên GADMediaView. Hệ thống có thể truyền thuộc tính mediaContent của GADNativeAd chứa nội dung nghe nhìn đến GADMediaView.

Sau đây là một đoạn mã trong Ví dụ về hiển thị tuỳ chỉnh (Swift | Objective-C) cho thấy cách điền thành phần quảng cáo gốc vào GADMediaView bằng cách sử dụng GADMediaContent từ GADNativeAd:

Swift

nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent

Objective-C

nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;

Hãy đảm bảo rằng trong tệp trình tạo giao diện cho chế độ xem quảng cáo gốc, bạn đã đặt lớp tuỳ chỉnh của chế độ xem thành GADMediaView và bạn đã kết nối lớp đó với đầu ra mediaView.

Thay đổi chế độ nội dung hình ảnh

Lớp GADMediaView tuân theo thuộc tính UIView contentMode khi hiển thị hình ảnh. Nếu bạn muốn thay đổi cách điều chỉnh tỷ lệ hình ảnh trong GADMediaView, hãy đặt UIViewContentMode tương ứng trên thuộc tính contentMode của GADMediaView để đạt được điều này.

Ví dụ: để điền vào GADMediaView khi hiển thị hình ảnh (quảng cáo không có video):

Swift

nativeAdView.mediaView?.contentMode = .aspectFill

Objective-C

nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;

GADMediaContent

Lớp GADMediaContent chứa dữ liệu liên quan đến nội dung nghe nhìn của quảng cáo gốc hiển thị bằng cách sử dụng lớp GADMediaView. Khi đặt trên thuộc tính GADMediaView mediaContent:

• Nếu có tài sản video, thì video đó sẽ được lưu vào vùng đệm và bắt đầu phát bên trong GADMediaView. Bạn có thể biết liệu có tài sản video hay không bằng cách chọn hasVideoContent.

• Nếu quảng cáo không chứa thành phần video, thì thành phần mainImage sẽ được tải xuống và đặt bên trong GADMediaView.

Lưu ý quan trọng: Theo mặc định, mainImage là thành phần hình ảnh được tải xuống đầu tiên. Nếu disableImageLoading được sử dụng, thì mainImage sẽ là nil và bạn nên đặt thuộc tính này cho hình ảnh được tải xuống theo cách thủ công. Xin lưu ý rằng hệ thống sẽ chỉ sử dụng hình ảnh này khi không có sẵn tài sản video.

Các bước tiếp theo

Tìm hiểu thêm về quyền riêng tư của người dùng.