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

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

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

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

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

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

لوحة ترتيب الصور/أداة إنشاء واجهات المستخدم

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

افتح ملف Interface Builder وانقر على مشهد وحدة التحكّم في العرض. ستظهر لك خيارات مستند Interface Builder على اليسار. ضَع علامة في المربّع بجانب استخدام أدلة تخطيط المنطقة الآمنة وتأكَّد من أنّك تستخدم 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];
}

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

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

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

التوافق مع الإصدار 8 من نظام التشغيل iOS والإصدارات الأقدم

إذا كنت تريد توفير الدعم لنظام التشغيل iOS 8 أو إصدار أقدم باستخدام Interface Builder، عليك إزالة العلامة من المربّع بجانب Use Safe Area Layout Guides لملفات Interface Builder ولوحات العرض.

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

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

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

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

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

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