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

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

คู่มือนี้แสดงวิธีผสานรวมโฆษณาแบนเนอร์จาก 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 ต้องมีการตั้งค่าพร็อพเพอร์ตี้บางอย่างจึงจะโหลดและแสดงโฆษณาได้

  • 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 ออบเจ็กต์แสดงคําขอโฆษณา 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");
}

ดูตัวอย่าง Ad Delegate สําหรับการติดตั้งใช้งานวิธีมอบสิทธิ์แบนเนอร์ในแอปเดโม iOS API

Swift วัตถุประสงค์-C

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&#39
bannerViewWillDismissScreen: viewWillAppear:ของ UIViewController&#39
bannerViewDidDismissScreen: viewDidAppear:ของ UIViewController&#39

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

ขนาดในจุด (WxH) คำอธิบาย ความพร้อมใช้งาน ค่าคงที่ของ 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

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

วิดีโอแนะนําเกี่ยวกับวิดีโอ Garage Mobile

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

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

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