โฆษณาแบนเนอร์คือโฆษณาสี่เหลี่ยมผืนผ้าที่ยึดพื้นที่ส่วนหนึ่งของเลย์เอาต์ของแอป โฆษณาเหล่านี้จะยังคงแสดงบนหน้าจอโดยอาจตรึงอยู่ที่ด้านบนหรือด้านล่างของหน้าจอ หรือแทรกอยู่ในเนื้อหาขณะที่ผู้ใช้เลื่อนดู โฆษณาแบนเนอร์จะรีเฟรชโดยอัตโนมัติหลังจากเวลาผ่านไประยะหนึ่ง ดูข้อมูลเพิ่มเติมได้ที่ภาพรวมของโฆษณาแบนเนอร์
คู่มือนี้จะแสดงวิธีเริ่มต้นใช้งานโฆษณาแบนเนอร์ Anchor แบบปรับขนาดได้ ซึ่งจะเพิ่มประสิทธิภาพให้สูงสุดด้วยการปรับขนาดโฆษณาให้เหมาะสมกับอุปกรณ์แต่ละเครื่องโดยใช้ความกว้างโฆษณาที่คุณระบุ
แบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้
โฆษณาแบนเนอร์ยึดตําแหน่งที่ปรับเปลี่ยนได้คือโฆษณาที่มีสัดส่วนภาพคงที่ ไม่ใช่โฆษณาขนาดคงที่ตามปกติ สัดส่วนภาพคล้ายกับมาตรฐานอุตสาหกรรมขนาด 320x50 เมื่อคุณระบุความกว้างเต็มที่มีอยู่ ระบบจะแสดงโฆษณาที่มีความสูงเหมาะสมที่สุดสำหรับความกว้างนั้น ความสูงที่เหมาะสมจะไม่เปลี่ยนแปลงตามคําขอจากอุปกรณ์เครื่องเดียวกัน และมุมมองรอบๆ ก็ไม่จําเป็นต้องย้ายเมื่อโฆษณารีเฟรช
ข้อกำหนดเบื้องต้น
- ทำตามคู่มือเริ่มต้นใช้งาน
ทดสอบด้วยโฆษณาทดสอบเสมอ
เมื่อสร้างและทดสอบแอป โปรดใช้โฆษณาทดสอบแทนโฆษณาเวอร์ชันที่ใช้งานจริง หากไม่ดำเนินการดังกล่าวอาจส่งผลให้บัญชีถูกระงับ
วิธีที่ง่ายที่สุดในการโหลดโฆษณาทดสอบคือการใช้รหัสหน่วยโฆษณาทดสอบสําหรับแบนเนอร์ iOS โดยเฉพาะ ดังนี้
ca-app-pub-3940256099942544/2435281174
เราได้กําหนดค่าไว้เป็นพิเศษให้แสดงโฆษณาทดสอบสําหรับคําขอทุกรายการ และคุณใช้โฆษณานี้ในแอปของคุณเองได้ขณะเขียนโค้ด ทดสอบ และแก้ไขข้อบกพร่อง เพียงตรวจสอบว่าคุณได้แทนที่รหัสดังกล่าวด้วยรหัสหน่วยโฆษณาของคุณเองก่อนเผยแพร่แอป
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของโฆษณาทดสอบของ Mobile Ads SDK ได้ที่ทดสอบ
สร้าง GADBannerView
โฆษณาแบนเนอร์จะแสดงในออบเจ็กต์ GADBannerView
ดังนั้นขั้นตอนแรกในการผสานรวมโฆษณาแบนเนอร์คือการใส่ GADBannerView
ในลําดับชั้นมุมมอง ซึ่งโดยปกติจะดำเนินการแบบเป็นโปรแกรมหรือผ่าน Interface Builder
แบบเป็นโปรแกรม
นอกจากนี้ คุณยังสร้างอินสแตนซ์ GADBannerView
โดยตรงได้ด้วย
ตัวอย่างต่อไปนี้สร้าง GADBannerView
Swift
import GoogleMobileAds
import UIKit
class ViewController: UIViewController {
var bannerView: GADBannerView!
override func viewDidLoad() {
super.viewDidLoad()
let viewWidth = view.frame.inset(by: view.safeAreaInsets).width
// Here the current interface orientation is used. Use
// GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth or
// GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth if you prefer to load an ad of a
// particular orientation,
let adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
bannerView = GADBannerView(adSize: adaptiveSize)
addBannerViewToView(bannerView)
}
func addBannerViewToView(_ bannerView: GADBannerView) {
bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)
// This example doesn't give width or height constraints, as the provided
// ad size gives the banner an intrinsic content size to size the view.
view.addConstraints(
[NSLayoutConstraint(item: bannerView,
attribute: .bottom,
relatedBy: .equal,
toItem: view.safeAreaLayoutGuide,
attribute: .bottom,
multiplier: 1,
constant: 0),
NSLayoutConstraint(item: bannerView,
attribute: .centerX,
relatedBy: .equal,
toItem: view,
attribute: .centerX,
multiplier: 1,
constant: 0)
])
}
}
SwiftUI
หากต้องการใช้ GADBannerView
ให้สร้าง UIViewRepresentable
โดยทำดังนี้
private struct BannerView: UIViewRepresentable {
let adSize: GADAdSize
init(_ adSize: GADAdSize) {
self.adSize = adSize
}
func makeUIView(context: Context) -> UIView {
// Wrap the GADBannerView in a UIView. GADBannerView automatically reloads a new ad when its
// frame size changes; wrapping in a UIView container insulates the GADBannerView from size
// changes that impact the view returned from makeUIView.
let view = UIView()
view.addSubview(context.coordinator.bannerView)
return view
}
func updateUIView(_ uiView: UIView, context: Context) {
context.coordinator.bannerView.adSize = adSize
}
func makeCoordinator() -> BannerCoordinator {
return BannerCoordinator(self)
}
หากต้องการจัดการการเริ่มต้นและลักษณะการทํางานของ GADBannerView
ให้สร้าง Coordinator
ดังนี้
class BannerCoordinator: NSObject, GADBannerViewDelegate {
private(set) lazy var bannerView: GADBannerView = {
let banner = GADBannerView(adSize: parent.adSize)
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(GADRequest())
banner.delegate = self
return banner
}()
let parent: BannerView
init(_ parent: BannerView) {
self.parent = parent
}
หากต้องการดูความกว้างของมุมมอง ให้ใช้ GeometryReader
คลาสนี้จะคํานวณขนาดโฆษณาที่เหมาะสมสําหรับการวางแนวอุปกรณ์ปัจจุบัน ระบบจะตั้งค่า frame
เป็นค่าความสูงที่คำนวณจากขนาดโฆษณา
var body: some View {
GeometryReader { geometry in
let adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(geometry.size.width)
VStack {
Spacer()
BannerView(adSize)
.frame(height: adSize.size.height)
}
}
Objective-C
โปรดทราบว่าในกรณีนี้ เราจะไม่ระบุข้อจำกัดความกว้างหรือความสูง เนื่องจากขนาดโฆษณาที่ระบุจะให้แบนเนอร์มีขนาดเนื้อหาตามธรรมชาติเพื่อปรับขนาดวิว
@import GoogleMobileAds;
@interface ViewController ()
@property(nonatomic, strong) GADBannerView *bannerView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Here safe area is taken into account, hence the view frame is used after the
// view has been laid out.
CGRect frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets);
CGFloat viewWidth = frame.size.width;
// Here the current interface orientation is used. If the ad is being preloaded
// for a future orientation change or different orientation, the function for the
// relevant orientation should be used.
GADAdSize adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
// In this case, we instantiate the banner with desired ad size.
self.bannerView = [[GADBannerView alloc] initWithAdSize:adaptiveSize];
[self addBannerViewToView:self.bannerView];
}
- (void)addBannerViewToView:(UIView *)bannerView {
bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:bannerView];
// This example doesn't give width or height constraints, as the provided
// ad size gives the banner an intrinsic content size to size the view.
[self.view addConstraints:@[
[NSLayoutConstraint constraintWithItem:bannerView
attribute:NSLayoutAttributeBottom
relatedBy:NSLayoutRelationEqual
toItem:self.view.safeAreaLayoutGuide
attribute:NSLayoutAttributeBottom
multiplier:1
constant:0],
[NSLayoutConstraint constraintWithItem:bannerView
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:self.view
attribute:NSLayoutAttributeCenterX
multiplier:1
constant:0]
]];
}
@end
Interface Builder
คุณสามารถเพิ่ม GADBannerView
ลงในสตอรี่บอร์ดหรือไฟล์ xib ได้ เมื่อใช้วิธีนี้ โปรดเพิ่มข้อจำกัดตําแหน่งในแบนเนอร์เท่านั้น ตัวอย่างเช่น เมื่อแสดงแบนเนอร์แบบปรับขนาดได้ที่ด้านล่างของหน้าจอ ให้ตั้งค่าด้านล่างของมุมมองแบนเนอร์เท่ากับด้านบนของคู่มือเลย์เอาต์ด้านล่าง และตั้งค่าข้อจำกัด centerX
เท่ากับ centerX
ของมุมมองที่เหนือกว่า
ระบบจะยังคงกำหนดขนาดโฆษณาของแบนเนอร์แบบเป็นโปรแกรม ดังนี้
Swift
bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
Objective-C
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
โหลดโฆษณา
เมื่อ GADBannerView
อยู่ในตําแหน่งและมีการกำหนดค่าพร็อพเพอร์ตี้แล้ว ก็ถึงเวลาโหลดโฆษณา ซึ่งทำได้ด้วยการเรียกใช้ loadRequest:
บนออบเจ็กต์ GADRequest
ดังนี้
Swift
override func viewDidLoad() {
super.viewDidLoad()
// Set the ad unit ID and view controller that contains the GADBannerView.
bannerView.adUnitID = "ca-app-pub-3940256099942544/2435281174"
bannerView.rootViewController = self
bannerView.load(GADRequest())
}
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(GADRequest())
Objective-C
- (void)viewDidLoad {
[super viewDidLoad];
// Set the ad unit ID and view controller that contains the GADBannerView.
self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2435281174";
self.bannerView.rootViewController = self;
[self.bannerView loadRequest:[GADRequest request]];
}
ออบเจ็กต์ GADRequest แสดงถึงคําขอโฆษณารายการเดียว และมีพร็อพเพอร์ตี้สําหรับข้อมูลต่างๆ เช่น ข้อมูลการกําหนดเป้าหมาย
รีเฟรชโฆษณา
หากกําหนดค่าหน่วยโฆษณาให้รีเฟรช คุณไม่จําเป็นต้องขอโฆษณาอื่นเมื่อโฆษณาโหลดไม่สําเร็จ Google Mobile Ads SDK จะยึดตามอัตราการรีเฟรชที่คุณระบุไว้ใน UI ของ AdMob หากยังไม่ได้เปิดใช้การรีเฟรช ให้ส่งคำขอใหม่ ดูรายละเอียดเพิ่มเติมเกี่ยวกับการรีเฟรชหน่วยโฆษณา เช่น การตั้งค่าอัตราการรีเฟรช ได้ที่หัวข้อใช้การรีเฟรชอัตโนมัติสําหรับโฆษณาแบนเนอร์
เหตุการณ์โฆษณา
การใช้ GADBannerViewDelegate
ช่วยให้คุณรอฟังเหตุการณ์ในวงจรของลูกค้าได้ เช่น เมื่อปิดโฆษณาหรือผู้ใช้ออกจากแอป
ลงทะเบียนเข้าร่วมกิจกรรมในแบนเนอร์
หากต้องการลงทะเบียนเหตุการณ์โฆษณาแบนเนอร์ ให้ตั้งค่าพร็อพเพอร์ตี้ delegate
ใน
GADBannerView
เป็นออบเจ็กต์ที่ใช้โปรโตคอล
GADBannerViewDelegate
โดยทั่วไปแล้ว คลาสที่ใช้โฆษณาแบนเนอร์จะทำหน้าที่เป็นคลาสผู้รับมอบสิทธิ์ด้วย ในกรณีนี้ คุณสามารถตั้งค่าพร็อพเพอร์ตี้ delegate
เป็น self
ได้
Swift
import GoogleMobileAds
import UIKit
class ViewController: UIViewController, GADBannerViewDelegate {
var bannerView: GADBannerView!
override func viewDidLoad() {
super.viewDidLoad()
// ...
bannerView.delegate = self
}
}
SwiftUI
banner.delegate = self
Objective-C
@import GoogleMobileAds;
@interface ViewController () <GADBannerViewDelegate>
@property(nonatomic, strong) GADBannerView *bannerView;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// ...
self.bannerView.delegate = self;
}
ใช้เหตุการณ์แบนเนอร์
วิธีการแต่ละรายการใน GADBannerViewDelegate
มีการทำเครื่องหมายว่าไม่บังคับ คุณจึงติดตั้งใช้งานเฉพาะวิธีการที่ต้องการได้ ตัวอย่างนี้ใช้แต่ละเมธอดและบันทึกข้อความไปยังคอนโซล
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
print("bannerViewDidReceiveAd")
}
func bannerView(_ bannerView: GADBannerView, didFailToReceiveAdWithError error: Error) {
print("bannerView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}
func bannerViewDidRecordImpression(_ bannerView: GADBannerView) {
print("bannerViewDidRecordImpression")
}
func bannerViewWillPresentScreen(_ bannerView: GADBannerView) {
print("bannerViewWillPresentScreen")
}
func bannerViewWillDismissScreen(_ bannerView: GADBannerView) {
print("bannerViewWillDIsmissScreen")
}
func bannerViewDidDismissScreen(_ bannerView: GADBannerView) {
print("bannerViewDidDismissScreen")
}
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");
}
ดูตัวอย่างผู้รับมอบสิทธิ์โฆษณาสําหรับการใช้งานเมธอดผู้รับมอบสิทธิ์แบนเนอร์ในแอปสาธิต iOS API
กรณีการใช้งาน
ตัวอย่างกรณีการใช้งานของเมธอดเหตุการณ์โฆษณามีดังนี้
เพิ่มแบนเนอร์ลงในลําดับชั้นของมุมมองเมื่อได้รับโฆษณา
คุณอาจต้องรอสักครู่ก่อนที่จะเพิ่ม GADBannerView
ลงในลําดับชั้นของมุมมองจนกว่าจะได้รับการโฆษณา ซึ่งทำได้โดยฟังเหตุการณ์ bannerViewDidReceiveAd:
ดังนี้
Swift
func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
// 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: GADBannerView) {
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
ขั้นตอนถัดไป
แบนเนอร์แบบย่อได้
โฆษณาแบนเนอร์แบบยุบได้คือโฆษณาแบนเนอร์ที่แสดงเป็นโฆษณาซ้อนทับขนาดใหญ่ในตอนแรก โดยมีปุ่มสำหรับยุบโฆษณาให้มีขนาดเล็กลง ลองใช้เพื่อเพิ่มประสิทธิภาพให้ดียิ่งขึ้น ดูรายละเอียดเพิ่มเติมได้ที่โฆษณาแบนเนอร์แบบยุบได้
แบนเนอร์แบบปรับขนาดได้ที่แทรกในบรรทัด
แบนเนอร์แบบปรับขนาดได้ที่แทรกในบรรทัดคือแบนเนอร์ที่มีขนาดใหญ่และสูงกว่าเดิมเมื่อเทียบกับแบนเนอร์แบบปรับขนาดได้แบบโฆษณา Anchor โดยมีความสูงที่ไม่ตายตัวและมีความสูงได้เท่าหน้าจออุปกรณ์ เราขอแนะนําให้ใช้แบนเนอร์แบบปรับขนาดได้ที่แทรกในบรรทัดแทนโฆษณาแบนเนอร์แบบปรับขนาดได้ที่ยึดตําแหน่งไว้สําหรับแอปที่แสดงโฆษณาแบนเนอร์ในเนื้อหาที่เลื่อนได้ ดูรายละเอียดเพิ่มเติมได้ที่แบนเนอร์แบบปรับเปลี่ยนในบรรทัด