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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

นอกจากนี้ GADBannerView ยังสร้างอินสแตนซ์ได้โดยตรง ตัวอย่างวิธีสร้าง GADBannerView มีดังนี้ อยู่ในแนวกึ่งกลางด้านล่างของพื้นที่ปลอดภัยของหน้าจอ

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

@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 ของมุมมองพิเศษ

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

  bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)

  self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);

โหลดโฆษณา

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

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

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

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

เมื่อใช้ GADBannerViewDelegate คุณจะสามารถฟังเหตุการณ์ในวงจรได้ เช่น เมื่อปิดโฆษณา หรือเมื่อผู้ใช้ออกจากแอป

การลงทะเบียนเข้าร่วมกิจกรรมแบนเนอร์

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

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    ...
    bannerView.delegate = self
  }
}

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GADBannerView *bannerView;

@end

@implementation ViewController

-   (void)viewDidLoad {
  [super viewDidLoad];
  ...
  self.bannerView.delegate = self;
}

การติดตั้งใช้งานเหตุการณ์แบนเนอร์

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

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

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

รวดเร็ว Objective-C

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

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

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

คุณอาจต้องเลื่อนการเพิ่ม GADBannerView ไปยัง ลำดับชั้นการดูจนกระทั่งหลังจากได้รับโฆษณา คุณสามารถทำได้ด้วยการฟัง สำหรับกิจกรรม bannerViewDidReceiveAd:

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  // Add banner to view and add constraints as above.
  addBannerViewToView(bannerView)
}

-   (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  // Add bannerView to view and add constraints as above.
  [self addBannerViewToView:self.bannerView];
}

การทำให้โฆษณาแบนเนอร์เคลื่อนไหว

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

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  bannerView.alpha = 0
  UIView.animate(withDuration: 1, animations: {
    bannerView.alpha = 1
  })
}

-   (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  bannerView.alpha = 0;
  [UIView animateWithDuration:1.0 animations:^{
    bannerView.alpha = 1;
  }];
}

การหยุดแอปชั่วคราวและเล่นต่อ

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

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

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

ตัวอย่างใน GitHub

• ตัวอย่างโฆษณาแบนเนอร์แบบปรับขนาดได้แบบโฆษณา Anchor Swift | Objective-C

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

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

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

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

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

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

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

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