คู่มือนี้ครอบคลุมการโหลดโฆษณาแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้ลงในแอป iOS
ข้อกำหนดเบื้องต้น
ก่อนดำเนินการต่อ ให้ตั้งค่า Google Mobile Ads SDK
ทดสอบด้วยโฆษณาทดสอบเสมอ
เมื่อสร้างและทดสอบแอป โปรดใช้โฆษณาทดสอบแทน โฆษณาจริงที่ใช้งานจริง หากไม่ดำเนินการดังกล่าวอาจส่งผลให้บัญชีถูกระงับ
วิธีที่ง่ายที่สุดในการโหลดโฆษณาทดสอบคือการใช้รหัสหน่วยโฆษณาทดสอบเฉพาะสำหรับแบนเนอร์ iOS
/21775744923/example/adaptive-banner
ซึ่งได้รับการกำหนดค่าเป็นพิเศษให้แสดงโฆษณาทดสอบสำหรับทุกคำขอ และคุณสามารถ ใช้ในแอปของคุณเองได้อย่างอิสระขณะเขียนโค้ด ทดสอบ และแก้ไขข้อบกพร่อง เพียงตรวจสอบว่าคุณได้แทนที่ด้วยรหัสหน่วยโฆษณาของคุณเองก่อนเผยแพร่แอป
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของGoogle Mobile Ads SDKโฆษณาทดสอบได้ที่ทดสอบ โฆษณา
สร้าง GAMBannerView
โฆษณาแบนเนอร์จะแสดงในออบเจ็กต์ GAMBannerView
ดังนั้นขั้นตอนแรกในการผสานรวมโฆษณาแบนเนอร์คือการรวม GAMBannerView
ไว้ในลำดับชั้นของมุมมอง โดยปกติแล้วจะดำเนินการผ่านโปรแกรมหรือ
Interface Builder
แบบเป็นโปรแกรม
นอกจากนี้ยังสร้างอินสแตนซ์ของ GAMBannerView ได้โดยตรงด้วย
ตัวอย่างต่อไปนี้สร้าง GAMBannerView
Swift
// Initialize the banner view.
bannerView = AdManagerBannerView()
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
หากต้องการใช้ AdManagerBannerView ให้สร้าง 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.
GAMBannerView *bannerView = [[GAMBannerView 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
คุณเพิ่ม GAMBannerView ลงในไฟล์ Storyboard หรือ XIB ได้ เมื่อใช้วิธีนี้ โปรดตรวจสอบว่าได้เพิ่มข้อจำกัดด้านตำแหน่งในแบนเนอร์เท่านั้น เช่น
เมื่อแสดงแบนเนอร์แบบปรับขนาดได้ที่ด้านล่างของหน้าจอ ให้ตั้งค่าด้านล่าง
ของมุมมองแบนเนอร์ให้เท่ากับด้านบนของแนวทางการจัดวางด้านล่าง และตั้งค่า
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);
โหลดโฆษณา
เมื่อGAMBannerViewพร้อมใช้งานและมีการกําหนดค่าพร็อพเพอร์ตี้ เช่น adUnitID
แล้ว ก็ถึงเวลาโหลดโฆษณา โดยทำได้ด้วยการเรียกใช้ loadRequest:
ในออบเจ็กต์ GAMRequest
ดังนี้
Swift
func loadBannerAd(bannerView: AdManagerBannerView) {
// Request a large anchored adaptive banner with a width of 375.
bannerView.adSize = largeAnchoredAdaptiveBanner(width: 375)
bannerView.load(AdManagerRequest())
}
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:[GAMRequest request]];
GAMRequestออบเจ็กต์แสดงถึงคำขอโฆษณาเดียว และมีพร็อพเพอร์ตี้
สำหรับสิ่งต่างๆ เช่น ข้อมูลการกำหนดเป้าหมาย
รีเฟรชโฆษณา
หากกำหนดค่าหน่วยโฆษณาให้รีเฟรช คุณไม่จำเป็นต้องขอโฆษณาอื่น เมื่อโฆษณาโหลดไม่สำเร็จ Google Mobile Ads SDK จะใช้อัตราการรีเฟรชที่คุณระบุใน UI ของ Ad Manager หากยังไม่ได้เปิดใช้การรีเฟรช ให้ส่งคำขอใหม่ ดูรายละเอียดเพิ่มเติมเกี่ยวกับการรีเฟรชหน่วยโฆษณา เช่น การตั้งค่าอัตราการรีเฟรช ได้ที่ อัตราการรีเฟรชของโฆษณาในแอปบนอุปกรณ์เคลื่อนที่
จัดการการเปลี่ยนแปลงการวางแนว
เมื่อการวางแนวหน้าจอของแอปเปลี่ยนไป เช่น จากโหมด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 ใน
GAMBannerView เป็นออบเจ็กต์ที่ใช้โปรโตคอล
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:(GAMBannerView *)bannerView {
NSLog(@"bannerViewDidReceiveAd");
}
- (void)bannerView:(GAMBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
NSLog(@"bannerView:didFailToReceiveAdWithError: %@", error.localizedDescription);
}
- (void)bannerViewDidRecordImpression:(GAMBannerView *)bannerView {
NSLog(@"bannerViewDidRecordImpression");
}
- (void)bannerViewWillPresentScreen:(GAMBannerView *)bannerView {
NSLog(@"bannerViewWillPresentScreen");
}
- (void)bannerViewWillDismissScreen:(GAMBannerView *)bannerView {
NSLog(@"bannerViewWillDismissScreen");
}
- (void)bannerViewDidDismissScreen:(GAMBannerView *)bannerView {
NSLog(@"bannerViewDidDismissScreen");
}
ดูตัวอย่างผู้มอบสิทธิ์โฆษณาเพื่อดูการติดตั้งใช้งานเมธอดผู้มอบสิทธิ์แบนเนอร์ใน แอปตัวอย่าง API ของ iOS
กรณีการใช้งาน
ตัวอย่างกรณีการใช้งานสำหรับเมธอดเหตุการณ์โฆษณาเหล่านี้มีดังนี้
เพิ่มแบนเนอร์ลงในลําดับชั้นของมุมมองเมื่อได้รับโฆษณา
คุณอาจต้องการเลื่อนการเพิ่ม GAMBannerView ไปยัง
ลำดับชั้นการดูจนกว่าจะได้รับโฆษณา คุณทำได้โดยการฟังเหตุการณ์ bannerViewDidReceiveAd: ดังนี้
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
// Add banner to view and add constraints.
addBannerViewToView(bannerView)
}
Objective-C
- (void)bannerViewDidReceiveAd:(GAMBannerView *)bannerView {
// Add bannerView to view and add constraints as above.
[self addBannerViewToView:self.bannerView];
}
สร้างภาพเคลื่อนไหวโฆษณาแบนเนอร์
คุณยังใช้bannerViewDidReceiveAd: event เพื่อทําภาพเคลื่อนไหวโฆษณาแบนเนอร์ได้ 1 ครั้ง
เมื่อได้รับโฆษณาแล้ว ดังที่แสดงในตัวอย่างต่อไปนี้
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
bannerView.alpha = 0
UIView.animate(withDuration: 1, animations: {
bannerView.alpha = 1
})
}
Objective-C
- (void)bannerViewDidReceiveAd:(GAMBannerView *)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 |
การนับจำนวนการแสดงผลด้วยตนเอง
คุณสามารถส่งคำสั่ง ping การแสดงผลไปยัง Ad Manager ด้วยตนเองได้หากมีเงื่อนไขพิเศษ
สำหรับเวลาที่ควรบันทึกการแสดงผล ซึ่งทำได้โดยการ
เปิดใช้ GAMBannerView สำหรับการแสดงผลด้วยตนเองก่อนที่จะโหลดโฆษณา
Swift
bannerView.enableManualImpressions = true
Objective-C
self.bannerView.enableManualImpressions = YES;
เมื่อพิจารณาแล้วว่าโฆษณากลับมาแสดงบนหน้าจอได้สำเร็จ คุณจะบันทึกการแสดงผลด้วยตนเองได้โดยทำดังนี้
Swift
bannerView.recordImpression()
Objective-C
[self.bannerView recordImpression];
เหตุการณ์ของแอป
คุณรอเหตุการณ์ของแอปที่เฉพาะเจาะจงของ Ad Manager ได้โดยใช้ GADAppEventDelegate
เหตุการณ์เหล่านี้อาจเกิดขึ้นได้ทุกเมื่อในวงจรของโฆษณา แม้กระทั่งก่อนที่จะเรียกใช้ bannerViewDidReceiveAd: ของออบเจ็กต์
GADBannerViewDelegate
หากต้องการลงทะเบียนเหตุการณ์ในแอป ให้ตั้งค่าพร็อพเพอร์ตี้ delegate ใน GAMBannerView เป็นออบเจ็กต์ที่ใช้โปรโตคอล GADAppEventDelegate โดยทั่วไป คลาส
ที่ใช้โฆษณาแบนเนอร์จะทำหน้าที่เป็นคลาสตัวแทนด้วย ในกรณีนี้ คุณตั้งค่าพร็อพเพอร์ตี้ตัวแทนเป็น self ได้
Swift
// Set this property before making the request for an ad.
bannerView.appEventDelegate = self
Objective-C
// Set this property before making the request for an ad.
self.bannerView.appEventDelegate = self;
ตัวอย่างต่อไปนี้แสดงวิธีเปลี่ยนสีพื้นหลังของแอปโดย การระบุสีจากเหตุการณ์ในแอป
Swift
func bannerView(
_ banner: AdManagerBannerView, didReceiveAppEvent name: String, withInfo info: String?
) {
if name == "color" {
if info == "green" {
// Set background color to green.
view.backgroundColor = UIColor.green
} else if info == "blue" {
// Set background color to blue.
view.backgroundColor = UIColor.blue
} else {
// Set background color to black.
view.backgroundColor = UIColor.black
}
}
}
Objective-C
- (void)bannerView:(GAMBannerView *)banner
didReceiveAppEvent:(NSString *)name
withInfo:(NSString *)info {
if ([name isEqual:@"color"]) {
if ([info isEqual:@"green"]) {
// Set background color to green.
self.view.backgroundColor = [UIColor greenColor];
} else if ([info isEqual:@"blue"]) {
// Set background color to blue.
self.view.backgroundColor = [UIColor blueColor];
} else {
// Set background color to black.
self.view.backgroundColor = [UIColor blackColor];
}
}
}
และนี่คือครีเอทีฟโฆษณาที่เกี่ยวข้องซึ่งส่งข้อความเหตุการณ์ของแอปสีไปยัง
appEventDelegate
<html>
<head>
<script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
// Send a color=green event when ad loads.
admob.events.dispatchAppEvent("color", "green");
document.getElementById("ad").addEventListener("click", function() {
// Send a color=blue event when ad is clicked.
admob.events.dispatchAppEvent("color", "blue");
});
});
</script>
<style>
#ad {
width: 320px;
height: 50px;
top: 0px;
left: 0px;
font-size: 24pt;
font-weight: bold;
position: absolute;
background: black;
color: white;
text-align: center;
}
</style>
</head>
<body>
<div id="ad">Carpe diem!</div>
</body>
</html>
ดูตัวอย่างเหตุการณ์ของแอป Ad Manager เพื่อดูการใช้งานเหตุการณ์ของแอปใน แอปสาธิต iOS API
แหล่งข้อมูลเพิ่มเติม
ตัวอย่างใน GitHub
- ตัวอย่างโฆษณาแบนเนอร์แบบปรับขนาดได้แบบยึดพื้น Swift | SwiftUI | Objective-C
- การสาธิตฟีเจอร์ขั้นสูง Swift | Objective-C
ขั้นตอนถัดไป
แบนเนอร์แบบยุบได้
โฆษณาแบนเนอร์แบบยุบได้คือโฆษณาแบนเนอร์ที่แสดงเป็นโฆษณาซ้อนทับขนาดใหญ่กว่าในตอนแรก โดยมีปุ่มสำหรับยุบโฆษณาให้มีขนาดเล็กลง ลองใช้เพื่อเพิ่มประสิทธิภาพให้ดียิ่งขึ้น ดูรายละเอียดเพิ่มเติมได้ที่โฆษณาแบนเนอร์แบบยุบได้
แบนเนอร์แบบปรับขนาดได้ที่แทรกในบรรทัด
แบนเนอร์แบบปรับขนาดได้ที่แทรกในบรรทัดคือแบนเนอร์ที่มีขนาดใหญ่และสูงกว่าเดิมเมื่อเทียบกับแบนเนอร์แบบปรับขนาดได้ที่ตรึงไว้ แบนเนอร์ประเภทนี้มีความสูงที่ไม่ตายตัว และมีความสูงได้เท่าหน้าจออุปกรณ์ เราขอแนะนำให้ใช้แบนเนอร์แบบปรับขนาดได้ที่แทรกในบรรทัดแทนโฆษณาแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้สำหรับแอปที่วางโฆษณาแบนเนอร์ในเนื้อหาที่เลื่อนได้ ดูรายละเอียดเพิ่มเติมได้ที่แบนเนอร์ แบบปรับได้ในบรรทัด