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 bulat, 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 sebelumnya iOS dan Xcode juga dicantumkan.

Pembuat Papan Cerita/Antarmuka

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

Buka file Interface Builder dan klik pada scene pengontrol tampilan. Anda akan melihat opsi Interface Builder Document di sebelah kanan. Centang Use Safe Area Layout Guides dan pastikan Anda membangun aplikasi untuk iOS 9.0 dan yang lebih baru sebagai minimum.

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

Sekarang Anda dapat menyejajarkan banner ke bagian atas Area Aman dengan membatasi properti Top GAMBannerView ke bagian atas Area Aman:

Anda juga dapat menyelaraskan banner ke bagian bawah Area Aman dengan membatasi properti Bawah GAMBannerView ke bagian bawah area aman:

Batasan Anda kini akan terlihat seperti screenshot di bawah (penentuan ukuran/posisi dapat bervariasi):

ViewController

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

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

Menyejajarkan banner dengan tepi area aman

Jika Anda ingin membuat banner lebar penuh, rata kiri atau kanan, batasi tepi kiri/kanan banner ke tepi kiri/kanan Superview, bukan di tepi kiri/kanan superview.

Jika Anda telah mengaktifkan Gunakan Panduan Tata Letak Area Aman, builder 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 storyboard dan file Builder Antarmuka.

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 di bagian bawah Area Aman):

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

Tindakan ini akan sedikit mengimbangi tepi banner dari tepi superview/Area Aman, sehingga 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 membuat iklan banner secara terprogram, Anda dapat menentukan batasan dan menempatkan iklan banner dalam kode. Contoh ini (untuk iOS versi 7.0 dan yang lebih baru) menunjukkan cara membatasi banner agar diposisikan di tengah secara horizontal di bagian bawah Area Aman:

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

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

Iklan native

Jika aplikasi Anda menyematkan iklan native ke bagian atas atau bawah layar, prinsip yang sama berlaku untuk iklan native seperti untuk iklan banner. Perbedaan utamanya adalah, bukannya menambahkan batasan ke GAMBannerView, Anda harus menambahkan batasan ke GADNativeAppInstallAdView dan GADNativeContentAdView (atau tampilan yang memuatnya untuk 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.