Rendering Iklan iPhone X

Panduan ini menunjukkan praktik terbaik tentang cara membuat kode aplikasi untuk merender iklan dengan benar di iPhone X.

Prasyarat

Iklan banner harus ditempatkan di "Area Aman" agar tidak terhalang oleh sudut melengkung, dudukan sensor, dan indikator layar Utama. Di halaman ini, Anda akan menemukan contoh cara menambahkan batasan untuk memosisikan banner di bagian atas atau bawah Area Aman. Batasan storyboard dan terprogram ditunjukkan di lingkungan yang mendukung iOS 9+ dan Xcode 9+. Solusi untuk versi iOS dan Xcode sebelumnya juga dicatat.

Storyboard/Interface Builder

Jika aplikasi Anda menggunakan Interface Builder, pertama-tama, pastikan Anda telah mengaktifkan panduan tata letak Area Aman. Untuk melakukannya, Anda harus menjalankan Xcode 9+ dan menargetkan iOS 9+.

Buka file Interface Builder Anda dan klik adegan view controller Anda. Anda akan melihat opsi Interface Builder Document di sebelah kanan. Periksa Gunakan Panduan Tata Letak Area Aman dan pastikan Anda membangun untuk iOS 9.0 dan yang lebih baru sebagai minimum.

Sebaiknya batasi banner ke ukuran yang diperlukan menggunakan batasan lebar dan tinggi.

Sekarang Anda dapat menyelaraskan banner ke bagian atas Area Aman dengan membatasi properti Atas GAMBannerView ke bagian atas Area Aman:

Demikian pula, Anda dapat menyelaraskan banner ke bagian bawah Area Aman dengan membatasi properti Bottom GAMBannerView ke bagian bawah area aman:

Batasan Anda sekarang akan terlihat seperti screenshot di bawah (pengukuran/pemosisian dapat bervariasi):

ViewController

Berikut adalah cuplikan kode pengontrol tampilan sederhana yang melakukan hal minimum yang diperlukan untuk menampilkan banner di GAMBannerView seperti yang dikonfigurasi di storyboard di atas:

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

Menyelaraskan banner ke tepi area aman

Jika Anda ingin memiliki banner dengan lebar penuh, rata kiri atau kanan, batasi tepi kiri/kanan banner ke tepi kiri/kanan Area Aman dan bukan tepi kiri/kanan superview.

Jika Anda mengaktifkan Gunakan Panduan Tata Letak Area Aman, pembuat antarmuka akan secara default menggunakan tepi area aman saat menambahkan batasan ke tampilan.

Mendukung iOS 8 dan yang lebih lama

Jika Anda ingin mendukung iOS 8 atau yang lebih lama menggunakan Interface Builder, Anda harus menghapus centang pada Use Safe Area Layout Guides untuk file Interface Builder dan papan cerita.

Sekarang Anda dapat menambahkan batasan ke bagian bawah panduan tata letak atas (bukan bagian atas Area Aman):

Tambahkan juga batasan ke bagian atas panduan tata letak bawah (bukan bagian bawah Area Aman):

Untuk banner lebar penuh (hanya terpengaruh oleh Area Aman dalam lanskap), panduan tata letak ini tidak ada. Opsi aman di Interface Builder membuat batasan tepi kiri dan kanan Anda relatif terhadap margin:

Hal ini akan mengimbangi tepi banner sedikit dari tepi superview/Area Aman, memastikan bahwa banner Anda tidak akan terhalang dalam orientasi lanskap di iPhone X. Anda juga dapat mencapai hasil yang diinginkan secara terprogram.

Terprogram

Jika aplikasi Anda membuat iklan banner secara terprogram, Anda dapat menentukan batasan dan memosisikan iklan banner dalam kode. Contoh ini (untuk iOS versi 7.0 dan yang lebih baru) menunjukkan cara membatasi banner agar dipusatkan secara horizontal di bagian bawah Area Aman:

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

Teknik di atas dapat dengan mudah digunakan untuk membatasi ke bagian atas area aman dengan mengubah atribut dan anchor yang digunakan.

Iklan native

Jika aplikasi Anda menyematkan iklan native di bagian atas atau bawah layar, prinsip yang sama berlaku untuk iklan native seperti halnya untuk iklan banner. Perbedaan utamanya adalah, alih-alih menambahkan batasan ke GAMBannerView, Anda perlu menambahkan batasan ke GADNativeAppInstallAdView dan GADNativeContentAdView (atau tampilan yang berisi iklan) untuk mematuhi panduan tata letak Area Aman. Untuk tampilan native, sebaiknya berikan batasan ukuran yang lebih eksplisit.

Iklan interstisial dan reward

Format iklan layar penuh, termasuk iklan interstisial dan reward, dirender oleh Google Mobile Ads SDK. Akan ada update pada Google Mobile Ads SDK untuk memastikan elemen iklan seperti tombol tutup dirender di tempat yang tepat. Kami akan memperbarui catatan rilis dan halaman dokumentasi ini saat perubahan ini tersedia.