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 dalam lingkungan yang mendukung iOS 9+ dan Xcode 9+. Solusi untuk versi sebelumnya iOS dan Xcode 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 dan klik tampilan pengontrol tampilan. Anda akan melihat opsi Interface Builder Document di sebelah kanan. Periksa Gunakan Panduan Tata Letak Area Aman dan pastikan Anda mem-build untuk iOS 9.0 dan yang lebih baru sebagai minimum.

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

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

Demikian pula, Anda dapat meratakan 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/pemosisi dapat bervariasi):

ViewController

Berikut adalah cuplikan kode pengontrol tampilan sederhana yang melakukan tindakan minimum yang diperlukan untuk menampilkan banner di GAMBannerView seperti yang dikonfigurasi dalam 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 = "/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];
}

Menyelaraskan banner ke tepi area aman

Jika Anda ingin memiliki banner dengan lebar penuh, sejajar 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, builder antarmuka akan menggunakan tepi area aman secara default saat menambahkan batasan ke tampilan.

Mendukung iOS 8 dan yang lebih lama

Jika ingin mendukung iOS 8 atau yang lebih lama menggunakan Interface Builder, Anda harus menghapus centang Gunakan Panduan Tata Letak Area Aman untuk file Interface Builder dan storyboard.

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:

Tindakan ini akan sedikit mengimbangi tepi banner dari tepi superview/Area Aman, sehingga memastikan 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: 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

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 ke bagian atas atau bawah layar, prinsip yang sama akan berlaku untuk iklan native seperti halnya untuk iklan banner. Perbedaan utamanya adalah, Anda harus menambahkan batasan ke GADNativeAppInstallAdView dan GADNativeContentAdView (atau tampilan penampung untuk iklan) untuk mengikuti panduan tata letak Area Aman, bukan menambahkan batasan ke GAMBannerView. 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 bahwa elemen iklan seperti tombol tutup dirender di tempat yang tepat. Kami akan memperbarui catatan rilis dan halaman dokumentasi ini saat perubahan ini tersedia.