การแสดงโฆษณาเนทีฟที่ระบบกําหนด
เมื่อโฆษณาเนทีฟโหลด แอปของคุณจะได้รับออบเจ็กต์โฆษณาเนทีฟผ่านข้อความโปรโตคอลอย่างใดอย่างหนึ่งของ GADAdLoaderDelegate
จากนั้นแอปของคุณจะต้องรับผิดชอบในการแสดงโฆษณา (แต่ไม่จำเป็นต้องแสดงทันที)
SDK มีแหล่งข้อมูลที่เป็นประโยชน์เพื่อช่วยให้คุณแสดงโฆษณารูปแบบที่ระบบกําหนดได้ง่ายขึ้น
GADNativeAdView
สําหรับ GADNativeAd
จะมี "การดูโฆษณา" คลาส GADNativeAdView
ที่เกี่ยวข้อง
คลาสการแสดงโฆษณานี้เป็น UIView
ที่ผู้เผยแพร่โฆษณาควรใช้เพื่อแสดงโฆษณา
ตัวอย่างเช่น GADNativeAdView
รายการเดียวจะแสดง GADNativeAd
รายการเดียว ออบเจ็กต์ UIView
แต่ละรายการที่ใช้แสดงชิ้นงานของโฆษณานั้นควรเป็นมุมมองย่อยของออบเจ็กต์ GADNativeAdView
นั้น
หากคุณแสดงโฆษณาใน UITableView
ลำดับชั้นของมุมมองสําหรับเซลล์ใดเซลล์หนึ่งอาจมีลักษณะดังนี้
คลาส GADNativeAdView
ยังมี IBOutlets
ที่ใช้เพื่อลงทะเบียนมุมมองที่ใช้สำหรับแต่ละชิ้นงาน และวิธีการลงทะเบียนออบเจ็กต์ GADNativeAd
เองด้วย การลงทะเบียนมุมมองด้วยวิธีนี้ช่วยให้ SDK จัดการงานต่างๆ เช่น
- การคลิกบันทึก
- การบันทึกการแสดงผล (เมื่อมองเห็นพิกเซลแรกบนหน้าจอ)
- การแสดงการวางซ้อน "ตัวเลือกโฆษณาอื่นๆ"
การวางซ้อน "ตัวเลือกโฆษณาอื่นๆ"
สําหรับโฆษณาเนทีฟโดยอ้อม (แสดงผ่านโฆษณาทดแทนของ AdMob หรือผ่าน Ad Exchange หรือ AdSense) SDK จะเพิ่มการวางซ้อน AdChoices เว้นพื้นที่ในมุมที่ต้องการของมุมมองโฆษณาเนทีฟไว้สําหรับโลโก้ "ตัวเลือกโฆษณาอื่นๆ" ที่ระบบจะแทรกให้โดยอัตโนมัติ นอกจากนี้ โปรดดูให้แน่ใจว่าการวางซ้อนตัวเลือกโฆษณาอื่นๆ อยู่บนเนื้อหาที่ทำให้มองเห็นไอคอนได้ง่าย ดูข้อมูลเพิ่มเติมเกี่ยวกับลักษณะและฟังก์ชันของการวางซ้อนได้ที่หลักเกณฑ์การติดตั้งใช้งานโฆษณาเนทีฟแบบตามโปรแกรม
การระบุแหล่งที่มาของโฆษณา
เมื่อแสดงโฆษณาเนทีฟแบบเป็นโปรแกรม คุณต้องแสดงการระบุแหล่งที่มาของโฆษณาเพื่อบ่งบอกว่าการแสดงผลนั้นเป็นโฆษณาตัวอย่างโค้ด
มาดูวิธีแสดงโฆษณาเนทีฟโดยใช้มุมมองที่โหลดแบบไดนามิกจากไฟล์ xib วิธีนี้มีประโยชน์อย่างยิ่งเมื่อใช้ GADAdLoaders
ที่กําหนดค่าให้ขอหลายรูปแบบ
จัดวาง UIView
ขั้นตอนแรกคือวางเลย์เอาต์ UIViews
ที่จะแสดงชิ้นงานโฆษณาเนทีฟ
ซึ่งคุณทําได้ใน Interface Builder เช่นเดียวกับการสร้างไฟล์ xib อื่นๆ เลย์เอาต์ของโฆษณาเนทีฟอาจมีลักษณะดังนี้
โปรดดูค่าคลาสที่กำหนดเองที่ด้านขวาบนของรูปภาพ ตั้งค่าเป็น
GADNativeAdView
นี่คือคลาสมุมมองโฆษณาที่ใช้แสดง GADNativeAd
นอกจากนี้ คุณจะต้องตั้งค่าคลาสที่กำหนดเองสำหรับ GADMediaView
ซึ่งจะใช้เพื่อแสดงวิดีโอหรือรูปภาพสำหรับโฆษณา
ลิงก์เอาต์เล็ตกับข้อมูลพร็อพเพอร์ตี้
เมื่อสร้างมุมมองแล้วและคุณกําหนดคลาสมุมมองโฆษณาที่ถูกต้องให้กับเลย์เอาต์แล้ว ให้ลิงก์เอาต์พุตชิ้นงานของมุมมองโฆษณากับ UIViews
ที่คุณสร้างขึ้น
วิธีลิงก์เอาต์พุตชิ้นงานของมุมมองโฆษณากับUIViews
ที่สร้างขึ้นสำหรับโฆษณามีดังนี้
ในแผงเต้ารับ เต้ารับใน GADNativeAdView
ลิงก์กับ UIViews
ที่วางไว้ใน Interface Builder แล้ว ซึ่งช่วยให้ 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)")
}
}
สร้าง UIViewRepresentable
สร้าง 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
}
เพิ่มมุมมองลงในลําดับชั้นของมุมมอง
โค้ดต่อไปนี้แสดงการเพิ่ม 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.
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 ทั้งหมดได้โดยไปที่ลิงก์ GitHub ที่เกี่ยวข้อง
ตัวอย่างขั้นสูงของโฆษณาเนทีฟ Swift ตัวอย่างโฆษณาเนทีฟ SwiftUI ตัวอย่างขั้นสูงของโฆษณาเนทีฟ Objective-CGADMediaView
ชิ้นงานรูปภาพและวิดีโอจะแสดงต่อผู้ใช้ผ่าน GADMediaView
นี่เป็น UIView
ที่กําหนดได้ในไฟล์ xib หรือสร้างแบบไดนามิก
โดยควรวางไว้ในลําดับชั้นมุมมองของ GADNativeAdView
เช่นเดียวกับมุมมองชิ้นงานอื่นๆ
มุมมองสื่อต้องมีการป้อนข้อมูลเนื้อหาเช่นเดียวกับมุมมองชิ้นงานทั้งหมด ซึ่งตั้งค่าโดยใช้พร็อพเพอร์ตี้ mediaContent
ใน GADMediaView
พร็อพเพอร์ตี้ mediaContent
ของ GADNativeAd
มีเนื้อหาสื่อที่ส่งไปยัง GADMediaView
ได้
ต่อไปนี้คือตัวอย่างข้อมูลโค้ดจากตัวอย่างเนทีฟขั้นสูง (Swift | Objective-C) ที่แสดงวิธีป้อนข้อมูล GADMediaView
ด้วยชิ้นงานโฆษณาเนทีฟโดยใช้ GADMediaContent
จาก GADNativeAd
Swift
nativeAdView.mediaView?.mediaContent = nativeAd.mediaContent
Objective-C
nativeAdView.mediaView.mediaContent = nativeAd.mediaContent;
ตรวจสอบว่าได้ตั้งค่าคลาสที่กำหนดเองของมุมมองโฆษณาเนทีฟเป็น GADMediaView
ในไฟล์เครื่องมือสร้างอินเทอร์เฟซ และเชื่อมต่อกับเอาต์เล็ต mediaView
แล้ว
การเปลี่ยนโหมดเนื้อหารูปภาพ
คลาส GADMediaView
จะยึดตามคุณสมบัติ UIView
contentMode
เมื่อแสดงรูปภาพ หากต้องการเปลี่ยนวิธีปรับขนาดรูปภาพใน GADMediaView
ให้ตั้งค่า UIViewContentMode
ที่เกี่ยวข้องในพร็อพเพอร์ตี้ contentMode
ของ GADMediaView
ตัวอย่างเช่น หากต้องการกรอก GADMediaView
เมื่อรูปภาพแสดง (โฆษณาไม่มีวิดีโอ) ให้ทำดังนี้
Swift
nativeAdView.mediaView?.contentMode = .aspectFill
Objective-C
nativeAdView.mediaView.contentMode = UIViewContentModeAspectFill;
GADMediaContent
คลาส GADMediaContent
จะเก็บข้อมูลที่เกี่ยวข้องกับเนื้อหาสื่อของโฆษณาเนทีฟ ซึ่งแสดงโดยใช้คลาส GADMediaView
เมื่อตั้งค่าในพร็อพเพอร์ตี้ GADMediaView
mediaContent
หากชิ้นงานวิดีโอพร้อมใช้งาน ระบบจะบัฟเฟอร์และเริ่มเล่นชิ้นงานภายใน
GADMediaView
คุณดูได้ว่าชิ้นงานวิดีโอพร้อมใช้งานหรือไม่โดยดูที่hasVideoContent
หากโฆษณาไม่มีชิ้นงานวิดีโอ ระบบจะดาวน์โหลดชิ้นงาน
mainImage
และวางไว้ภายในGADMediaView
แทน
ขั้นตอนถัดไป
ดูข้อมูลเพิ่มเติมเกี่ยวกับความเป็นส่วนตัวของผู้ใช้