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

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

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

แบนเนอร์แบบปรับขนาดที่ตรึงไว้

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

ข้อกำหนดเบื้องต้น

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

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

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

วิธีที่ง่ายที่สุดในการโหลดโฆษณาทดสอบคือการใช้รหัสหน่วยโฆษณาทดสอบสําหรับแบนเนอร์ 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)
    // This example doesn't give width or height constraints, as the provided
    // ad size gives the banner an intrinsic content size to size the view.
    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)
      ])
  }
}

SwiftUI

หากต้องการใช้ GADBannerView ให้สร้าง UIViewRepresentable โดยทำดังนี้

private struct BannerView: UIViewRepresentable {
  let adSize: GADAdSize

  init(_ adSize: GADAdSize) {
    self.adSize = adSize
  }

  func makeUIView(context: Context) -> UIView {
    // Wrap the GADBannerView in a UIView. GADBannerView automatically reloads a new ad when its
    // frame size changes; wrapping in a UIView container insulates the GADBannerView from size
    // changes that impact the view returned from makeUIView.
    let view = UIView()
    view.addSubview(context.coordinator.bannerView)
    return view
  }

  func updateUIView(_ uiView: UIView, context: Context) {
    context.coordinator.bannerView.adSize = adSize
  }

  func makeCoordinator() -> BannerCoordinator {
    return BannerCoordinator(self)
  }
BannerContentView.swift

หากต้องการจัดการการเริ่มต้นและลักษณะการทำงานของ GADBannerView ให้สร้าง Coordinator:

class BannerCoordinator: NSObject, GADBannerViewDelegate {

  private(set) lazy var bannerView: GADBannerView = {
    let banner = GADBannerView(adSize: parent.adSize)
    banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
    banner.load(GADRequest())
    banner.delegate = self
    return banner
  }()

  let parent: BannerView

  init(_ parent: BannerView) {
    self.parent = parent
  }
BannerContentView.swift

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

var body: some View {
  GeometryReader { geometry in
    let adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(geometry.size.width)

    VStack {
      Spacer()
      BannerView(adSize)
        .frame(height: adSize.size.height)
    }
  }
BannerContentView.swift

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];
  // This example doesn't give width or height constraints, as the provided
  // ad size gives the banner an intrinsic content size to size the view.
  [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 ได้ เมื่อใช้สิ่งนี้ ให้เพิ่มข้อจำกัดตำแหน่งบนแบนเนอร์เท่านั้น ตัวอย่างเช่น เมื่อแสดงแบนเนอร์ที่ปรับขนาดได้บริเวณด้านล่างของหน้าจอ ให้ตั้งค่าด้านล่างของมุมมองแบนเนอร์เท่ากับด้านบนของคู่มือเลย์เอาต์ด้านล่าง และตั้งค่าข้อจำกัด centerX เท่ากับ centerX ของมุมมองที่เหนือกว่า

ระบบจะยังคงกำหนดขนาดโฆษณาของแบนเนอร์แบบเป็นโปรแกรม ดังนี้

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())
}

SwiftUI

banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(GADRequest())
BannerContentView.swift

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 หากยังไม่ได้เปิดใช้การรีเฟรช คุณจะต้องส่งคำขอใหม่

เคล็ดลับ: คุณสามารถใช้การเรียกจำนวนโฆษณาเพื่อสร้างแคชของโฆษณาที่โหลดล่วงหน้าก่อนที่จะ ที่ตั้งใจจะแสดงโฆษณาเหล่านั้น เพื่อที่จะแสดงโฆษณาโดยที่ไม่ต้องรอเวลาในการตอบสนองเมื่อจำเป็น เนื่องจากโฆษณาจะหมดอายุหลังจากผ่านไป 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
  }
}

SwiftUI

banner.delegate = self
BannerContentView.swift

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.
  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 | SwiftUI | Objective-C

• การสาธิตฟีเจอร์ขั้นสูง: Swift | Objective-C

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

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

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

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

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

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

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