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

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

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

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

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

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

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

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

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

สร้าง GADBannerView

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

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

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

แบบเป็นโปรแกรม

นอกจากนี้ คุณยังสร้างอินสแตนซ์ GADBannerView ได้โดยตรง ต่อไปนี้คือตัวอย่างวิธีสร้าง GADBannerView ที่จัดวางตำแหน่งไว้ตรงกลางด้านล่างของพื้นที่ปลอดภัยของหน้าจอพร้อมขนาดแบนเนอร์ 320x50

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    // In this case, we instantiate the banner with desired ad size.
    bannerView = GADBannerView(adSize: GADAdSizeBanner)

    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];
  
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GADBannerView alloc]
      initWithAdSize:GADAdSizeBanner];

  [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

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

หากไม่ต้องการใช้ขนาดมาตรฐานที่ค่าคงที่กําหนดไว้ ให้ตั้งค่าขนาดที่กําหนดเองโดยใช้ GADAdSizeFromCGSize ดูข้อมูลเพิ่มเติมได้ที่ส่วนขนาดแบนเนอร์

กำหนดค่าพร็อพเพอร์ตี้ GADBannerView

ในการโหลดและแสดงโฆษณา GADBannerView ต้องมีการตั้งค่าพร็อพเพอร์ตี้ 2-3 รายการ

  • rootViewController - ตัวควบคุมการแสดงผลนี้ใช้เพื่อแสดงโฆษณาซ้อนทับเมื่อมีการคลิกโฆษณา โดยปกติแล้ว ควรตั้งค่าเป็นตัวควบคุมมุมมองที่มี GADBannerView
  • adUnitID - นี่คือรหัสหน่วยโฆษณาที่ GADBannerView ควรโหลดโฆษณา

ต่อไปนี้คือตัวอย่างโค้ดที่แสดงวิธีตั้งค่าพร็อพเพอร์ตี้ที่จำเป็น 2 รายการในเมธอด viewDidLoad ของ UIViewController

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
  bannerView.rootViewController = self
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
}

โหลดโฆษณา

เมื่อพร้อมใช้งาน GADBannerView รวมถึงกําหนดค่าพร็อพเพอร์ตี้แล้ว ก็ถึงเวลาโหลดโฆษณา ซึ่งทำได้ด้วยการเรียกใช้ loadRequest: ในออบเจ็กต์ GADRequest:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
  bannerView.rootViewController = self
  bannerView.load(GADRequest())
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
  [self.bannerView loadRequest:[GADRequest request]];
}

GADRequest ออบเจ็กต์แสดงถึงคำขอโฆษณารายการเดียว และประกอบด้วยพร็อพเพอร์ตี้สำหรับสิ่งต่างๆ เช่น ข้อมูลการกำหนดเป้าหมาย

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

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

ด้วยการใช้ 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

ตารางด้านล่างแสดงขนาดแบนเนอร์มาตรฐาน

ขนาดเป็นจุด (กว้างxสูง) คำอธิบาย ความพร้อมใช้งาน ค่าคงที่ AdSize
320x50 แบนเนอร์ โทรศัพท์และแท็บเล็ต GADAdSizeBanner
320x100 แบนเนอร์ขนาดใหญ่ โทรศัพท์และแท็บเล็ต GADAdSizeLargeBanner
300x250 สี่เหลี่ยมผืนผ้ากลาง IAB โทรศัพท์และแท็บเล็ต GADAdSizeMediumRectangle
468x60 แบนเนอร์ขนาดเต็ม IAB แท็บเล็ต GADAdSizeFullBanner
728x90 ลีดเดอร์บอร์ด IAB แท็บเล็ต GADAdSizeLeaderboard
ความกว้างที่ระบุ x ความสูงที่ปรับได้ แบนเนอร์แบบปรับขนาดได้ โทรศัพท์และแท็บเล็ต ไม่มีข้อมูล

ขนาดโฆษณาที่กำหนดเอง

หากต้องการกำหนดขนาดแบนเนอร์ที่กำหนดเอง ให้ตั้งค่าขนาดที่ต้องการโดยใช้ GADAdSizeFromCGSize ดังที่แสดงที่นี่

Swift

let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))

Objective-C

GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));

แหล่งข้อมูลเพิ่มเติม

ตัวอย่างใน GitHub

  • ตัวอย่างโฆษณาแบนเนอร์: Swift | Objective-C

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

  • ตัวอย่างแบนเนอร์ UITableView ใน GitHub: Swift | Objective-C

บทแนะนำแบบวิดีโอเกี่ยวกับ Mobile Ads Garage

เรื่องราวความสำเร็จ

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับความเป็นส่วนตัวของผู้ใช้