iPhone X Reklam Oluşturma

Bu kılavuzda, iPhone X'te reklamları doğru şekilde oluşturmak için uygulamalarınızı nasıl kodlayacağınızla ilgili en iyi uygulamalar yer almaktadır.

Ön koşullar

Banner reklamların yuvarlatılmış köşeler, sensör yuvası ve Ana Ekran göstergesi tarafından görünmemesi için "Güvenli Alan" içine yerleştirilmesi gerekir. Bu sayfada, bir banner'ı Güvenli Alan'ın üst veya alt kısmına konumlandırmak için nasıl sınırlama ekleneceğini gösteren örnekler bulabilirsiniz. Hem resimli taslak hem de programatik kısıtlamalar, iOS 9+ ve Xcode 9 ve sonraki sürümleri destekleyen bir ortamda gösterilmektedir. iOS ve Xcode'un önceki sürümleri için geçici çözümler de belirtilmiştir.

Resimli Taslak/Arayüz Oluşturucu

Uygulamanız Arayüz Oluşturucu'yu kullanıyorsa öncelikle Güvenli Alan düzen kılavuzlarını etkinleştirdiğinizden emin olun. Bunun için Xcode 9+ çalıştırmanız ve iOS 9+ sürümünü hedeflemeniz gerekir.

Arayüz Oluşturucu dosyanızı açın ve görünüm denetleyici sahnenizi tıklayın. Sağda Arayüz Oluşturucu Belgesi seçeneklerini görürsünüz. Güvenli Alan Düzeni Kılavuzlarını Kullan'ı işaretleyin ve minimum olarak iOS 9.0 ve sonraki sürümler için uygulama oluşturduğunuzdan emin olun.

Genişlik ve yükseklik kısıtlamalarını kullanarak banner'ı gereken boyutla sınırlandırmanızı öneririz.

Artık GAMBannerView'un Üst ö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 Alt özelliğini güvenli alanın alt kısmıyla sınırlayarak banner'ı Güvenli Alanın alt kısmına hizalayabilirsiniz:

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

ViewController

Aşağıda, yukarıdaki resimli taslakta yapılandırıldığı şekilde GAMBannerView üzerinde banner göstermek için gereken minimum işlemi yapan basit bir görüntüleme denetleyicisi kod snippet'i verilmiştir:

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

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

Tam genişlikte, sola veya sağa hizalı bir banner kullanmak istiyorsanız banner'ın sol/sağ kenarını, üst görünümün sol/sağ kenarını değil, Güvenli Alanın sol/sağ kenarıyla sınırlayın.

Güvenli Alan Düzeni Kılavuzlarını Kullan seçeneğini etkinleştirdiyseniz arayüz oluşturucu, görünüme kısıtlamalar eklerken varsayılan olarak güvenli alan kenarlarını kullanır.

iOS 8 ve önceki sürümleri destekleme

Arayüz Oluşturucu'yu kullanarak iOS 8 veya önceki sürümleri desteklemek istiyorsanız Arayüz Oluşturucu dosyalarınız ve film şeridiniz için Güvenli Alan Düzeni Kılavuzları'nı kullan seçeneğinin işaretini kaldırın.

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

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

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

Bu işlem, banner'ın kenarını görüş/Güvenli Alan'ın kenarından biraz uzaklaştırarak iPhone X'te yatay yönde herhangi bir işlem yapılmamasını sağlar. İstediğiniz sonucu programatik olarak da elde edebilirsiniz.

Programatik

Uygulamanız programatik olarak banner reklamlar oluşturuyorsa kısıtlamalar tanımlayabilir ve banner reklamı kod içinde 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ırlanacağı gösterilmektedir:

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

Yukarıdaki teknikler, kullanılan özellikler ve çapalar değiştirilerek güvenli alanın üst kısmıyla sınırlı tutmak için kolayca kullanılabilir.

Yerel reklamlar

Uygulamanız doğal reklamları ekranın üst veya alt kısmına sabitliyorsa yerel reklamlar için de banner reklamlar için geçerli olan ilkeler geçerlidir. Temel fark bir GAMBannerView öğesine kısıtlamalar eklemek yerine, Güvenli Alan düzen kılavuzlarına uymak için GADNativeAppInstallAdView ve GADNativeContentAdView (veya reklamın kapsayıcı görünümü) için kısıtlamalar eklemeniz gerekir. Yerel görünümler için daha açık boyut kısıtlamaları sağlamanızı öneririz.

Geçiş 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. Kapat 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 belgeler sayfasını güncelleyeceğiz.