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

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

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

• أكمل الخطوات الواردة في مقالة البدء.

إعلانات البانر

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

لوحة العرض/أداة إنشاء واجهة المستخدم

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

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

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

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

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

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

ViewController

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

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

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

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

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

التوافق مع iOS 8 والإصدارات الأقدم

إذا أردت توفير التوافق مع iOS 8 والإصدارات الأقدم باستخدام أداة إنشاء واجهة المستخدم، عليك إزالة العلامة من مربّع استخدام أدلة تخطيط "المنطقة الآمنة" لملفات أداة إنشاء واجهة المستخدم ولوحات العرض.

يمكنك الآن إضافة قيود إلى أسفل دليل التخطيط العلوي (بدلاً من أعلى "المنطقة الآمنة"):

يمكنك أيضًا إضافة قيود إلى أعلى دليل التخطيط السفلي (بدلاً من أسفل "المنطقة الآمنة"):

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

سيؤدي ذلك إلى إزاحة حافة البانر قليلاً عن حافة العرض الفائق/المنطقة الآمنة، ما يضمن عدم حجب البانر في الوضع الأفقي على 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

يمكن استخدام التقنيات أعلاه بسهولة لتقييد أعلى "المنطقة الآمنة" من خلال تعديل السمات والمثبتات المستخدَمة.

إعلانات مدمجة مع المحتوى

إذا كان تطبيقك يثبّت الإعلانات المدمجة مع المحتوى في أعلى الشاشة أو أسفلها، تنطبق المبادئ نفسها على الإعلانات المدمجة مع المحتوى كما تنطبق على إعلانات البانر. الفرق الرئيسي هو أنّه بدلاً من إضافة قيود إلى GAMBannerView، عليك إضافة قيود إلى GADNativeAppInstallAdView وGADNativeContentAdView (أو العرض الذي يحتوي على الإعلان) من أجل مراعاة أدلة تخطيط "المنطقة الآمنة". بالنسبة إلى العروض المدمجة مع المحتوى، ننصحك بتوفير قيود حجم أكثر وضوحًا.

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

تعرض أشكال الإعلانات بملء الشاشة، بما في ذلك الإعلانات البينية والإعلانات مقابل مكافأة، بواسطة Google Mobile Ads SDK. سيتم تعديل Google Mobile Ads SDK حزمة SDK لضمان عرض عناصر الإعلان، مثل زر الإغلاق، في الموضع الصحيح. سنعدِّل ملاحظات الإصدار وصفحة المستندات هذه عندما يصبح هذا التغيير متاحًا.