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 ya da alt kısmında konumlandırmaya ilişkin örnekler bulabilirsiniz. Hem taslak ardışık düzen hem de programatik kısıtlamalar, iOS 9 ve sonraki sürümleri 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ızda Interface Builder kullanılıyorsa öncelikle güvenli alan düzen kılavuzlarını etkinleştirdiğinizden emin olun. Bunu yapmak için Xcode 9 veya sonraki bir sürümü çalıştırmanız ve iOS 9 veya sonraki bir sürümü hedeflemeniz gerekir.

Arayüz Oluşturucu dosyanızı açın ve görüntüleme denetleyicisi sahnenizi tıklayın. Sağ tarafta Arayüz Oluşturucu Belgesi seçeneklerini görürsünüz. Güvenli Alan Düzeni Kılavuzlarını Kullan'ı işaretleyin ve en az iOS 9.0 ve sonraki sürümler için derlediğinizden emin olun.

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

Artık GAMBannerView'ın Üst mülkünü Güvenli Alan'ın üst kısmına sınırlayarak banner'ı Güvenli Alan'ın üst kısmına hizalayabilirsiniz:

Benzer şekilde, GAMBannerView'ın Bottom mülkünü güvenli alanın alt kısmına bağlayarak banner'ı güvenli alanın alt kısmına hizalayabilirsiniz:

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

ViewController

Aşağıda, yukarıdaki taslakta yapılandırıldığı gibi bir GAMBannerView'te banner göstermek için gereken minimum işlemleri yapan basit bir görüntü kontrol cihazı 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 = "/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];
}

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

Tam genişlikte, sola veya sağa hizalanmış bir banner kullanmak istiyorsanız banner'ın sol/sağ kenarını süper görüntünü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 ayarını etkinleştirdiyseniz arayüz oluşturucu, görünüme kısıtlama eklerken varsayılan olarak güvenli alan kenarlarını kullanır.

iOS 8 ve önceki sürümleri destekler

Interface Builder'ı kullanarak iOS 8 veya önceki sürümleri desteklemek istiyorsanız Interface Builder dosyalarınız ve taslak panolarınız için Güvenli Alan Düzenleme Kılavuzlarını Kullan seçeneğinin işaretini kaldırmanız gerekir.

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

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

Tam genişlikli banner'lar (yalnızca yatay modda Güvenli Alan'dan etkilenir) için bu düzen kılavuzları geçerli 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 ayarlamanızı sağlar:

Bu işlem, banner'ın kenarını süper görüntü/Güvenli Alan kenarından biraz uzaklaştırır. Böylece banner'ınız iPhone X'te yatay yönde engellenmez. İstediğiniz sonuca programatik olarak da ulaşabilirsiniz.

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 ortalanacağı şekilde nasıl kısıtlanacağı 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 = "/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

Yukarıdaki teknikler, kullanılan özellikleri ve ankrajları değiştirerek güvenli alanın üst kısmına kısıtlamak için kolayca kullanılabilir.

Yerel reklamlar

Uygulamanız doğal reklamları ekranın üst veya alt kısmına sabitliyorsa doğal reklamlar için banner reklamlar ile aynı ilkeler geçerlidir. Aradaki temel fark, güvenli alan düzeni kılavuzlarına uymak için GAMBannerView yerine GADNativeAppInstallAdView ve GADNativeContentAdView'nize (veya reklamın kapsayıcı görünümüne) kısıtlama eklemeniz gerektiğidir. Yerel görüntülemeler 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. 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 doküman sayfasını güncelleyeceğiz.