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

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

คู่มือนี้แสดงวิธีเริ่มต้นใช้งาน โฆษณาแบนเนอร์แบบปรับขนาดได้ของโฆษณา 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

Swift Objective-C

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

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

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

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

แบนเนอร์แบบปรับขนาดได้แบบแทรกในบรรทัด

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

ดูหัวข้ออื่นๆ