คู่มือนี้สาธิตแนวทางปฏิบัติที่ดีที่สุดในการเขียนโค้ดให้แอปแสดงโฆษณาอย่างถูกต้องใน iPhone X
ข้อกำหนดเบื้องต้น
- ทำการเริ่มต้นใช้งานให้เสร็จสมบูรณ์
แบนเนอร์โฆษณา
โฆษณาแบนเนอร์ต้องอยู่ใน "พื้นที่ปลอดภัย" เพื่อหลีกเลี่ยงการถูกบดบังโดยมุมโค้งมน พื้นที่เซ็นเซอร์ และสัญญาณบอกสถานะบ้าน ในหน้านี้ คุณจะเห็นตัวอย่างของวิธีเพิ่มข้อจำกัดในการวางตำแหน่งแบนเนอร์ไว้ที่ด้านบนหรือด้านล่างของพื้นที่ปลอดภัย ทั้งสตอรีบอร์ดและข้อจำกัดแบบเป็นโปรแกรมสะท้อนให้เห็นในสภาพแวดล้อมที่รองรับ iOS 9 ขึ้นไปและ Xcode 9 ขึ้นไป นอกจากนี้ ยังมีวิธีแก้ปัญหาสำหรับเวอร์ชันก่อนหน้าของ iOS และ Xcode ด้วย
เครื่องมือสร้างสตอรีบอร์ด/อินเทอร์เฟซ
หากแอปใช้เครื่องมือสร้างอินเทอร์เฟซ ก่อนอื่นให้คุณเปิดใช้คู่มือการออกแบบพื้นที่ปลอดภัย โดยคุณจะต้องเรียกใช้ Xcode 9 ขึ้นไปและกำหนดเป้าหมายเป็น iOS 9 ขึ้นไป
เปิดไฟล์เครื่องมือสร้างอินเทอร์เฟซและคลิกฉากของตัวควบคุมมุมมอง คุณจะเห็นตัวเลือกเอกสารเครื่องมือสร้างอินเทอร์เฟซทางด้านขวา โปรดอ่านคู่มือเลย์เอาต์ของพื้นที่ที่ปลอดภัยและดูให้แน่ใจว่าคุณกำลังสร้างสำหรับ iOS 9.0 ขึ้นไปเป็นอย่างน้อย
เราขอแนะนำให้จำกัดแบนเนอร์ให้มีขนาดตามที่กำหนดโดยใช้ข้อจำกัดความกว้างและความสูง
ตอนนี้คุณสามารถจัดแบนเนอร์ให้อยู่ที่ด้านบนของพื้นที่ปลอดภัยได้โดยยึดคุณสมบัติบนสุดของ GAMBannerView ไว้ที่ด้านบนของพื้นที่ปลอดภัย ดังนี้
ในทำนองเดียวกัน คุณสามารถจัดแบนเนอร์ให้อยู่ที่ด้านล่างของพื้นที่ปลอดภัยโดยจำกัดคุณสมบัติ Bottom ของ GAMBannerView ไว้ที่ด้านล่างของพื้นที่ปลอดภัย ดังนี้
ตอนนี้ ข้อจำกัดควรมีลักษณะคล้ายกับภาพหน้าจอด้านล่าง (ขนาด/การวางตำแหน่งอาจแตกต่างกันไป)
ViewController
นี่คือข้อมูลโค้ดตัวควบคุมมุมมองแบบง่ายซึ่งมีขนาดขั้นต่ำที่จำเป็นสำหรับการแสดงแบนเนอร์ใน GAMBannerView ตามที่กำหนดค่าไว้ในสตอรีบอร์ดด้านบน
Swift
class ViewController: UIViewController {
/// The banner view.
@IBOutlet var bannerView: GAMBannerView!
override func viewDidLoad() {
super.viewDidLoad()
// Replace this ad unit ID with your own ad unit ID.
bannerView.adUnitID = "/6499/example/banner"
bannerView.rootViewController = self
bannerView.load(GAMRequest())
}
}
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 = @"/6499/example/banner";
self.bannerView.rootViewController = self;
GAMRequest *request = [GAMRequest request];
[self.bannerView loadRequest:request];
}
การจัดแบนเนอร์ให้ชิดขอบของพื้นที่ปลอดภัย
หากคุณต้องการแบนเนอร์ที่มีขนาดความกว้างเต็ม จัดชิดซ้ายหรือขวา ให้จำกัดขอบซ้าย/ขวาของแบนเนอร์ไว้ที่ขอบด้านซ้าย/ขวาของพื้นที่ปลอดภัย ไม่ใช่ขอบซ้าย/ขวาของมุมมองซูเปอร์
ถ้าคุณเปิดใช้คู่มือการออกแบบพื้นที่ปลอดภัยไว้ เครื่องมือสร้างอินเทอร์เฟซจะใช้ขอบพื้นที่ปลอดภัยเมื่อเพิ่มข้อจำกัดให้กับมุมมองโดยค่าเริ่มต้น
รองรับ iOS 8 และต่ำกว่า
หากต้องการรองรับ iOS 8 หรือต่ำกว่าโดยใช้ Interface Builder คุณควรยกเลิกการเลือก Use Safe Area Layout Guides สําหรับไฟล์และสตอรีบอร์ดของเครื่องมือสร้างอินเทอร์เฟซ
ตอนนี้คุณสามารถเพิ่มข้อจำกัดที่ด้านล่างของคู่มือเลย์เอาต์ด้านบน (แทนด้านบนของพื้นที่ปลอดภัย) ได้แล้ว
และเพิ่มข้อจำกัดไว้ที่ด้านบนของคู่มือการออกแบบด้านล่าง (แทนด้านล่างของพื้นที่ปลอดภัย) ดังนี้
สำหรับแบนเนอร์แบบเต็มความกว้าง (ได้รับผลกระทบจากพื้นที่ปลอดภัยในแนวนอนเท่านั้น) ไม่มีคู่มือเลย์เอาต์เหล่านี้ ตัวเลือกที่ปลอดภัยในเครื่องมือสร้างอินเทอร์เฟซคือทำให้ข้อจำกัดขอบ ซ้ายและขวาของคุณสัมพันธ์กับขอบ ดังนี้
ซึ่งจะหักขอบของแบนเนอร์ออกไปเล็กน้อยจากขอบของ SuperView/พื้นที่ปลอดภัย เพื่อให้แน่ใจว่าแบนเนอร์จะไม่ถูกบดบังในแนวนอนบน iPhone X คุณยังได้ผลลัพธ์ที่ต้องการ แบบเป็นโปรแกรมได้ด้วย
แบบเป็นโปรแกรม
หากแอปสร้างโฆษณาแบนเนอร์แบบเป็นโปรแกรม คุณจะกำหนดข้อจำกัดและจัดตำแหน่งโฆษณาแบนเนอร์ในโค้ดได้ ตัวอย่างนี้ (สำหรับ iOS เวอร์ชัน 7.0 ขึ้นไป) แสดงวิธีจำกัดแบนเนอร์ให้อยู่กึ่งกลางในแนวนอนที่ด้านล่างของพื้นที่ปลอดภัย
Swift
class ViewController: UIViewController {
var bannerView: GAMBannerView!
override func viewDidLoad() {
super.viewDidLoad()
// Instantiate the banner view with your desired banner size.
bannerView = GAMBannerView(adSize: kGADAdSizeBanner)
addBannerViewToView(bannerView)
bannerView.rootViewController = self
// Set the ad unit ID to your own ad unit ID here.
bannerView.adUnitID = "/6499/example/banner"
bannerView.load(GAMRequest())
}
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 = @"/6499/example/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
คุณสามารถใช้เทคนิคข้างต้นเพื่อยึดไว้ที่ด้านบนของพื้นที่ปลอดภัยได้ง่ายๆ โดยการแก้ไขแอตทริบิวต์และ Anchor ที่ใช้
โฆษณาเนทีฟ
หากแอปปักหมุดโฆษณาเนทีฟไว้ที่ด้านบนหรือด้านล่างของหน้าจอ ระบบจะใช้หลักการเดียวกันกับโฆษณาเนทีฟสำหรับโฆษณาแบนเนอร์
ความแตกต่างหลักคือแทนที่จะเพิ่มข้อจำกัดใน GAMBannerView คุณจะต้องเพิ่มข้อจำกัดลงใน GADNativeAppInstallAdView และ
GADNativeContentAdView (หรือมุมมองภายในสำหรับโฆษณา) เพื่อให้เป็นไปตามคู่มือการออกแบบพื้นที่ปลอดภัย สำหรับมุมมองเนทีฟ เราขอแนะนำให้ระบุ
ข้อจำกัดด้านขนาดที่ชัดเจนยิ่งขึ้น
โฆษณาคั่นระหว่างหน้าและโฆษณาที่มีการให้รางวัล
รูปแบบโฆษณาแบบเต็มหน้าจอ ซึ่งรวมถึงโฆษณาคั่นระหว่างหน้าและโฆษณาที่มีการให้รางวัล จะแสดงผลโดย SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google เราจะอัปเดต SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google เพื่อให้แน่ใจว่าองค์ประกอบโฆษณาอย่างปุ่มปิดแสดงในจุดที่เหมาะสม เราจะอัปเดตบันทึกประจำรุ่นและหน้าเอกสารประกอบนี้เมื่อมีการเปลี่ยนแปลงนี้