iPhone X Reklam Oluşturma

Bu kılavuzda, uygulamalarınızı iPhone X'te reklamları doğru şekilde oluşturacak şekilde kodlamayla ilgili en iyi uygulamalar gösterilmektedir.

Ön koşullar

Banner reklamlar, yuvarlatılmış köşeler, sensör yuvası ve Ana Ekran göstergesi tarafından engellenmemeleri için "Güvenli Alan" içerisine yerleştirilmelidir. Bu sayfada, bir banner reklamı güvenli alanın üst veya alt kısmında konumlandırmak için kısıtlamalar eklemeyle ilgili örnekler bulabilirsiniz. Hem storyboard hem de programatik kısıtlamalar, iOS 9+ ve Xcode 9+ sürümlerini destekleyen bir ortamda gösterilmektedir. iOS ve Xcode'un daha eski sürümleri için geçici çözümler de belirtilmiştir.

Storyboard/Interface Builder

Uygulamanızda Interface Builder kullanılıyorsa öncelikle güvenli alan düzeni kılavuzlarını etkinleştirdiğinizden emin olun. Bunu yapmak için Xcode 9 veya sonraki bir sürümü kullanıyor ve iOS 9 veya sonraki bir sürümü hedefliyor olmanız gerekir.

Interface Builder dosyanızı açın ve görünüm denetleyicisi sahnenizi tıklayın. Sağ tarafta Interface Builder Document (Arayüz Oluşturucu Dokümanı) seçeneklerini görürsünüz. Güvenli alan düzeni kılavuzlarını kullan'ı işaretleyin ve iOS 9.0 ve sonraki sürümler için geliştirme yaptığınızdan emin olun.

Genişlik ve yükseklik kısıtlamaları kullanarak banner'ı gerekli boyuta kısıtlamanızı öneririz.

Artık GAMBannerView'un Top özelliğini Güvenli Alanın üst kısmıyla sınırlayarak banner'ı Güvenli Alanın üst kısmına hizalayabilirsiniz:

Benzer şekilde, GAMBannerView'un Bottom özelliğini güvenli alanın alt kısmıyla sınırlayarak banner'ı güvenli alanın alt kısmına da hizalayabilirsiniz:

Kısıtlamalarınız artık aşağıdaki ekran görüntüsüne benzer görünmelidir (boyutlandırma/konumlandırma değişebilir):

ViewController

Aşağıda, yukarıdaki storyboard'da yapılandırıldığı gibi bir GAMBannerView içinde banner göstermek için gereken minimum işlemleri yapan basit bir görünüm denetleyicisi kod snippet'i verilmiştir:

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

Banner'ları güvenli alanın kenarına hizalama

Tam genişlikte, sola veya sağa hizalanmış bir banner istiyorsanız banner'ın sol/sağ kenarını, süper görünümün sol/sağ kenarına değil, güvenli alanın sol/sağ kenarına göre sınırlayın.

Use Safe Area Layout Guides (Güvenli Alan Düzeni Kılavuzlarını Kullan) seçeneğini etkinleştirdiyseniz arayüz oluşturucu, görünüme sınırlamalar eklerken varsayılan olarak güvenli alan kenarlarını kullanır.

iOS 8 ve önceki sürümlerin desteklenmesi

Interface Builder'ı kullanarak iOS 8 veya önceki sürümleri desteklemek istiyorsanız Interface Builder dosyalarınız ve storyboard'larınız için Use Safe Area Layout Guides (Güvenli Alan Düzeni Kılavuzlarını Kullan) seçeneğinin işaretini kaldırmanız gerekir.

Artık üst düzen kılavuzunun altına (Güvenli Alanın üstü yerine) kısıtlamalar ekleyebilirsiniz:

Ayrıca, alt düzen kılavuzunun üst kısmına (Güvenli Alanın alt kısmı yerine) kısıtlamalar ekleyin:

Tam genişlikteki banner'lar (yalnızca yatay modda güvenli alandan etkilenir) için bu düzen kılavuzları mevcut değildir. Interface Builder'daki güvenli seçenek, sol ve sağ kenar kısıtlamalarınızı kenar boşluklarına göre belirlemenizi sağlar:

Bu, banner'ın kenarını biraz süper görünümün/güvenli alanın kenarından uzaklaştırarak banner'ınızın iPhone X'te yatay yönde gizlenmemesini sağlar. İstediğiniz sonucu programatik olarak da elde edebilirsiniz.

Programatik

Uygulamanız banner reklamları programatik olarak oluşturuyorsa kısıtlamaları tanımlayabilir ve banner reklamı kodda konumlandırabilirsiniz. Bu örnekte (iOS 7.0 ve sonraki sürümler için), bir banner'ın Güvenli Alanın alt kısmında yatay olarak ortalanacak şekilde nasıl sınırlandırılacağı gösterilmektedir:

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

Kullanılan özellikler ve sabitleme noktaları değiştirilerek yukarıdaki teknikler, güvenli alanın üst kısmıyla sınırlama yapmak için kolayca kullanılabilir.

Yerel reklamlar

Uygulamanız doğal reklamları ekranın üst veya alt kısmına sabitliyorsa banner reklamlar için geçerli olan ilkeler doğal reklamlar için de geçerlidir. Aradaki temel fark şudur: GAMBannerView öğesine kısıtlamalar eklemek yerine, Güvenli Alan düzen kılavuzlarına uymak için GADNativeAppInstallAdView ve GADNativeContentAdView öğelerinize (veya reklamın bulunduğu kapsayıcı görünüme) kısıtlamalar eklemeniz gerekir. Doğal görünümler için daha net boyut kısıtlamaları sağlamanızı öneririz.

Geçiş reklamları ve ödüllü reklamlar

Geçiş reklamları ve ödüllü reklamlar dahil olmak üzere tam ekran reklam biçimleri, Google Mobile Ads SDK'sı tarafından oluşturulur. Kapatma düğmesi gibi reklam öğelerinin doğru yerde oluşturulmasını sağlamak için Google Mobile Ads SDK'sında bir güncelleme yapılacak. Bu değişiklik kullanıma sunulduğunda sürüm notlarını ve bu doküman sayfasını güncelleyeceğiz.