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