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).
Để 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.
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ị tài sản 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
, hệ 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 tài sản riêng lẻ và một phương thức để đăng ký đố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. Hãy để trống góc ưa 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à 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ị tài sả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 quảng cáo gốc :
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 ả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 tài sản của chế độ xem quảng cáo với UIViews
đã tạo.
Dưới đây là cách liên kết đầu ra tài sả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 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 tài sản 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) // 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 // 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 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]; // 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; }
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 bằng 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 xuốngGADMediaView
Tài sả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. Điều này được đặt bằng cách sử dụng
mediaContent
thuộc tính 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 tài sản quảng cáo gốc 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
áp dụng thuộc tính UIView
contentMode
khi hiển thị hình ảnh. Nếu bạn muốn thay đổi cách chuyển 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 hiển thị bằng cách
sử dụng lớp GADMediaView
. Khi bạn đặt thuộc tính GADMediaView
mediaContent
:
Nếu có tài sản video, video đó sẽ được lưu vào bộ đệm và bắt đầu phát bên trong
GADMediaView
. Bạn có thể biết liệu quảng cáo có chứa tài sản video hay không bằng cách đánh dấu chọnhasVideoContent
.Nếu quảng cáo không chứa tài sản video, tài sản
mainImage
sẽ được tải xuống và đặt bên trongGADMediaView
.