โฆษณาแบนเนอร์

โฆษณาแบนเนอร์คือโฆษณารูปสี่เหลี่ยมผืนผ้าที่ยึดพื้นที่ส่วนใดส่วนหนึ่งของเลย์เอาต์ของแอป โฆษณาเหล่านี้จะอยู่บนหน้าจอขณะที่ผู้ใช้โต้ตอบกับแอป ซึ่งอาจตรึงอยู่ที่ด้านบนหรือด้านล่างของหน้าจอ หรือแทรกอยู่ในเนื้อหาในขณะที่ผู้ใช้เลื่อนดู โฆษณาแบนเนอร์สามารถรีเฟรชโดยอัตโนมัติหลังจากเวลาผ่านไปช่วงหนึ่ง ดูภาพรวมของโฆษณาแบนเนอร์สำหรับข้อมูลเพิ่มเติม

คู่มือนี้แสดงวิธีเริ่มต้นใช้งานโฆษณาแบนเนอร์แบบปรับขนาดได้แบบโฆษณา Anchor ซึ่งจะเพิ่มประสิทธิภาพให้ได้สูงสุดด้วยการเพิ่มประสิทธิภาพขนาดโฆษณาสำหรับอุปกรณ์แต่ละเครื่องโดยใช้ความกว้างของโฆษณาที่คุณระบุ

แบนเนอร์แบบปรับขนาดได้แบบ Anchor

โฆษณาแบนเนอร์แบบปรับขนาดได้แบบโฆษณา Anchor คือโฆษณาที่มีสัดส่วนภาพคงที่ ไม่ใช่โฆษณาที่มีขนาดคงที่ปกติ สัดส่วนภาพใกล้เคียงกับมาตรฐานอุตสาหกรรม 320*50 เมื่อคุณระบุความกว้างเต็มที่ใช้ได้แล้ว ระบบจะแสดงโฆษณาที่มีความสูงที่เหมาะสมที่สุดสำหรับความกว้างนั้น ความสูงที่เหมาะสมจะไม่เปลี่ยนแปลงในคำขอจากอุปกรณ์เดียวกัน และไม่จำเป็นต้องขยับเมื่อรีเฟรชโฆษณา

สิ่งที่ต้องดำเนินการก่อน

• ทำตามคู่มือเริ่มต้นใช้งานจนจบ

ทดสอบด้วยโฆษณาทดสอบเสมอ

เมื่อสร้างและทดสอบแอป โปรดตรวจสอบว่าคุณใช้โฆษณาทดสอบแทนที่จะใช้โฆษณาจริงในเวอร์ชันที่ใช้งานจริง หากไม่ดำเนินการ บัญชีจะถูกระงับ

วิธีที่ง่ายที่สุดในการโหลดโฆษณาทดสอบคือการใช้รหัสหน่วยโฆษณาทดสอบโดยเฉพาะสำหรับแบนเนอร์ iOS ดังนี้ ca-app-pub-3940256099942544/2435281174

โดยกำหนดค่ามาเป็นพิเศษให้ส่งคืนโฆษณาทดสอบสำหรับคำขอทุกรายการ และคุณสามารถใช้งานในแอปของคุณเองขณะเขียนโค้ด ทดสอบ และแก้ไขข้อบกพร่องได้ฟรี เพียงตรวจสอบให้แน่ใจว่าคุณแทนที่ด้วยรหัสหน่วยโฆษณาของคุณเองก่อนที่จะเผยแพร่แอป

สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีการทำงานของโฆษณาทดสอบของ SDK โฆษณาบนอุปกรณ์เคลื่อนที่ โปรดดูโฆษณาทดสอบ

สร้าง GADโฆษณาแบนเนอร์View

โฆษณาแบนเนอร์จะแสดงในออบเจ็กต์ 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

โปรดทราบว่าในกรณีนี้เราไม่ได้จำกัดความกว้างหรือความสูง เนื่องจากขนาดโฆษณาที่ระบุจะให้ขนาดเนื้อหาที่แท้จริงของแบนเนอร์เพื่อกำหนดขนาดของมุมมอง

เครื่องมือสร้างอินเทอร์เฟซ

เคล็ดลับ: หากต้องการใช้โฆษณาแบนเนอร์ด้วย SwiftUI โปรดดูโฆษณาแบนเนอร์

คุณเพิ่ม 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 แสดงคำขอโฆษณาเดียว และมีพร็อพเพอร์ตี้สำหรับสิ่งต่างๆ เช่น ข้อมูลการกำหนดเป้าหมาย

หากโฆษณาของคุณโหลดไม่สำเร็จ คุณไม่จำเป็นต้องส่งคำขออีกรายการอย่างชัดแจ้งตราบใดที่ได้กำหนดค่าหน่วยโฆษณาให้รีเฟรชแล้ว Google Mobile Ads SDK ยึดตามอัตราการรีเฟรชที่คุณระบุไว้ใน UI ของ AdMob หากยังไม่ได้เปิดใช้การรีเฟรช คุณจะต้องส่งคำขอใหม่

เคล็ดลับ: คุณสามารถใช้การเรียกจำนวนโฆษณาเพื่อสร้างแคชของโฆษณาที่โหลดไว้ล่วงหน้าก่อนที่จะต้องการแสดง เพื่อให้โฆษณาได้แสดงโดยไม่ต้องมีเวลาในการตอบสนองเป็นศูนย์เมื่อจำเป็น คุณควรล้างแคชและโหลดซ้ำพร้อมโฆษณาใหม่ทุกชั่วโมง เนื่องจากโฆษณาจะหมดอายุใน 1 ชั่วโมง

เหตุการณ์โฆษณา

เมื่อใช้ 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

Swift Objective-C

กรณีการใช้งาน

ต่อไปนี้เป็นตัวอย่างกรณีการใช้งานสำหรับวิธีเหตุการณ์โฆษณาเหล่านี้

การเพิ่มแบนเนอร์ในลำดับชั้นการดูเมื่อได้รับโฆษณา

คุณอาจต้องเลื่อนการเพิ่ม 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

ขั้นตอนถัดไป

แบนเนอร์แบบย่อได้

โฆษณาแบนเนอร์แบบย่อได้คือโฆษณาแบนเนอร์ที่แสดงก่อนเป็นภาพวางซ้อนขนาดใหญ่ พร้อมปุ่มเพื่อยุบโฆษณาให้มีขนาดเล็กลง ลองใช้รายงานนี้เพื่อเพิ่มประสิทธิภาพ ให้ดียิ่งขึ้นไปอีก ดูรายละเอียดเพิ่มเติมได้ที่โฆษณาแบนเนอร์แบบย่อได้

แบนเนอร์แทรกในบรรทัดที่ปรับเปลี่ยนได้

แบนเนอร์แทรกในบรรทัดที่ปรับเปลี่ยนได้คือแบนเนอร์ที่มีขนาดใหญ่และสูงกว่าเมื่อเทียบกับแบนเนอร์แบบปรับขนาดได้แบบยึดตำแหน่ง มีความสูงที่ไม่คงที่และสูงเท่ากับหน้าจอของอุปกรณ์ได้ ขอแนะนำให้ใช้แบนเนอร์แทรกในบรรทัดที่ปรับเปลี่ยนได้แทนโฆษณาแบนเนอร์แบบปรับขนาดได้แบบโฆษณา Anchor สำหรับแอปที่วางโฆษณาแบนเนอร์ไว้ในเนื้อหาที่เลื่อนได้ ดูรายละเอียดเพิ่มเติมได้ที่แบนเนอร์แบบปรับขนาดได้แบบแทรกในบรรทัด

สำรวจหัวข้ออื่นๆ

• ความเป็นส่วนตัวของผู้ใช้