โฆษณาแบนเนอร์คือโฆษณารูปสี่เหลี่ยมผืนผ้าที่ยึดพื้นที่ส่วนใดส่วนหนึ่งของเลย์เอาต์ของแอป ในระหว่างที่ผู้ใช้กําลังโต้ตอบกับแอป โฆษณาเหล่านี้จะอยู่บนหน้าจอ ซึ่งอาจตรึงอยู่ที่ด้านบนหรือด้านล่างของหน้าจอ หรือแทรกอยู่ในเนื้อหาขณะที่ผู้ใช้เลื่อนดู โฆษณาแบนเนอร์จะรีเฟรชโดยอัตโนมัติหลังจากเวลาผ่านไปช่วงหนึ่ง ดูข้อมูลเพิ่มเติมได้ที่ภาพรวมของโฆษณาแบนเนอร์
คู่มือนี้จะแสดงวิธีเริ่มต้นใช้งานโฆษณาแบนเนอร์แบบปรับขนาดได้ ที่ยึดตำแหน่ง ซึ่งจะเพิ่มประสิทธิภาพสูงสุดโดยการเพิ่มประสิทธิภาพขนาดโฆษณาสำหรับอุปกรณ์แต่ละเครื่องโดยใช้ ความกว้างของโฆษณาที่คุณระบุ
แบนเนอร์แบบปรับขนาดได้แบบยึดพื้น
โฆษณาแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งเป็นโฆษณาที่มีสัดส่วนภาพคงที่ ไม่ใช่โฆษณาขนาดคงที่ปกติ สัดส่วนภาพคล้ายกับมาตรฐานอุตสาหกรรม 320x50 เมื่อ คุณระบุความกว้างเต็มที่ใช้ได้ ระบบจะแสดงโฆษณาที่มีความสูงที่เหมาะสมที่สุดสำหรับ ความกว้างนั้น ความสูงที่เหมาะสมจะไม่เปลี่ยนแปลงในคำขอจากอุปกรณ์เดียวกัน และมุมมองโดยรอบไม่จำเป็นต้องเลื่อนเมื่อโฆษณารีเฟรช
ข้อกำหนดเบื้องต้น
- ทำตามคู่มือเริ่มต้นใช้งาน
ทดสอบด้วยโฆษณาทดสอบเสมอ
เมื่อสร้างและทดสอบแอป โปรดใช้โฆษณาทดสอบแทน โฆษณาจริงที่ใช้งานจริง หากไม่ดำเนินการดังกล่าวอาจส่งผลให้บัญชีถูกระงับ
วิธีที่ง่ายที่สุดในการโหลดโฆษณาทดสอบคือการใช้รหัสหน่วยโฆษณาทดสอบเฉพาะสำหรับแบนเนอร์ iOS
/21775744923/example/adaptive-banner
ซึ่งได้รับการกำหนดค่าเป็นพิเศษให้แสดงโฆษณาทดสอบสำหรับทุกคำขอ และคุณสามารถ ใช้ในแอปของคุณเองได้อย่างอิสระขณะเขียนโค้ด ทดสอบ และแก้ไขข้อบกพร่อง เพียงตรวจสอบว่าคุณได้แทนที่ด้วยรหัสหน่วยโฆษณาของคุณเองก่อนที่จะเผยแพร่แอป
ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของโฆษณาทดสอบของ Mobile Ads SDK ได้ที่โฆษณาทดสอบ
สร้าง GAMBannerView
โฆษณาแบนเนอร์จะแสดงในออบเจ็กต์ GAMBannerView
ดังนั้นขั้นตอนแรกในการผสานรวมโฆษณาแบนเนอร์คือการรวม GAMBannerView
ไว้ในลำดับชั้นของมุมมอง โดยปกติแล้วจะดำเนินการผ่านโปรแกรมหรือ
ผ่าน Interface Builder
แบบเป็นโปรแกรม
นอกจากนี้ยังสร้างอินสแตนซ์ของ GAMBannerView
ได้โดยตรงด้วย
ตัวอย่างต่อไปนี้สร้าง GAMBannerView
Swift
// Initialize the BannerView.
bannerView = BannerView()
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 = currentOrientationAnchoredAdaptiveBanner(width: 375)
BannerViewContainer(adSize)
.frame(width: adSize.size.width, height: adSize.size.height)
}
Objective-C
// Initialize the GADBannerView.
self.bannerView = [[GADBannerView alloc] init];
self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.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
[self.bannerView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor],
// Center the banner horizontally in the view
[self.bannerView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
]];
Interface Builder
คุณเพิ่ม GAMBannerView
ลงในไฟล์ Storyboard หรือ XIB ได้ เมื่อใช้วิธีนี้ โปรดตรวจสอบว่าได้เพิ่มข้อจำกัดด้านตำแหน่งในแบนเนอร์เท่านั้น เช่น
เมื่อแสดงแบนเนอร์แบบปรับขนาดได้ที่ด้านล่างของหน้าจอ ให้ตั้งค่าด้านล่าง
ของมุมมองแบนเนอร์ให้เท่ากับด้านบนของแนวทางการจัดวางด้านล่าง และตั้งค่า
centerX
ข้อจำกัดให้เท่ากับcenterX
ของ Superview
กำหนดขนาดโฆษณา
ตั้งค่าโครงสร้าง GADSize
เป็นประเภทแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้โดยมีความกว้างที่ระบุ
Swift
// Request an anchored adaptive banner with a width of 375.
bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
Objective-C
// Request an anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(375);
โหลดโฆษณา
เมื่อGAMBannerView
พร้อมใช้งานและมีการกำหนดค่าพร็อพเพอร์ตี้ เช่น adUnitID
แล้ว ก็ถึงเวลาโหลดโฆษณา โดยทำได้ด้วยการเรียกใช้ loadRequest:
ในออบเจ็กต์ GAMRequest
Swift
bannerView.load(AdManagerRequest())
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
Objective-C
[self.bannerView loadRequest:[GAMRequest request]];
GAMRequest
ออบเจ็กต์แสดงถึงคำขอโฆษณาเดียว และมีพร็อพเพอร์ตี้
สำหรับสิ่งต่างๆ เช่น ข้อมูลการกำหนดเป้าหมาย
รีเฟรชโฆษณา
หากกำหนดค่าหน่วยโฆษณาให้รีเฟรช คุณไม่จำเป็นต้องขอโฆษณาอื่น เมื่อโฆษณาโหลดไม่สำเร็จ Google Mobile Ads SDK จะใช้อัตราการรีเฟรชที่คุณระบุใน UI ของ Ad Manager หากยังไม่ได้เปิดใช้การรีเฟรช ให้ส่งคำขอใหม่ ดูรายละเอียดเพิ่มเติมเกี่ยวกับการรีเฟรชหน่วยโฆษณา เช่น การตั้งค่าอัตราการรีเฟรช ได้ที่ อัตราการรีเฟรชของโฆษณาในแอปบนอุปกรณ์เคลื่อนที่
เหตุการณ์โฆษณา
การใช้ GADBannerViewDelegate
ช่วยให้คุณฟังเหตุการณ์วงจรได้
เช่น เมื่อปิดโฆษณาหรือผู้ใช้ออกจากแอป
ลงทะเบียนสำหรับเหตุการณ์แบนเนอร์
หากต้องการลงทะเบียนสำหรับเหตุการณ์โฆษณาแบนเนอร์ ให้ตั้งค่าพร็อพเพอร์ตี้ delegate
ใน
GAMBannerView
เป็นออบเจ็กต์ที่ใช้โปรโตคอล
GADBannerViewDelegate
โดยทั่วไปแล้ว คลาสที่ใช้โฆษณาแบนเนอร์
ยังทำหน้าที่เป็นคลาสตัวแทนด้วย ในกรณีนี้ คุณจะตั้งค่าพร็อพเพอร์ตี้ delegate
เป็น self
ได้
Swift
bannerView.delegate = self
SwiftUI
banner.delegate = context.coordinator
Objective-C
self.bannerView.delegate = self;
ติดตั้งใช้งานเหตุการณ์แบนเนอร์
แต่ละเมธอดใน GADBannerViewDelegate
จะมีการทำเครื่องหมายเป็นไม่บังคับ คุณจึงต้องใช้เฉพาะเมธอดที่ต้องการเท่านั้น ตัวอย่างนี้จะใช้แต่ละเมธอด
และบันทึกข้อความไปยังคอนโซล
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
print(#function)
}
func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
print(#function + ": " + error.localizedDescription)
}
func bannerViewDidRecordClick(_ bannerView: BannerView) {
print(#function)
}
func bannerViewDidRecordImpression(_ bannerView: BannerView) {
print(#function)
}
func bannerViewWillPresentScreen(_ bannerView: BannerView) {
print(#function)
}
func bannerViewWillDismissScreen(_ bannerView: BannerView) {
print(#function)
}
func bannerViewDidDismissScreen(_ bannerView: BannerView) {
print(#function)
}
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 เพื่อดูการใช้งานเมธอด Banner Delegate ใน แอป iOS API Demo
กรณีการใช้งาน
ตัวอย่างกรณีการใช้งานสำหรับเมธอดเหตุการณ์โฆษณาเหล่านี้มีดังนี้
เพิ่มแบนเนอร์ลงในลําดับชั้นของมุมมองเมื่อได้รับโฆษณา
คุณอาจต้องการเลื่อนการเพิ่ม 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
Swift
// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.
// Called when the banner receives an app event.
optional public func bannerView(_ banner: AdManagerBannerView,
didReceiveAppEvent name: String, withInfo info: String?)
Objective-C
// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.
@optional
// Called when the banner receives an app event.
- (void)bannerView:(GAMBannerView *)banner
didReceiveAppEvent:(NSString *)name
withInfo:(NSString *)info;
คุณสามารถใช้เมธอดเหตุการณ์ของแอปในตัวควบคุมมุมมองได้ดังนี้
Swift
import GoogleMobileAds
class ViewController: UIViewController, AppEventDelegate {}
Objective-C
@import GoogleMobileAds;
@interface ViewController : UIViewController <GADAppEventDelegate> {}
@end
อย่าลืมตั้งค่าผู้รับมอบสิทธิ์โดยใช้พร็อพเพอร์ตี้ appEventDelegate
ก่อนส่งคำขอโฆษณา
Swift
bannerView.appEventDelegate = self
Objective-C
self.bannerView.appEventDelegate = self;
ตัวอย่างต่อไปนี้แสดงวิธีเปลี่ยนสีพื้นหลังของแอปโดย การระบุสีผ่านเหตุการณ์ในแอป
Swift
func bannerView(_ banner: AdManagerBannerView, didReceiveAppEvent name: String,
withInfo info: String?) {
if name == "color" {
guard let info = info else { return }
switch info {
case "green":
// Set background color to green.
view.backgroundColor = UIColor.green
case "blue":
// Set background color to blue.
view.backgroundColor = UIColor.blue
default:
// 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
ขั้นตอนถัดไป
แบนเนอร์แบบยุบได้
โฆษณาแบนเนอร์แบบยุบได้คือโฆษณาแบนเนอร์ที่แสดงเป็นโฆษณาซ้อนทับขนาดใหญ่กว่าในตอนแรก โดยมีปุ่มสำหรับยุบโฆษณาให้มีขนาดเล็กลง ลองใช้เพื่อเพิ่มประสิทธิภาพให้ดียิ่งขึ้น ดูรายละเอียดเพิ่มเติมได้ที่โฆษณาแบนเนอร์แบบยุบได้
แบนเนอร์แบบปรับขนาดได้ที่แทรกในบรรทัด
แบนเนอร์แบบปรับขนาดได้ที่แทรกในบรรทัดคือแบนเนอร์ที่มีขนาดใหญ่และสูงกว่าเดิมเมื่อเทียบกับแบนเนอร์แบบปรับขนาดได้แบบโฆษณา Anchor แบนเนอร์ประเภทนี้มีความสูงที่ไม่ตายตัว และมีความสูงได้เท่าหน้าจออุปกรณ์ เราขอแนะนำให้ใช้แบนเนอร์แบบปรับขนาดได้ที่แทรกในบรรทัดแทนโฆษณาแบนเนอร์แบบปรับขนาดได้ที่ยึดตำแหน่งไว้สำหรับ แอปที่วางโฆษณาแบนเนอร์ในเนื้อหาที่เลื่อนได้ ดูรายละเอียดเพิ่มเติมได้ที่แบนเนอร์ แบบปรับได้ในบรรทัด