การแสดงผลโฆษณาใน iPhone X

คู่มือนี้จะสาธิตแนวทางปฏิบัติแนะนำเกี่ยวกับวิธีเขียนโค้ดของแอปเพื่อแสดงโฆษณาอย่างถูกต้องใน iPhone X

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

• นำเข้า SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google เวอร์ชัน 7.26.0 ขึ้นไป ด้วยตัวเองหรือเป็นส่วนหนึ่งของ Firebase

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

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

เครื่องมือสร้างสตอรีบอร์ด/อินเทอร์เฟซ

หากแอปใช้ Interface Builder ก่อนอื่นให้ตรวจสอบว่าคุณได้เปิดใช้คู่มือการออกแบบพื้นที่ปลอดภัยแล้ว ซึ่งคุณจะต้องเรียกใช้ Xcode 9 ขึ้นไปและกำหนดเป้าหมายเป็น iOS 9 ขึ้นไป

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

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

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

ในทำนองเดียวกัน คุณจัดแบนเนอร์ให้อยู่ที่ด้านล่างของพื้นที่ปลอดภัยได้โดยจำกัดพร็อพเพอร์ตี้ Bottom ของ GADBannerView ไว้ที่ด้านล่างของพื้นที่ปลอดภัย ดังนี้

ตอนนี้ข้อจํากัดของคุณควรมีลักษณะคล้ายกับภาพหน้าจอด้านล่าง (ขนาด/ตําแหน่งอาจแตกต่างกันไป)

ViewController

ต่อไปนี้คือข้อมูลโค้ดตัวควบคุมมุมมองแบบง่ายที่มีขั้นต่ำสุดที่จำเป็นต่อการแสดงแบนเนอร์ใน GADBannerView ตามที่กำหนดค่าไว้ในสตอรีบอร์ดด้านบน

Swift

class ViewController: UIViewController {

  /// The banner view.
  @IBOutlet var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    // Replace this ad unit ID with your own ad unit ID.
    bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
    bannerView.rootViewController = self
    bannerView.load(GADRequest())
  }

}

Objective-C

@interface ViewController()

@property(nonatomic, strong) IBOutlet GADBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
  GADRequest *request = [GADRequest request];
  [self.bannerView loadRequest:request];
}

การจัดแบนเนอร์ให้ชิดขอบของพื้นที่ปลอดภัย

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

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

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

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

Swift

class ViewController: UIViewController {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Instantiate the banner view with your desired banner size.
    bannerView = GADBannerView(adSize: GADAdSizeBanner)
    addBannerViewToView(bannerView)
    bannerView.rootViewController = self
    // Set the ad unit ID to your own ad unit ID here.
    bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
    bannerView.load(GADRequest())
  }

  func addBannerViewToView(_ bannerView: UIView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    if #available(iOS 11.0, *) {
      positionBannerAtBottomOfSafeArea(bannerView)
    }
    else {
      positionBannerAtBottomOfView(bannerView)
    }
  }

  @available (iOS 11, *)
  func positionBannerAtBottomOfSafeArea(_ bannerView: UIView) {
    // Position the banner. Stick it to the bottom of the Safe Area.
    // Centered horizontally.
    let guide: UILayoutGuide = view.safeAreaLayoutGuide

    NSLayoutConstraint.activate(
      [bannerView.centerXAnchor.constraint(equalTo: guide.centerXAnchor),
       bannerView.bottomAnchor.constraint(equalTo: guide.bottomAnchor)]
    )
  }

  func positionBannerAtBottomOfView(_ bannerView: UIView) {
    // Center the banner horizontally.
    view.addConstraint(NSLayoutConstraint(item: bannerView,
                                          attribute: .centerX,
                                          relatedBy: .equal,
                                          toItem: view,
                                          attribute: .centerX,
                                          multiplier: 1,
                                          constant: 0))
    // Lock the banner to the top of the bottom layout guide.
    view.addConstraint(NSLayoutConstraint(item: bannerView,
                                          attribute: .bottom,
                                          relatedBy: .equal,
                                          toItem: self.bottomLayoutGuide,
                                          attribute: .top,
                                          multiplier: 1,
                                          constant: 0))
  }

}

Objective-C

@interface ViewController()

@property(nonatomic, strong) GADBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Instantiate the banner view with your desired banner size.
  self.bannerView = [[GADBannerView alloc] initWithAdSize:GADAdSizeBanner];
  [self addBannerViewToView:self.bannerView];

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
  GADRequest *request = [GADRequest request];
  [self.bannerView loadRequest:request];
}

#pragma mark - view positioning

-(void)addBannerViewToView:(UIView *_Nonnull)bannerView {
  self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:self.bannerView];
  if (@available(ios 11.0, *)) {
    [self positionBannerViewAtBottomOfSafeArea:bannerView];
  } else {
    [self positionBannerViewAtBottomOfView:bannerView];
  }
}

- (void)positionBannerViewAtBottomOfSafeArea:(UIView *_Nonnull)bannerView NS_AVAILABLE_IOS(11.0) {
  // Position the banner. Stick it to the bottom of the Safe Area.
  // Centered horizontally.
  UILayoutGuide *guide = self.view.safeAreaLayoutGuide;
  [NSLayoutConstraint activateConstraints:@[
    [bannerView.centerXAnchor constraintEqualToAnchor:guide.centerXAnchor],
    [bannerView.bottomAnchor constraintEqualToAnchor:guide.bottomAnchor]
  ]];
}

- (void)positionBannerViewAtBottomOfView:(UIView *_Nonnull)bannerView {
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeCenterX
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.view
                                                        attribute:NSLayoutAttributeCenterX
                                                       multiplier:1
                                                         constant:0]];
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeBottom
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.bottomLayoutGuide
                                                        attribute:NSLayoutAttributeTop
                                                       multiplier:1
                                                         constant:0]];
}

@end

เทคนิคข้างต้นสามารถใช้ในการจำกัดด้านบนของพื้นที่ปลอดภัยได้ง่ายๆ โดยการแก้ไขแอตทริบิวต์และ Anchor ที่ใช้

แบนเนอร์อัจฉริยะ

หากคุณใช้แบนเนอร์อัจฉริยะโดยเฉพาะอย่างยิ่งในแนวนอน เราขอแนะนำให้คุณใช้ข้อจำกัดในการจัดขอบของแบนเนอร์ให้ชิดขอบซ้ายและขวาของพื้นที่ที่ปลอดภัย

ในเครื่องมือสร้างอินเทอร์เฟซ จะมีการรองรับฟังก์ชันนี้ใน iOS 9 ด้วยการเลือก ใช้คู่มือเลย์เอาต์ของพื้นที่ปลอดภัย ตามที่ระบุไว้ข้างต้น

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

Swift

func addBannerViewToView(_ bannerView: GADBannerView) {
  bannerView.translatesAutoresizingMaskIntoConstraints = false
  view.addSubview(bannerView)
  if #available(iOS 11.0, *) {
    // In iOS 11, we need to constrain the view to the safe area.
    positionBannerViewFullWidthAtBottomOfSafeArea(bannerView)
  }
  else {
    // In lower iOS versions, safe area is not available so we use
    // bottom layout guide and view edges.
    positionBannerViewFullWidthAtBottomOfView(bannerView)
  }
}

// MARK: - view positioning
@available (iOS 11, *)
func positionBannerViewFullWidthAtBottomOfSafeArea(_ bannerView: UIView) {
  // Position the banner. Stick it to the bottom of the Safe Area.
  // Make it constrained to the edges of the safe area.
  let guide = view.safeAreaLayoutGuide
  NSLayoutConstraint.activate([
    guide.leftAnchor.constraint(equalTo: bannerView.leftAnchor),
    guide.rightAnchor.constraint(equalTo: bannerView.rightAnchor),
    guide.bottomAnchor.constraint(equalTo: bannerView.bottomAnchor)
  ])
}

func positionBannerViewFullWidthAtBottomOfView(_ bannerView: UIView) {
  view.addConstraint(NSLayoutConstraint(item: bannerView,
                                        attribute: .leading,
                                        relatedBy: .equal,
                                        toItem: view,
                                        attribute: .leading,
                                        multiplier: 1,
                                        constant: 0))
  view.addConstraint(NSLayoutConstraint(item: bannerView,
                                        attribute: .trailing,
                                        relatedBy: .equal,
                                        toItem: view,
                                        attribute: .trailing,
                                        multiplier: 1,
                                        constant: 0))
  view.addConstraint(NSLayoutConstraint(item: bannerView,
                                        attribute: .bottom,
                                        relatedBy: .equal,
                                        toItem: bottomLayoutGuide,
                                        attribute: .top,
                                        multiplier: 1,
                                        constant: 0))
}

Objective-C

- (void)addBannerViewToView:(UIView *)bannerView {
  bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:bannerView];
  if (@available(ios 11.0, *)) {
    // In iOS 11, we need to constrain the view to the safe area.
    [self positionBannerViewFullWidthAtBottomOfSafeArea:bannerView];
  } else {
    // In lower iOS versions, safe area is not available so we use
    // bottom layout guide and view edges.
    [self positionBannerViewFullWidthAtBottomOfView:bannerView];
  }
}

#pragma mark - view positioning

- (void)positionBannerViewFullWidthAtBottomOfSafeArea:(UIView *_Nonnull)bannerView NS_AVAILABLE_IOS(11.0) {
  // Position the banner. Stick it to the bottom of the Safe Area.
  // Make it constrained to the edges of the safe area.
  UILayoutGuide *guide = self.view.safeAreaLayoutGuide;

  [NSLayoutConstraint activateConstraints:@[
    [guide.leftAnchor constraintEqualToAnchor:bannerView.leftAnchor],
    [guide.rightAnchor constraintEqualToAnchor:bannerView.rightAnchor],
    [guide.bottomAnchor constraintEqualToAnchor:bannerView.bottomAnchor]
  ]];
}

- (void)positionBannerViewFullWidthAtBottomOfView:(UIView *_Nonnull)bannerView {
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeLeading
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.view
                                                        attribute:NSLayoutAttributeLeading
                                                       multiplier:1
                                                         constant:0]];
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeTrailing
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.view
                                                        attribute:NSLayoutAttributeTrailing
                                                       multiplier:1
                                                         constant:0]];
  [self.view addConstraint:[NSLayoutConstraint constraintWithItem:bannerView
                                                        attribute:NSLayoutAttributeBottom
                                                        relatedBy:NSLayoutRelationEqual
                                                           toItem:self.bottomLayoutGuide
                                                        attribute:NSLayoutAttributeTop
                                                       multiplier:1
                                                         constant:0]];
}

โฆษณาเนทีฟ

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

โฆษณาคั่นระหว่างหน้าและโฆษณาที่มีการให้รางวัล

ตั้งแต่เวอร์ชัน 7.26.0 SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google รองรับรูปแบบโฆษณาคั่นระหว่างหน้าและโฆษณาที่มีการให้รางวัลสำหรับ iPhone X อย่างเต็มรูปแบบ