คู่มือนี้ครอบคลุมการโหลดโฆษณาแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้ลงในแอป iOS
ข้อกำหนดเบื้องต้น
ตั้งค่า Google Mobile Ads SDK ก่อนดำเนินการต่อ
ทดสอบด้วยโฆษณาทดสอบเสมอ
เมื่อสร้างและทดสอบแอป โปรดใช้โฆษณาทดสอบแทนโฆษณาจริงที่ใช้งานจริง หากไม่ดำเนินการดังกล่าว อาจส่งผลให้บัญชีถูกระงับ
วิธีที่ง่ายที่สุดในการโหลดโฆษณาทดสอบคือการใช้รหัสหน่วยโฆษณาทดสอบเฉพาะสำหรับแบนเนอร์ iOS ดังนี้
ca-app-pub-3940256099942544/2435281174
ซึ่งได้รับการกำหนดค่าเป็นพิเศษให้แสดงโฆษณาทดสอบสำหรับทุกคำขอ และคุณสามารถใช้ในแอปของคุณเองได้อย่างอิสระขณะเขียนโค้ด ทดสอบ และแก้ไขข้อบกพร่อง เพียงตรวจสอบว่าคุณได้แทนที่ด้วยรหัสหน่วยโฆษณาของคุณเองก่อนที่จะเผยแพร่แอป
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของโฆษณาทดสอบของ Google Mobile Ads SDK ได้ที่โฆษณาทดสอบ
สร้าง GADBannerView
โฆษณาแบนเนอร์จะแสดงในออบเจ็กต์ GADBannerView ดังนั้นขั้นตอนแรกในการผสานรวมโฆษณาแบนเนอร์คือการรวม GADBannerView ไว้ในลำดับชั้นการแสดงผล ซึ่งโดยปกติจะดำเนินการแบบเป็นโปรแกรมหรือผ่าน Interface Builder
แบบเป็นโปรแกรม
นอกจากนี้ยังสร้างอินสแตนซ์ GADBannerView ได้โดยตรงด้วย
ตัวอย่างต่อไปนี้จะสร้าง GADBannerView
Swift
// Initialize the banner view.
bannerView = BannerView()
bannerView.delegate = self
bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)
// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
NSLayoutConstraint.activate([
// Align the banner's bottom edge with the safe area's bottom edge
bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
// Center the banner horizontally in the view
bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])
SwiftUI
หากต้องการใช้ BannerView ให้สร้าง UIViewRepresentable โดยทำดังนี้
private struct BannerViewContainer: UIViewRepresentable {
typealias UIViewType = BannerView
let adSize: AdSize
init(_ adSize: AdSize) {
self.adSize = adSize
}
func makeUIView(context: Context) -> BannerView {
let banner = BannerView(adSize: adSize)
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
banner.delegate = context.coordinator
return banner
}
func updateUIView(_ uiView: BannerView, context: Context) {}
func makeCoordinator() -> BannerCoordinator {
return BannerCoordinator(self)
}
เพิ่ม UIViewRepresentable ลงในลำดับชั้นการแสดงผล โดยระบุค่า height และ width ดังนี้
var body: some View {
Spacer()
// Request an anchored adaptive banner with a width of 375.
let adSize = largeAnchoredAdaptiveBanner(width: 375)
BannerViewContainer(adSize)
.frame(width: adSize.size.width, height: adSize.size.height)
}
Objective-C
// Initialize the banner view.
GADBannerView *bannerView = [[GADBannerView alloc] init];
bannerView.delegate = self;
UIView *view = self.view;
bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[view addSubview:bannerView];
// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
[NSLayoutConstraint activateConstraints:@[
// Align the banner's bottom edge with the safe area's bottom edge
[bannerView.bottomAnchor
constraintEqualToAnchor:view.safeAreaLayoutGuide.bottomAnchor],
// Center the banner horizontally in the view
[bannerView.centerXAnchor constraintEqualToAnchor:view.centerXAnchor],
]];
self.bannerView = bannerView;
Interface Builder
คุณสามารถเพิ่ม GADBannerView ลงในสตอรีบอร์ดหรือไฟล์ xib ได้ เมื่อใช้วิธีนี้ โปรดตรวจสอบว่าได้เพิ่มข้อจำกัดตำแหน่งในแบนเนอร์เท่านั้น เช่น เมื่อแสดงแบนเนอร์แบบปรับขนาดได้ที่ด้านล่างของหน้าจอ ให้ตั้งค่าด้านล่างของมุมมองแบนเนอร์ให้เท่ากับด้านบนของ Bottom Layout Guide และตั้งค่าข้อจำกัด centerX ให้เท่ากับ centerX ของ Superview
กำหนดขนาดโฆษณา
แบนเนอร์แบบปรับขนาดได้ขนาดใหญ่มีรูปแบบที่ใหญ่ขึ้นซึ่งออกแบบมาสำหรับเลย์เอาต์แบบไม่เลื่อน เมื่อเทียบกับแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้แบบมาตรฐาน แบนเนอร์เหล่านี้จะมีความสูงสูงสุดที่สูงกว่า (สูงสุด 20% ของความสูงของหน้าจอ ระหว่าง 50 ถึง 150 พอยต์) พื้นที่ที่เพิ่มขึ้นนี้ได้รับการเพิ่มประสิทธิภาพสำหรับเนื้อหาวิดีโอ
ตัวอย่างต่อไปนี้จะแสดงขนาดแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้ขนาดใหญ่
Swift
// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
Objective-C
// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);
กำหนดขนาดโฆษณาให้เล็กกว่าหรือเท่ากับขนาดหน้าจอของอุปกรณ์
หากต้องการกำหนดขนาดหน้าจอสูงสุดใน iOS 26 ขึ้นไป ให้ใช้พร็อพเพอร์ตี้ UIWindowScene.effectiveGeometry.coordinateSpace ใน iOS 18 และเวอร์ชันก่อนหน้า ให้ใช้พร็อพเพอร์ตี้ UIWindowScene.coordinateSpace
ดูรายละเอียดเกี่ยวกับข้อจำกัดด้านขนาดได้ที่ข้อกำหนดด้านขนาดของคำขอโฆษณา
โหลดโฆษณา
เมื่อ GADBannerView พร้อมใช้งานและกำหนดค่าพร็อพเพอร์ตี้ เช่น adUnitID แล้ว ก็ถึงเวลาโหลดโฆษณา ซึ่งทำได้โดยการเรียกใช้ loadRequest: ในออบเจ็กต์ GADRequest ดังนี้
Swift
func loadBannerAd(bannerView: BannerView) {
// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
bannerView.load(Request())
}
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
Objective-C
// Request a large anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADLargeAnchoredAdaptiveBannerAdSizeWithWidth(375);
[self.bannerView loadRequest:[GADRequest request]];
ออบเจ็กต์ GADRequest แสดงถึงคำขอโฆษณาเดียว และมีพร็อพเพอร์ตี้สำหรับสิ่งต่างๆ เช่น ข้อมูลการกำหนดเป้าหมาย
รีเฟรชโฆษณา
หากคุณกำหนดค่าหน่วยโฆษณาให้รีเฟรช คุณไม่จำเป็นต้องขอโฆษณาอื่นเมื่อโฆษณาโหลดไม่สำเร็จ Google Mobile Ads SDK จะยึดตามอัตราการรีเฟรชที่คุณระบุไว้ใน UI ของ AdMob หากคุณไม่ได้เปิดใช้การรีเฟรช ให้ส่งคำขอใหม่ ดูรายละเอียดเพิ่มเติมเกี่ยวกับการรีเฟรชหน่วยโฆษณา เช่น การตั้งค่าอัตราการรีเฟรชได้ที่ใช้การรีเฟรชอัตโนมัติสําหรับโฆษณาแบนเนอร์
จัดการการเปลี่ยนแปลงการวางแนว
เมื่อการวางแนวหน้าจอของแอปเปลี่ยนไป เช่น จากโหมดportraitเป็นแนวนอน ความกว้างที่ใช้ได้สำหรับแบนเนอร์ก็มักจะเปลี่ยนไปด้วย หากต้องการตรวจสอบว่าคุณแสดงโฆษณาที่มีขนาดเหมาะสมสำหรับเลย์เอาต์ใหม่ ให้ขอแบนเนอร์ใหม่ หากความกว้างของแบนเนอร์เป็นแบบคงที่ หรือหากข้อจำกัดของเลย์เอาต์สามารถรองรับการปรับขนาดได้ ให้ข้ามขั้นตอนนี้
Swift
override func viewWillTransition(
to size: CGSize, with coordinator: UIViewControllerTransitionCoordinator
) {
coordinator.animate(alongsideTransition: { _ in
// Load a new ad for the new orientation.
})
}
Objective-C
- (void)viewWillTransitionToSize:(CGSize)size
withTransitionCoordinator:(id<UIViewControllerTransitionCoordinator>)coordinator {
[coordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext> context) {
// Load a new ad for the new orientation.
} completion:nil];
}
เหตุการณ์โฆษณา
คุณสามารถใช้ GADBannerViewDelegate เพื่อฟังเหตุการณ์ในวงจร เช่น เมื่อโฆษณาปิดลงหรือผู้ใช้ออกจากแอป
ลงทะเบียนสำหรับเหตุการณ์แบนเนอร์
หากต้องการลงทะเบียนสำหรับเหตุการณ์โฆษณาแบนเนอร์ ให้ตั้งค่าพร็อพเพอร์ตี้ delegate ใน GADBannerView เป็นออบเจ็กต์ที่ใช้โปรโตคอล GADBannerViewDelegate โดยทั่วไปแล้ว คลาสที่ใช้โฆษณาแบนเนอร์จะทำหน้าที่เป็นคลาสผู้รับมอบสิทธิ์ด้วย ซึ่งในกรณีนี้ คุณสามารถตั้งค่าพร็อพเพอร์ตี้ delegate เป็น self ได้
Swift
bannerView.delegate = self
SwiftUI
banner.delegate = context.coordinator
Objective-C
bannerView.delegate = self;
ติดตั้งใช้งานเหตุการณ์แบนเนอร์
แต่ละเมธอดใน GADBannerViewDelegate จะทำเครื่องหมายเป็นไม่บังคับ คุณจึงต้องใช้เฉพาะเมธอดที่ต้องการเท่านั้น ตัวอย่างนี้ใช้แต่ละเมธอดและบันทึกข้อความลงในคอนโซล
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
print("Banner ad loaded.")
}
func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
print("Banner ad failed to load: \(error.localizedDescription)")
}
func bannerViewDidRecordImpression(_ bannerView: BannerView) {
print("Banner ad recorded an impression.")
}
func bannerViewDidRecordClick(_ bannerView: BannerView) {
print("Banner ad recorded a click.")
}
func bannerViewWillPresentScreen(_ bannerView: BannerView) {
print("Banner ad will present screen.")
}
func bannerViewWillDismissScreen(_ bannerView: BannerView) {
print("Banner ad will dismiss screen.")
}
func bannerViewDidDismissScreen(_ bannerView: BannerView) {
print("Banner ad did dismiss screen.")
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidReceiveAd");
}
- (void)bannerView:(GADBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
NSLog(@"bannerView:didFailToReceiveAdWithError: %@", error.localizedDescription);
}
- (void)bannerViewDidRecordImpression:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidRecordImpression");
}
- (void)bannerViewWillPresentScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewWillPresentScreen");
}
- (void)bannerViewWillDismissScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewWillDismissScreen");
}
- (void)bannerViewDidDismissScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidDismissScreen");
}
ดูตัวอย่าง Ad Delegate สำหรับการใช้งานเมธอดตัวแทนแบนเนอร์ในแอป iOS API Demo
กรณีการใช้งาน
ตัวอย่างกรณีการใช้งานสำหรับเมธอดเหตุการณ์โฆษณาเหล่านี้มีดังนี้
เพิ่มแบนเนอร์ลงในลำดับชั้นการแสดงผลเมื่อได้รับโฆษณา
คุณอาจต้องหน่วงเวลาในการเพิ่ม GADBannerView ลงในลำดับชั้นการแสดงผลจนกว่าจะได้รับโฆษณา ซึ่งทำได้โดยการรอฟังเหตุการณ์ bannerViewDidReceiveAd: ดังนี้
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
// Add banner to view and add constraints.
addBannerViewToView(bannerView)
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
// Add bannerView to view and add constraints as above.
[self addBannerViewToView:self.bannerView];
}
สร้างภาพเคลื่อนไหวให้โฆษณาแบนเนอร์
นอกจากนี้ คุณยังใช้เหตุการณ์ bannerViewDidReceiveAd: เพื่อทำให้โฆษณาแบนเนอร์เคลื่อนไหวได้เมื่อแสดงผลแล้ว ดังที่แสดงในตัวอย่างต่อไปนี้
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
bannerView.alpha = 0
UIView.animate(withDuration: 1, animations: {
bannerView.alpha = 1
})
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
bannerView.alpha = 0;
[UIView animateWithDuration:1.0 animations:^{
bannerView.alpha = 1;
}];
}
หยุดแอปชั่วคราวและเปิดใช้งานอีกครั้ง
โปรโตคอล GADBannerViewDelegate มีวิธีแจ้งให้คุณทราบถึงเหตุการณ์ต่างๆ เช่น เมื่อการคลิกทำให้มีการแสดงหรือปิดการแสดงโฆษณาซ้อนทับ หากต้องการติดตามว่าเหตุการณ์เหล่านี้เกิดจากโฆษณาหรือไม่ ให้ลงทะเบียนเมธอด GADBannerViewDelegate เหล่านี้
หากต้องการตรวจจับการนำเสนอแบบวางซ้อนหรือการเรียกใช้เบราว์เซอร์ภายนอกทุกประเภท ไม่ใช่แค่การนำเสนอหรือการเรียกใช้ที่มาจากการคลิกโฆษณา แอปของคุณควรฟังเมธอดที่เทียบเท่าใน UIViewController หรือ UIApplication ตารางต่อไปนี้แสดงเมธอด iOS ที่เทียบเท่าซึ่งเรียกใช้พร้อมกับเมธอด GADBannerViewDelegate
| เมธอด GADBannerViewDelegate | วิธีการสำหรับ iOS |
|---|---|
bannerViewWillPresentScreen: |
viewWillDisappear: ของ UIViewController |
bannerViewWillDismissScreen: |
viewWillAppear: ของ UIViewController |
bannerViewDidDismissScreen: |
viewDidAppear: ของ UIViewController |
แหล่งข้อมูลเพิ่มเติม
ตัวอย่างใน GitHub
- ตัวอย่างโฆษณาแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้: Swift | SwiftUI | Objective-C
- เดโมฟีเจอร์ขั้นสูง: Swift | Objective-C
ขั้นตอนถัดไป
แบนเนอร์แบบยุบได้
โฆษณาแบนเนอร์แบบยุบได้คือโฆษณาแบนเนอร์ที่เริ่มแรกจะแสดงเป็นโฆษณาซ้อนทับขนาดใหญ่ โดยมีปุ่มสำหรับยุบโฆษณาให้มีขนาดเล็กลง ลองใช้เพื่อเพิ่มประสิทธิภาพให้ดียิ่งขึ้น ดูรายละเอียดเพิ่มเติมได้ที่โฆษณาแบนเนอร์แบบยุบได้
แบนเนอร์แบบปรับขนาดได้ที่แทรกในบรรทัด
แบนเนอร์แบบปรับขนาดได้ที่แทรกในบรรทัดมีขนาดใหญ่และสูงกว่าแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้ โดยมีความสูงที่หลากหลาย และอาจสูงเท่ากับหน้าจออุปกรณ์ เราขอแนะนำให้ใช้แบนเนอร์แบบปรับขนาดได้ที่แทรกในบรรทัดแทนโฆษณาแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้สำหรับแอปที่วางโฆษณาแบนเนอร์ในเนื้อหาที่เลื่อนดูได้ ดูรายละเอียดเพิ่มเติมได้ที่แบนเนอร์แบบปรับขนาดได้ในบรรทัด