โฆษณาแบนเนอร์คือโฆษณารูปสี่เหลี่ยมผืนผ้าที่ยึดพื้นที่ส่วนใดส่วนหนึ่งของเลย์เอาต์ของแอป โฆษณาเหล่านี้ ปรากฏบนหน้าจอในขณะที่ผู้ใช้โต้ตอบกับแอป ซึ่งอาจตรึงอยู่ที่ ด้านบนหรือด้านล่างของหน้าจอ หรือแทรกอยู่ในเนื้อหาขณะที่ผู้ใช้เลื่อนดู แบนเนอร์ โฆษณาจะรีเฟรชโดยอัตโนมัติหลังจากเวลาผ่านไปช่วงหนึ่ง ดูภาพรวมของโฆษณาแบนเนอร์ เพื่อดูข้อมูลเพิ่มเติม
คู่มือนี้จะแสดงวิธีเริ่มต้นใช้งานแบนเนอร์ยึดตำแหน่งที่ปรับเปลี่ยนได้ โฆษณา ซึ่งเพิ่มประสิทธิภาพสูงสุด โดยขนาดโฆษณาสำหรับอุปกรณ์แต่ละประเภท ความกว้างของโฆษณาที่คุณระบุ
แบนเนอร์แบบปรับขนาดได้แบบ Anchor
โฆษณาแบนเนอร์แบบปรับขนาดได้โฆษณา Anchor เป็นโฆษณาที่มีอัตราส่วนคงที่ ไม่ใช่โฆษณาปกติ โฆษณาที่มีขนาดคงที่ สัดส่วนภาพใกล้เคียงกับมาตรฐานอุตสาหกรรม 320*50 ครั้งเดียว ที่คุณระบุความกว้างทั้งหมดที่พร้อมใช้งาน ระบบจะแสดงโฆษณาที่มีขนาดเหมาะสม ตามความกว้างนั้น ความสูงที่เหมาะสมจะไม่เปลี่ยนแปลงในคำขอจาก อุปกรณ์เดียวกัน และมุมมองโดยรอบจะไม่จำเป็นต้องขยับเมื่อโฆษณา ใหม่
ข้อกำหนดเบื้องต้น
- ทำตามคู่มือเริ่มต้นใช้งานจนจบ
ทดสอบด้วยโฆษณาทดสอบเสมอ
เมื่อสร้างและทดสอบแอป โปรดตรวจสอบว่าคุณใช้โฆษณาทดสอบแทน โฆษณาที่ใช้งานจริง หากไม่ดำเนินการ บัญชีจะถูกระงับ
วิธีที่ง่ายที่สุดในการโหลดโฆษณาทดสอบคือการใช้รหัสหน่วยโฆษณาทดสอบสำหรับ iOS โดยเฉพาะ แบนเนอร์:
ca-app-pub-3940256099942544/2435281174
โดยได้รับการกำหนดค่าเป็นพิเศษให้ส่งคืนโฆษณาทดสอบสำหรับทุกคำขอ โดยคุณจะ นำไปใช้ในแอปของคุณเองขณะเขียนโค้ด ทดสอบ และแก้ไขข้อบกพร่องได้ฟรี ทำ อย่าลืมแทนที่ด้วยรหัสหน่วยโฆษณาของคุณเองก่อนที่จะเผยแพร่แอป
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของโฆษณาทดสอบ SDK โฆษณาบนอุปกรณ์เคลื่อนที่ โปรดดูการทดสอบ โฆษณา
สร้าง GADโฆษณาแบนเนอร์View
โฆษณาแบนเนอร์จะแสดงใน 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) 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) ]) } }
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]; [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
โปรดทราบว่าในกรณีนี้เราไม่ได้จำกัดความกว้างหรือความสูง เนื่องจาก ขนาดโฆษณาที่ระบุจะทำให้แบนเนอร์มีขนาดเนื้อหาที่แท้จริง
เครื่องมือสร้างอินเทอร์เฟซ
สามารถเพิ่ม GADBannerView
ลงในสตอรีบอร์ดหรือ xib ได้
เมื่อใช้วิธีนี้ โปรดเพิ่มข้อจำกัดตำแหน่งเฉพาะ
แบนเนอร์ ตัวอย่างเช่น เมื่อแสดงแบนเนอร์แบบปรับขนาดได้ที่ด้านล่างของ
กำหนดหน้าจอด้านล่างของมุมมองแบนเนอร์ให้เท่ากับด้านล่างสุด
คู่มือการออกแบบ แล้วตั้งค่ากึ่งกลาง X ให้เท่ากับกึ่งกลาง X ของมุมมองพิเศษ
ขนาดโฆษณาของแบนเนอร์จะยังคงตั้งค่าแบบเป็นโปรแกรมอยู่
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()) }
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 แสดงคำขอโฆษณาเดียว และ มีพร็อพเพอร์ตี้สำหรับสิ่งต่างๆ เช่น ข้อมูลการกำหนดเป้าหมาย
หากโฆษณาของคุณไม่สามารถโหลดได้ คุณไม่จำเป็นต้องส่งคำขอโฆษณาอื่นอย่างชัดแจ้ง ตราบใดที่คุณกำหนดค่าให้หน่วยโฆษณารีเฟรช SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google จะเป็นไปตามอัตราการรีเฟรชที่คุณระบุใน AdMob UI หากยังไม่ได้เปิดใช้การรีเฟรช คุณจะต้องส่งคำขอใหม่
เหตุการณ์โฆษณา
เมื่อใช้ 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 } }
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 as above. 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
วิธี:
เมธอด GADโฆษณาแบนเนอร์ViewDelegate | วิธี iOS |
---|---|
bannerViewWillPresentScreen: |
viewWillDisappear: ของ UIViewController |
bannerViewWillDismissScreen: |
viewWillAppear: ของ UIViewController |
bannerViewDidDismissScreen: |
viewDidAppear: ของ UIViewController |
แหล่งข้อมูลเพิ่มเติม
ตัวอย่างใน GitHub
- ตัวอย่างโฆษณาแบนเนอร์แบบปรับขนาดได้แบบโฆษณา Anchor Swift | Objective-C
- การสาธิตฟีเจอร์ขั้นสูง: Swift | Objective-C
ขั้นตอนถัดไป
แบนเนอร์แบบย่อได้
โฆษณาแบนเนอร์แบบย่อได้ คือโฆษณาแบนเนอร์ที่มีการนำเสนอเป็นแบนเนอร์ขนาดใหญ่ ซ้อนทับ โดยมีปุ่มเพื่อยุบโฆษณาให้เล็กลง ลองใช้ เพื่อเพิ่มประสิทธิภาพให้ดียิ่งขึ้นไปอีก ดูรายละเอียดเพิ่มเติมได้ที่โฆษณาแบนเนอร์แบบย่อได้
แบนเนอร์แทรกในบรรทัดที่ปรับเปลี่ยนได้
แบนเนอร์แทรกในบรรทัดที่ปรับเปลี่ยนได้คือแบนเนอร์ที่มีขนาดใหญ่และสูงกว่าเมื่อเทียบกับแบนเนอร์ยึดตำแหน่งที่ปรับเปลี่ยนได้ แบนเนอร์ มีความสูงที่ไม่คงที่และสูงเท่ากับหน้าจอของอุปกรณ์ได้ ขอแนะนำให้ใช้แบนเนอร์แทรกในบรรทัดที่ปรับเปลี่ยนได้แทนโฆษณาแบนเนอร์แบบปรับขนาดได้ที่อยู่ด้านล่างสุดสำหรับ แอปที่วางโฆษณาแบนเนอร์ในเนื้อหาที่เลื่อนได้ ดูการปรับเปลี่ยนในบรรทัด แบนเนอร์ รายละเอียด