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

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

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

• ทำตามขั้นตอนเริ่มต้นใช้งาน

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

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

Storyboard/Interface Builder

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

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

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

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

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

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

ViewController

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

Swift

class ViewController: UIViewController {

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

  override func viewDidLoad() {
    super.viewDidLoad()
    // Replace this ad unit ID with your own ad unit ID.
    bannerView.adUnitID = "/21775744923/example/adaptive-banner"
    bannerView.rootViewController = self
    bannerView.load(AdManagerRequest())
  }

}

Objective-C

@interface ViewController()

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

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"/21775744923/example/adaptive-banner";
  self.bannerView.rootViewController = self;
  GAMRequest *request = [GAMRequest request];
  [self.bannerView loadRequest:request];
}

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

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

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

การรองรับ iOS 8 และเวอร์ชันที่ต่ำกว่า

หากต้องการรองรับ iOS 8 หรือต่ำกว่าโดยใช้ Interface Builder คุณควร ยกเลิกการเลือกใช้แนวทางการจัดเลย์เอาต์พื้นที่ปลอดภัยสำหรับไฟล์ Interface Builder และ Storyboard

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

นอกจากนี้ ให้เพิ่มข้อจำกัดที่ด้านบนของไกด์เลย์เอาต์ด้านล่าง (แทนด้านล่าง ของพื้นที่ปลอดภัย) ดังนี้

สำหรับแบนเนอร์แบบเต็มความกว้าง (ได้รับผลกระทบจากพื้นที่ปลอดภัยในแนวนอนเท่านั้น) จะไม่มีเส้นบอกแนวเลย์เอาต์เหล่านี้ ตัวเลือกที่ปลอดภัยใน Interface Builder คือการทำให้ข้อจำกัดขอบซ้าย และขวาสัมพันธ์กับระยะขอบ

ซึ่งจะชดเชยขอบของแบนเนอร์เล็กน้อยจากขอบของ SuperView/พื้นที่ปลอดภัย เพื่อให้มั่นใจว่าแบนเนอร์จะไม่ถูกบดบังในแนวนอน บน iPhone X คุณยังสามารถสร้างผลลัพธ์ที่ต้องการ โดยใช้โปรแกรมได้ด้วย

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

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

Swift

class ViewController: UIViewController {

  var bannerView: AdManagerBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Instantiate the banner view with your desired banner size.
    bannerView = AdManagerBannerView(adSize: AdSizeBanner)
    addBannerViewToView(bannerView)
    bannerView.rootViewController = self
    // Set the ad unit ID to your own ad unit ID here.
    bannerView.adUnitID = "/21775744923/example/adaptive-banner"
    bannerView.load(AdManagerRequest())
  }

  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) GAMBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];

  // Instantiate the banner view with your desired banner size.
  self.bannerView = [[GAMBannerView alloc] initWithAdSize:kGADAdSizeBanner];
  [self addBannerViewToVIew:self.bannerView];

  // Replace this ad unit ID with your own ad unit ID.
  self.bannerView.adUnitID = @"/21775744923/example/adaptive-banner";
  self.bannerView.rootViewController = self;
  GAMRequest *request = [GAMRequest 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

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

โฆษณาเนทีฟ

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

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

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