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

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

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

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

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

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

Storyboard/Interface Builder

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

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

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

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

وبالمثل، يمكنك محاذاة إعلان البانر في أسفل "المنطقة الآمنة" من خلال تقييد سمة Bottom في 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 = "/21775744923/example/adaptive-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 = @"/21775744923/example/adaptive-banner";
  self.bannerView.rootViewController = self;
  GAMRequest *request = [GAMRequest request];
  [self.bannerView loadRequest:request];
}

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

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

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

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

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

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

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

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

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

آلية

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

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 = "/21775744923/example/adaptive-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 = @"/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 على الأجهزة الجوّالة لضمان عرض عناصر الإعلان، مثل زر الإغلاق، في المكان الصحيح. سنعدّل ملاحظات الإصدار وصفحة مستندات هذه عندما يصبح هذا التغيير متاحًا.