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 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 làm việc đó ngay lập tức). Để giúp cho việc hiển thị định dạng quảng cáo do hệ thống xác định 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: Tìm hiểu thêm về quảng cáo gốc trong Cẩm nang dành cho Quảng cáo gốc của chúng tôi. Ngoài ra, hãy xem lại Nguyên tắc và chính sách về Quảng cáo gốc để nhận hướng dẫn về cách hiển thị quảng cáo gốc của bạn.

GADUnifiedNativeAdView

Đối với GADUnifiedNativeAd, có một lớp "chế độ xem quảng cáo" tương ứng: GADUnifiedNativeAdView. 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 GADUnifiedNativeAdView duy nhất có thể hiển thị một bản sao của GADUnifiedNativeAd. Mỗi đối tượng UIView được dùng để hiển thị nội dung của quảng cáo đó phải là chế độ xem phụ của đối tượng GADUnifiedNativeAdView đó.

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

Lớp GADUnifiedNativeAdView cũng cung cấp IBOutlets dùng để đăng ký chế độ xem cho từng nội dung riêng lẻ và một phương thức để đăng ký chính đối tượng GADUnifiedNativeAd. Việc đăng ký các chế độ xem 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ần nhấp.
• Ghi lại các lần 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 (phân phát qua tính năng chèn lấp AdMob hoặc qua Ad Exchange hay AdSense), SDK sẽ thêm một lớp phủ Lựa chọn quảng cáo. Vui lòng để trống góc yêu thích 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. Đồng thời, hãy chắc chắn rằng lớp phủ Lựa chọn quảng cáo được đặt trên nội dung cho phép người dùng 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.

Thuộc tính quảng cáo

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 chế độ xem đó là một quảng cáo.

Ví dụ về mã

Hãy cùng tìm hiểu cách hiển thị quảng cáo gốc 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.

Sắp xếp bố cục cho UIViews

Bước đầu tiên cần làm là sắp xếp bố cục cho UIViews, chế độ xem này sẽ hiển thị nội dung 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. Bố cục cho một quảng cáo gốc có thể trông như sau:

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

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

Ngoài ra, bạn cũng cần đặt lớp tùy chỉnh cho GADMediaView, lớp này được 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 nội dung của chế độ xem quảng cáo với UIViews mà bạn đã tạo. Dưới đây là cách liên kết đầu ra nội dung của chế độ xem quảng cáo với UIViews đã tạo cho quảng cáo:

Trong bảng đầu ra, các đầu ra trong GADUnifiedNativeAdView đã 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 nội dung hiển thị tương ứng của các UIView. Ngoài ra, bạn cũng nên nhớ rằng các đầu ra này đại diện cho các chế độ xem có thể nhấp vào trong quảng cáo.

Hiển thị quảng cáo

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 sẽ hiển thị quảng cáo sau khi quảng cáo tải. Dưới đây là một phương thức hiển thị quảng cáo trong chế độ xem đã được xác định ở trên:

Swift

// Mark: - GADUnifiedNativeAdLoaderDelegate
func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd: GADUnifiedNativeAd) {
  print("Received unified native ad: \(nativeAd)")
  refreshAdButton.isEnabled = true
  // Create and place ad in view hierarchy.
  let nibView = Bundle.main.loadNibNamed("UnifiedNativeAdView", owner: nil, options: nil)?.first
  guard let nativeAdView = nibView as? GADUnifiedNativeAdView else {
    return
  }
  setAdView(nativeAdView)

  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  nativeAdView.nativeAd = nativeAd

  // 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.
  (nativeAdView.headlineView as? UILabel)?.text = nativeAd.headline

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

Objective-C

#pragma mark GADUnifiedNativeAdLoaderDelegate implementation

- (void)adLoader:(GADAdLoader *)adLoader didReceiveUnifiedNativeAd:(GADUnifiedNativeAd *)nativeAd {
  NSLog(@"Received unified native ad: %@", nativeAd);
  self.refreshButton.enabled = YES;

  // Create and place ad in view hierarchy.
  GADUnifiedNativeAdView *nativeAdView =
      [[NSBundle mainBundle] loadNibNamed:@"UnifiedNativeAdView" owner:nil options:nil].firstObject;
  [self setAdView:nativeAdView];

  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  nativeAdView.nativeAd = nativeAd;

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

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

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 gốc nâng cao ở cả ngôn ngữ lập trình Swift và Objective-C.

Tải ví dụ về quảng cáo gốc nâng cao

GADMediaView

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

Nội dung 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 thứ bậc chế độ xem của GADNativeAdView, giống như mọi chế độ xem nội dung khác.

Tương tự như với tất cả các chế độ xem nội dung 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ể thực hiện việc này bằng cách sử dụng thuộc tính mediaContent trên GADMediaView. Hệ thống có thể chuyển thuộc tính mediaContent của GADUnifiedNativeAd chứa nội dung nghe nhìn đến GADMediaView.

Dưới đây là một đoạn mã trong Ví dụ về quảng cáo gốc nâng cao (Swift | Objective-C) cho biết cách điền nội dung quảng cáo gốc vào GADMediaView bằng cách sử dụng GADMediaContent từ GADUnifiedNativeAd:

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 tùy chỉnh 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 sẽ 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.

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. Quảng cáo này 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ó nội dung video, 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 nội dung video có thể sử dụng hay không bằng cách chọn hasVideoContent.

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

Lớp nội dung trên phương tiện truyền thông có các thuộc tính sau đây:

aspectRatio

Thuộc tính này cho biết tỷ lệ khung hình (chiều rộng/chiều cao) của video (nếu có) hoặc hình ảnh hoặc 0 (không) nếu không có nội dung trên phương tiện truyền thông.

mainImage

Theo mặc định, mainImage là nội dung 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 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 nội dung video.

Video gốc

Ngoài hình ảnh, văn bản và số, một số quảng cáo gốc còn chứa nội dung video. Không phải quảng cáo nào cũng chứa video và các ứng dụng không bắt buộc phải hiển thị video có trong quảng cáo.

GADVideoController

Lớp GADVideoController dùng để kiểm soát việc phát lại video và truy xuất các lệnh gọi lại để phát lại video.

GADUnifiedNativeAd cung cấp thuộc tính videoController hiển thị GADVideoController cho mỗi quảng cáo:

Swift

let videoController = myUnifiedNativeAd.videoController

Objective-C

GADVideoController *videoController = myUnifiedNativeAd.videoController

Thuộc tính này không bao giờ có giá trị nil, ngay cả khi quảng cáo không chứa nội dung video.

Các ứng dụng cũng có thể đặt GADVideoControllerDelegate cho GADVideoController để nhận thông báo về các sự kiện trong thời gian hoạt động của nội dung video. GADVideoControllerDelegate cung cấp một thông báo tùy chọn duy nhất, đó là videoControllerDidEndVideoPlayback. Hệ thống sẽ gửi thông báo này khi hoàn tất quá trình phát lại video.

Đây là một ví dụ về GADVideoControllerDelegate đang hoạt động để quan sát khi quá trình phát lại kết thúc:

Swift

class ViewController: UIViewController, GADUnifiedNativeAdLoaderDelegate,
    GADVideoControllerDelegate {

  func adLoader(_ adLoader: GADAdLoader, didReceive nativeAd:
                GADUnifiedNativeAd) {
    ...
    nativeAd.mediaContent.videoController.delegate = self
    ...
  }
  ...
  func videoControllerDidEndVideoPlayback(_ videoController: Any!) {
    // Here apps can take action knowing video playback is finished.
    // This is handy for things like unmuting audio, and so on.
  }
}

Objective-C

@interface ViewController () <GADUnifiedNativeAdLoaderDelegate,
        GADVideoControllerDelegate>

- (void)adLoader:(GADAdLoader *)adLoader
    didReceiveNativeAd:(GADUnifiedNativeAd) *)nativeAd {
  ...
  nativeAd.mediaContent.videoController.delegate = self;
  ...
}
...

- (void)videoControllerDidEndVideoPlayback:(GADVideoController *)videoController {
  // Here apps can take action knowing video playback is finished.
  // This is handy for things like unmuting audio, and so on.
}

@end

Bạn có thể đọc Nguyên tắc và chính sách về Quảng cáo gốc để biết thêm thông tin hướng dẫn về cách hiển thị quảng cáo gốc.