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, yuvarlak köşeler, sensör muhafazası ve ana sayfa göstergesi tarafından engellenmemesi için "Güvenli Alan" içine yerleştirilmelidir. Bu sayfada, bir banner'ı güvenli alanın üst veya alt kısmına yerleştirmek için nasıl kısıtlama ekleyeceğinizle ilgili örnekler bulabilirsiniz.

Storyboard/Interface Builder

Uygulamanızda Interface Builder kullanılıyorsa öncelikle Güvenli Alan düzen kılavuzlarını etkinleştirdiğinizden emin olun. Bunun için Xcode 9 veya sonraki bir sürümü kullanmanız ve iOS 9 veya sonraki bir sürümü hedeflemeniz gerekir.

Interface Builder dosyanızı açın ve görünüm denetleyici sahnenizi tıklayın. Sağ tarafta Interface Builder Document (Arayüz Oluşturucu Belgesi) seçeneklerini görürsünüz. Use Safe Area Layout Guides (Güvenli Alan Düzeni Kılavuzlarını Kullan) seçeneğini işaretleyin ve en az iOS 9.0 ve sonraki sürümler için derleme yaptığınızdan emin olun.

Banner'ı genişlik ve yükseklik kısıtlamalarını kullanarak gereken boyuta sınırlamanızı öneririz.

Artık GADBannerView'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, GADBannerView'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:

Sınırlamalarınız aşağıdaki ekran görüntüsüne benzer şekilde görünmelidir (boyutlandırma/konumlandırma değişiklik gösterebilir):

ViewController

Yukarıdaki görsel taslakta yapılandırıldığı gibi bir GADBannerView içinde banner göstermek için gereken minimum işlemi yapan basit bir görünüm denetleyici kod snippet'i aşağıda verilmiştir:

Swift

class ViewController: UIViewController {

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

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

}

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

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

Sola veya sağa hizalanmış bir banner istiyorsanız banner'ın sol/sağ kenarını, üst görünümün sol/sağ kenarına değil, güvenli alanın sol/sağ kenarına 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ıtlama eklerken varsayılan olarak güvenli alan kenarlarını kullanır.

Programatik

Uygulamanız banner reklamları programatik olarak oluşturuyorsa kısıtlamalar tanımlayabilir ve banner reklamı kodda konumlandırabilirsiniz. Bu örnekte, bir banner'ın güvenli alanın alt kısmında yatay olarak ortalanacak şekilde nasıl kısıtlanacağı gösterilmektedir:

Swift

class ViewController: UIViewController {

  var bannerView: BannerView!

  override func viewDidLoad() {
    super.viewDidLoad()

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

  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

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

Akıllı banner'lar

Akıllı banner'ları özellikle yatay modda kullanıyorsanız banner kenarlarını güvenli alanın sol ve sağ kenarlarına hizalamak için kısıtlamalar kullanmanızı öneririz.

Arayüz oluşturucuda bu, Güvenli Alan Düzeni Kılavuzlarını Kullan seçeneği işaretlenerek iOS 9'a kadar desteklenir. Yukarıda açıklandığı gibi.

Kodda, kenar kısıtlamalarınızı mümkün olduğunda güvenli alan düzen kılavuzlarına göre ayarlamanız gerekir. Aşağıdaki kod snippet'i, görünüme bir banner görünümü ekler ve görünümün alt kısmıyla sınırlandırır (tam genişlik):

Swift

func addBannerViewToView(_ bannerView: BannerView) {
  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]];
}

Yerel reklamlar

Uygulamanız doğal reklamları ekranın üst veya alt kısmına sabitliyorsa doğal reklamlar için de banner reklamlarla aynı ilkeler geçerlidir. Temel fark, güvenli alan düzeni kılavuzlarına uymak için GADBannerView öğesine kısıtlama eklemek yerine GADNativeAdView öğenize (veya reklamı içeren görünüme) kısıtlama eklemeniz gerekmesidir. Doğal görünümler için daha belirgin boyut kısıtlamaları sağlamanızı öneririz.

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

Sürüm 7.26.0 itibarıyla Google Mobile Ads SDK, iPhone X için geçiş reklamı ve ödüllü reklam biçimlerini tam olarak desteklemektedir.