Iklan banner adalah iklan persegi panjang yang menempati sebagian tata letak aplikasi. Iklan tetap berada di layar saat pengguna berinteraksi dengan aplikasi, baik yang ditempatkan di bagian atas atau bawah layar atau sejajar dengan konten saat pengguna men-scroll. Iklan banner dapat dimuat ulang secara otomatis setelah jangka waktu tertentu. Lihat Ringkasan iklan banner untuk informasi selengkapnya.
Panduan ini menunjukkan cara memulai iklan banner adaptif yang diatarkan, yang memaksimalkan performa dengan mengoptimalkan ukuran iklan untuk setiap perangkat menggunakan lebar iklan yang Anda tentukan.
Banner adaptif anchor
Iklan banner adaptif anchor adalah iklan rasio lebar tinggi tetap, bukan iklan ukuran tetap reguler. Rasio aspeknya mirip dengan standar industri 320x50. Setelah Anda menentukan lebar penuh yang tersedia, iklan akan menampilkan iklan dengan tinggi yang optimal untuk lebar tersebut. Tinggi optimal tidak berubah di seluruh permintaan dari perangkat yang sama, dan tampilan di sekitarnya tidak perlu dipindahkan saat iklan dimuat ulang.
Prasyarat
- Selesaikan Panduan memulai.
Selalu uji dengan iklan percobaan
Saat mem-build dan menguji aplikasi, pastikan Anda menggunakan iklan percobaan, bukan iklan produksi langsung. Jika Anda tidak melakukannya, akun Anda dapat ditangguhkan.
Cara termudah untuk memuat iklan pengujian adalah dengan menggunakan ID unit iklan pengujian khusus kami untuk banner iOS:
ca-app-pub-3940256099942544/2435281174
Iklan ini telah dikonfigurasi secara khusus untuk menampilkan iklan pengujian untuk setiap permintaan, dan Anda dapat menggunakannya di aplikasi Anda sendiri saat melakukan coding, pengujian, dan proses debug. Pastikan saja Anda menggantinya dengan ID unit iklan Anda sendiri sebelum memublikasikan aplikasi.
Untuk informasi selengkapnya tentang cara kerja iklan percobaan Mobile Ads SDK, lihat Iklan Percobaan.
Membuat GADBannerView
Iklan banner ditampilkan dalam objek GADBannerView
, jadi langkah pertama untuk mengintegrasikan iklan banner adalah menyertakan GADBannerView
dalam hierarki tampilan Anda. Hal ini biasanya dilakukan secara terprogram atau
melalui Interface Builder.
Secara terprogram
GADBannerView
juga dapat dibuat instance-nya secara langsung.
Contoh berikut membuat GADBannerView
:
Swift
// Initialize the BannerView.
bannerView = BannerView()
bannerView.translatesAutoresizingMaskIntoConstraints = false
view.addSubview(bannerView)
// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
NSLayoutConstraint.activate([
// Align the banner's bottom edge with the safe area's bottom edge
bannerView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
// Center the banner horizontally in the view
bannerView.centerXAnchor.constraint(equalTo: view.centerXAnchor),
])
SwiftUI
Untuk menggunakan BannerView
, buat UIViewRepresentable
:
private struct BannerViewContainer: UIViewRepresentable {
typealias UIViewType = BannerView
let adSize: AdSize
init(_ adSize: AdSize) {
self.adSize = adSize
}
func makeUIView(context: Context) -> BannerView {
let banner = BannerView(adSize: adSize)
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
banner.delegate = context.coordinator
return banner
}
func updateUIView(_ uiView: BannerView, context: Context) {}
func makeCoordinator() -> BannerCoordinator {
return BannerCoordinator(self)
}
Tambahkan UIViewRepresentable
ke hierarki tampilan, dengan menentukan nilai height
dan
width
:
var body: some View {
Spacer()
// Request an anchored adaptive banner with a width of 375.
let adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
BannerViewContainer(adSize)
.frame(width: adSize.size.width, height: adSize.size.height)
}
Objective-C
// Initialize the GADBannerView.
self.bannerView = [[GADBannerView alloc] init];
self.bannerView.translatesAutoresizingMaskIntoConstraints = NO;
[self.view addSubview:self.bannerView];
// This example doesn't give width or height constraints, as the ad size gives the banner an
// intrinsic content size to size the view.
[NSLayoutConstraint activateConstraints:@[
// Align the banner's bottom edge with the safe area's bottom edge
[self.bannerView.bottomAnchor constraintEqualToAnchor:self.view.safeAreaLayoutGuide.bottomAnchor],
// Center the banner horizontally in the view
[self.bannerView.centerXAnchor constraintEqualToAnchor:self.view.centerXAnchor],
]];
Interface Builder
Anda dapat menambahkan GADBannerView
ke file storyboard atau xib. Saat menggunakan metode
ini, pastikan untuk hanya menambahkan batasan posisi pada banner. Misalnya,
saat menampilkan banner adaptif di bagian bawah layar, tetapkan bagian bawah
tampilan banner sama dengan bagian atas Panduan Tata Letak Bawah, dan tetapkan
batasan
centerX
sama dengan centerX
superview.
Ukuran iklan banner masih ditetapkan secara terprogram:
Swift
// Request an anchored adaptive banner with a width of 375.
bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
Objective-C
// Request an anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(375);
Memuat iklan
Setelah GADBannerView
diterapkan dan propertinya, seperti adUnitID
,
dikonfigurasi, kini saatnya memuat iklan. Hal ini dilakukan dengan memanggil loadRequest:
pada objek GADRequest
:
Swift
bannerView.load(Request())
SwiftUI
banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
Objective-C
[self.bannerView loadRequest:[GADRequest request]];
Objek GADRequest
mewakili satu permintaan iklan, dan berisi properti
untuk hal-hal seperti informasi penargetan.
Memperbarui iklan
Jika mengonfigurasi unit iklan untuk dimuat ulang, Anda tidak perlu meminta iklan lain saat iklan gagal dimuat. Google Mobile Ads SDK mengikuti kecepatan refresh apa pun yang Anda tentukan di UI AdMob. Jika Anda belum mengaktifkan refresh, buat permintaan baru. Untuk mengetahui detail selengkapnya tentang pembaruan unit iklan, seperti menetapkan kecepatan refresh, lihat Menggunakan pembaruan otomatis untuk iklan Banner.
Peristiwa iklan
Melalui penggunaan GADBannerViewDelegate
, Anda dapat memproses peristiwa siklus proses,
seperti saat iklan ditutup atau pengguna keluar dari aplikasi.
Mendaftar untuk peristiwa banner
Untuk mendaftar ke peristiwa iklan banner, tetapkan properti delegate
di
GADBannerView
ke objek yang menerapkan
protokol GADBannerViewDelegate
. Umumnya, class yang mengimplementasikan iklan banner
juga bertindak sebagai class delegasi. Dalam hal ini, properti delegate
dapat
ditetapkan ke self
.
Swift
bannerView.delegate = self
SwiftUI
banner.delegate = context.coordinator
Objective-C
self.bannerView.delegate = self;
Mengimplementasikan peristiwa banner
Setiap metode di GADBannerViewDelegate
ditandai sebagai opsional, sehingga Anda
hanya perlu menerapkan metode yang diinginkan. Contoh ini mengimplementasikan setiap metode
dan mencatat pesan ke konsol:
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
print(#function)
}
func bannerView(_ bannerView: BannerView, didFailToReceiveAdWithError error: Error) {
print(#function + ": " + error.localizedDescription)
}
func bannerViewDidRecordClick(_ bannerView: BannerView) {
print(#function)
}
func bannerViewDidRecordImpression(_ bannerView: BannerView) {
print(#function)
}
func bannerViewWillPresentScreen(_ bannerView: BannerView) {
print(#function)
}
func bannerViewWillDismissScreen(_ bannerView: BannerView) {
print(#function)
}
func bannerViewDidDismissScreen(_ bannerView: BannerView) {
print(#function)
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidReceiveAd");
}
- (void)bannerView:(GADBannerView *)bannerView didFailToReceiveAdWithError:(NSError *)error {
NSLog(@"bannerView:didFailToReceiveAdWithError: %@", [error localizedDescription]);
}
- (void)bannerViewDidRecordImpression:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidRecordImpression");
}
- (void)bannerViewWillPresentScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewWillPresentScreen");
}
- (void)bannerViewWillDismissScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewWillDismissScreen");
}
- (void)bannerViewDidDismissScreen:(GADBannerView *)bannerView {
NSLog(@"bannerViewDidDismissScreen");
}
Lihat contoh Ad Delegate untuk penerapan metode delegasi banner di aplikasi Demo iOS API.
Kasus penggunaan
Berikut adalah beberapa contoh kasus penggunaan untuk metode peristiwa iklan ini.
Menambahkan banner ke hierarki tampilan setelah iklan diterima
Sebaiknya Anda menunda penambahan GADBannerView
ke
hierarki tampilan hingga setelah iklan diterima. Anda dapat melakukannya dengan memproses
peristiwa bannerViewDidReceiveAd:
:
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
// Add banner to view and add constraints.
addBannerViewToView(bannerView)
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
// Add bannerView to view and add constraints as above.
[self addBannerViewToView:self.bannerView];
}
Menganimasikan iklan banner
Anda juga dapat menggunakan peristiwa bannerViewDidReceiveAd:
untuk menganimasikan iklan banner setelah
ditampilkan, seperti yang ditunjukkan dalam contoh berikut:
Swift
func bannerViewDidReceiveAd(_ bannerView: BannerView) {
bannerView.alpha = 0
UIView.animate(withDuration: 1, animations: {
bannerView.alpha = 1
})
}
Objective-C
- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
bannerView.alpha = 0;
[UIView animateWithDuration:1.0 animations:^{
bannerView.alpha = 1;
}];
}
Menjeda dan melanjutkan aplikasi
Protokol GADBannerViewDelegate
memiliki metode untuk memberi tahu Anda tentang peristiwa, seperti
saat klik menyebabkan overlay ditampilkan atau ditutup. Jika Anda ingin
melacak apakah peristiwa ini disebabkan oleh iklan, daftar ke metode
GADBannerViewDelegate
ini.
Untuk menangkap semua jenis presentasi overlay atau pemanggilan browser eksternal, bukan
hanya yang berasal dari klik iklan, sebaiknya aplikasi Anda memproses
metode yang setara di UIViewController
atau UIApplication
. Berikut adalah tabel
yang menunjukkan metode iOS yang setara yang dipanggil secara bersamaan dengan
metode GADBannerViewDelegate
:
Metode GADBannerViewDelegate | Metode iOS |
---|---|
bannerViewWillPresentScreen: |
viewWillDisappear: UIViewController |
bannerViewWillDismissScreen: |
viewWillAppear: UIViewController |
bannerViewDidDismissScreen: |
viewDidAppear: UIViewController |
Referensi lainnya
Contoh di GitHub
- Contoh iklan banner adaptif anchor: Swift | SwiftUI | Objective-C
- Demo fitur lanjutan: Swift | Objective-C
Langkah berikutnya
Banner yang dapat diciutkan
Iklan banner yang dapat diciutkan adalah iklan banner yang awalnya ditampilkan sebagai overlay yang lebih besar, dengan tombol untuk menciutkan iklan ke ukuran yang lebih kecil. Pertimbangkan untuk menggunakannya untuk mengoptimalkan performa Anda lebih lanjut. Lihat iklan banner yang dapat diciutkan untuk detail selengkapnya.
Banner adaptif inline
Banner adaptif inline adalah banner yang lebih besar dan lebih tinggi dibandingkan banner adaptif anchor. Banner ini memiliki tinggi variabel, dan dapat setinggi layar perangkat. Banner adaptif inline direkomendasikan daripada iklan banner adaptif anchor untuk aplikasi yang menempatkan iklan banner dalam konten yang dapat di-scroll. Lihat banner adaptif inline untuk mengetahui detail selengkapnya.