عرض إعلانات iPhone X

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

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

• أكمِل البدء.

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

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

مصمم القصص/الواجهات

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

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

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

يمكنك الآن محاذاة إعلان البانر إلى أعلى المنطقة الآمنة من خلال تقييد الموقع العلوي في GAMBannerView بحيث يظهر أعلى المنطقة الآمنة:

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

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

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

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

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

سيتم التعويض عن حافة البانر قليلاً من حافة العرض/المنطقة الآمنة، ما يضمن لك عدم حجب إعلان البانر في الاتجاه الأفقي على هاتف iPhone X. يمكنك أيضًا تحقيق النتيجة المرجوة آليًا.

آلية

إذا أنشأ تطبيقك إعلانات بانر بشكلٍ آلي، يمكنك تحديد قيود ووضع إعلان البانر في الرمز. يوضّح هذا المثال (الإصدار 7.0 والإصدارات الأحدث من نظام التشغيل iOS) كيفية تقييد إعلان بانر ليتم توسيطه أفقيًا أسفل "المنطقة الآمنة":

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

يمكن بسهولة استخدام الأساليب المذكورة أعلاه لحصر إمكانية الوصول إلى أعلى المنطقة الآمنة من خلال تعديل السمات وعلامات الارتساء المستخدمة.

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

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

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

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