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

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

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

• استورِد الإصدار 7.26.0 أو إصدارًا أحدث من حزمة "SDK لإعلانات Google على الأجهزة الجوّالة"، إما بحد ذاته أو كجزء من Firebase

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

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

أداة إنشاء الواجهات/مخططات القصة

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

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

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

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

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

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

ViewController

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

Swift

class ViewController: UIViewController {

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

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

}

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

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

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

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

آلية

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

Swift

class ViewController: UIViewController {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

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

  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

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

إعلانات البانر الذكية

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

في أداة إنشاء الواجهات، يمكن استخدام نظام التشغيل iOS 9 مرة أخرى عن طريق التحقق من خيار استخدام أدلة تنسيق المنطقة الآمنة كما هو موضّح أعلاه.

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

Swift

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

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

اعتبارًا من الإصدار 7.26.0، ستوفر حزمة "SDK لإعلانات Google على الأجهزة الجوّالة" دعمًا كاملاً للإعلانات البينية أشكال الإعلانات التي تضم مكافأة لجهاز iPhone X