במדריך הזה מפורטות שיטות מומלצות לכתוב את הקוד של האפליקציות כדי להציג מודעות בצורה תקינה ב-iPhone X.
דרישות מוקדמות
- מייבאים את Google Mobile Ads SDK בגרסה 7.26.0 ואילך, בפני עצמו או כחלק מ-Firebase.
מודעות באנר
צריך למקם מודעות באנר ב'אזור בטוח' כדי למנוע את הסתרתן על ידי פינות מעוגלות, בתי חיישנים והאינדיקטור של כפתור הבית. בדף הזה מפורטות דוגמאות להוספת אילוצים כדי למקם מודעת באנר בחלק העליון או התחתון של 'האזור הבטוח'.
סטוריבורד/כלי ליצירת ממשקים
אם באפליקציה שלכם נעשה שימוש ב-Interface Builder, קודם כול עליכם לוודא שהפעלתם את ההנחיות של הפריסה של אזור בטוח. כדי לעשות זאת, צריך להשתמש ב-Xcode בגרסה 9 ואילך ולכוון ל-iOS בגרסה 9 ואילך.
פותחים את הקובץ ב-Interface Builder ולוחצים על הסצנה של ה-View Controller. האפשרויות של מסמך ב-Interface Builder יופיעו בצד שמאל. כדאי לעיין במאמר שימוש במדריכים לגבי פריסת אזור בטוח ולוודא שאתם מפתחים ל-iOS 9.0 ואילך לפחות.
מומלץ להגביל את הבאנר לגודל הנדרש באמצעות אילוצים של רוחב וגובה.
עכשיו אפשר ליישר את מודעת הבאנר לחלק העליון של האזור הבטוח על ידי הגבלת המאפיין Top של 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
אפשר להשתמש בשיטות שלמעלה כדי להגביל את הרכיבים לחלק העליון של האזור הבטוח, על ידי שינוי המאפיינים והעוגנים שבהם נעשה שימוש.
מודעות באנר חכמות
אם אתם משתמשים במודעות באנר חכמות, במיוחד בפורמט לרוחב, מומלץ להשתמש באילוצים כדי ליישר את הקצוות של הבאנר לקצוות הימניים והשמאליים של האזור הבטוח.
אפשר להשתמש באפשרות הזו ב-Interface Builder כבר מ-iOS 9. לשם כך, מסמנים את האפשרות Use Safe Area Layout Guides כפי שמתואר למעלה.
בקוד, צריך להגדיר את אילוצים הקצוות ביחס למנחי הפריסה של האזור הבטוח, אם הם זמינים. זהו קטע קוד שמוסיף תצוגת באנר לתצוגה ומצמיד אותה לתחתית התצוגה, ברוחב מלא:
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, Google Mobile Ads SDK תומך באופן מלא בפורמטים של מודעות מעברון ומודעות וידאו מתגמלות ל-iPhone X.