عرض الإعلانات على هاتف iPhone X

يوضّح هذا الدليل أفضل الممارسات حول كيفية برمجة تطبيقاتك لعرض الإعلانات بشكل صحيح على iPhone X.

المتطلبات الأساسية

يجب وضع إعلانات البانر في الـ "منطقة آمنة" لتجنّب حجبها بالأركان المستديرة وصندوق أداة الاستشعار ومؤشّر الصفحة الرئيسية. في هذه الصفحة، ستجد أمثلة حول كيفية إضافة قيود على موضع إعلان البانر ليظهر في أعلى "المنطقة الآمنة" أو أسفلها.

لوحة السيناريو/أداة Interface Builder

إذا كان تطبيقك يستخدم أداة Interface Builder، تأكَّد أولاً من تفعيل أدلة تصميم "المنطقة الآمنة". للقيام بذلك، يجب أن يكون لديك الإصدار 9 من Xcode أو إصدار أحدث وأن تستهدف الإصدار 9 من iOS أو إصدار أحدث.

افتح ملف Interface Builder وانقر على مشهد وحدة التحكّم في العرض. ستظهر لك خيارات مستند Interface Builder على يسار الصفحة. ضَع علامة في مربّع استخدام أدلة تصميم "المنطقة الآمنة" وتأكَّد من أنّك تنشئ التطبيق ليناسب الإصدار 9.0 من iOS والإصدارات الأحدث كحد أدنى.

ننصحك بتقييد البانر بالحجم المطلوب باستخدام قيود العرض والارتفاع.

يمكنك الآن محاذاة البانر مع أعلى "المنطقة الآمنة" من خلال تقييد السمة Top في GADBannerView بأعلى "المنطقة الآمنة":

وبالمثل، يمكنك محاذاة البانر مع أسفل "المنطقة الآمنة" من خلال تقييد السمة Bottom في GADBannerView بأسفل "المنطقة الآمنة":

يجب أن تبدو القيود الآن مشابهة للقطة الشاشة أدناه (يمكن أن يختلف الحجم والموضع):

ViewController

في ما يلي مقتطف بسيط من رمز وحدة التحكّم في العرض الذي ينفّذ الحد الأدنى المطلوب لعرض بانر في GADBannerView كما تم ضبطه في لوحة السيناريو أعلاه:

Swift

class ViewController: UIViewController {

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

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

}

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

محاذاة البانر مع حافة "المنطقة الآمنة"

إذا كنت تريد عرض بانر محاذٍ لليسار أو اليمين، عليك تقييد الحافة اليسرى أو اليمنى من البانر بالحافة اليسرى أو اليمنى من "المنطقة الآمنة" وليس بالحافة اليسرى أو اليمنى من العرض الفائق.

إذا كانت ميزة استخدام أدلة تصميم "المنطقة الآمنة" مفعّلة، ستستخدم أداة Interface Builder تلقائيًا حواف "المنطقة الآمنة" عند إضافة قيود إلى العرض.

آلية

إذا كان تطبيقك ينشئ إعلانات بانر آليًا، يمكنك تحديد القيود ووضع إعلان البانر في الرمز البرمجي. يوضّح هذا المثال كيفية تقييد بانر ليتم توسيطه أفقيًا في أسفل "المنطقة الآمنة":

Swift

class ViewController: UIViewController {

  var bannerView: BannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

    // Instantiate the banner view with your desired banner size.
    bannerView = BannerView(adSize: AdSizeBanner)
    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(Request())
  }

  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، يتم دعم ذلك على الإصدار 9 من iOS والإصدارات الأحدث من خلال وضع علامة في مربّع استخدام أدلة تصميم "المنطقة الآمنة" كما هو موضّح أعلاه .

في الرمز البرمجي، يجب أن تكون قيود الحواف نسبية إلى أدلة تصميم "المنطقة الآمنة" حيثما توفّرت. في ما يلي مقتطف الرمز البرمجي الذي يضيف عرض بانر إلى العرض ويقيّده بأسفل العرض، مع ضبط العرض على كامل العرض:

Swift

func addBannerViewToView(_ bannerView: BannerView) {
  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، عليك إضافة قيود إلى GADNativeAdView (أو العرض الذي يحتوي على الإعلان) من أجل مراعاة أدلة تصميم "المنطقة الآمنة". بالنسبة إلى العروض المدمجة مع المحتوى، ننصحك بتوفير قيود حجم أكثر وضوحًا.

الإعلانات البينية والإعلانات مقابل مكافأة

اعتبارًا من الإصدار 7.26.0، Google Mobile Ads SDK تتوافق تمامًا مع تنسيقات الإعلانات البينية و الإعلانات مقابل مكافأة على iPhone X.