Panduan ini menunjukkan praktik terbaik tentang cara membuat kode aplikasi untuk merender iklan dengan benar di iPhone X.
Prasyarat
- Impor Google Mobile Ads SDK versi 7.26.0 atau yang lebih tinggi, baik secara otomatis atau sebagai bagian dari Firebase.
Iklan banner
Iklan banner harus ditempatkan di "Area Aman" agar tidak terhalang oleh sudut membulat, kerangka sensor, dan indikator Beranda. Di halaman ini, Anda akan menemukan contoh cara menambahkan batasan untuk memosisikan banner ke bagian atas atau bawah Area Aman.
Pembuat Papan Cerita/Antarmuka
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 pada scene pengontrol tampilan. Anda akan melihat opsi Dokumen Builder Antarmuka di sebelah kanan. Periksa Use Safe Area Layout Guides dan pastikan Anda membuat minimal untuk iOS 9.0 dan yang lebih baru.
Sebaiknya batasi banner ke ukuran yang diperlukan menggunakan batasan lebar dan tinggi.
Sekarang Anda dapat menyejajarkan banner ke bagian atas Area Aman dengan membatasi properti Top GADBannerView ke bagian atas Area Aman:
Demikian pula, Anda dapat menyejajarkan banner ke bagian bawah Area Aman dengan membatasi properti Bottom GADBannerView ke bagian bawah area aman:
Batasan Anda sekarang akan terlihat seperti screenshot di bawah ini (penentuan ukuran/posisi dapat bervariasi):
ViewController
Berikut adalah cuplikan kode pengontrol tampilan sederhana yang melakukan jumlah minimum yang diperlukan untuk
menampilkan banner dalam GADBannerView
seperti yang dikonfigurasi di storyboard di atas:
Swift
class ViewController: UIViewController { /// The banner view. @IBOutlet var bannerView: GADBannerView! 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(GADRequest()) } }
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]; }
Menyejajarkan banner ke tepi area aman
Jika Anda ingin banner rata kiri atau kanan, batasi tepi kiri/kanan banner ke tepi kiri/kanan area aman, bukan tepi kiri/kanan superview.
Jika Anda mengaktifkan Use Safe Area Layout Guides, builder antarmuka akan secara default menggunakan tepi area aman saat menambahkan batasan ke tampilan.
Terprogram
Jika aplikasi membuat iklan banner secara terprogram, Anda dapat menentukan batasan dan memosisikan iklan banner dalam kode. Contoh ini menunjukkan cara membatasi banner agar diposisikan di tengah secara horizontal di bagian bawah Area Aman:
Swift
class ViewController: UIViewController { var bannerView: GADBannerView! override func viewDidLoad() { super.viewDidLoad() // Instantiate the banner view with your desired banner size. bannerView = GADBannerView(adSize: GADAdSizeBanner) 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(GADRequest()) } 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
Teknik di atas dapat dengan mudah digunakan untuk membatasi ke bagian atas area aman dengan mengubah atribut dan anchor yang digunakan.
Banner cerdas
Jika Anda menggunakan banner cerdas, terutama dalam orientasi lanskap, sebaiknya gunakan batasan untuk menyelaraskan tepi banner dengan tepi kiri dan kanan area aman.
Di builder antarmuka, hal ini didukung kembali ke iOS 9 dengan mencentang opsi Use Safe Area Layout Guides seperti yang diuraikan di atas.
Dalam kode, Anda harus membuat batasan tepi relatif terhadap panduan tata letak area aman jika tersedia. Berikut adalah cuplikan kode yang menambahkan tampilan banner ke tampilan dan membatasi ke bagian bawah tampilan, dengan lebar penuh:
Swift
func addBannerViewToView(_ bannerView: GADBannerView) { 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]]; }
Iklan native
Jika aplikasi Anda menyematkan iklan native ke bagian atas atau bawah layar, prinsip yang sama
berlaku untuk iklan native seperti pada iklan banner.
Perbedaan utamanya adalah, bukan menambahkan batasan ke GADBannerView
, Anda harus
menambahkan batasan ke GADUnifiedNativeAdView
(atau tampilan yang memuatnya
untuk iklan) agar dapat mematuhi panduan tata letak Area Aman. Untuk tampilan native,
sebaiknya berikan batasan ukuran yang lebih eksplisit.
Iklan interstisial dan reward
Mulai Versi 7.26.0, Google Mobile Ads SDK sepenuhnya mendukung format iklan interstisial dan reward untuk iPhone X.