Iklan banner adalah iklan persegi panjang yang menempati sebagian tata letak aplikasi. Iklan akan tetap berada di layar saat pengguna berinteraksi dengan aplikasi, yang ditempatkan di bagian atas atau bawah layar atau sebaris dengan konten saat pengguna men-scroll. Iklan banner dapat dimuat ulang secara otomatis setelah jangka waktu tertentu. Lihat Ringkasan iklan banner untuk mengetahui informasi selengkapnya.
Panduan ini menunjukkan cara memulai iklan banner adaptif beranchor, 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 aspek tetap, bukan iklan ukuran tetap reguler. Rasio aspeknya mirip dengan standar industri 320x50. Setelah Anda menentukan lebar penuh yang tersedia, iklan dengan tinggi optimal untuk lebar tersebut akan ditampilkan. Tinggi optimal tidak berubah di seluruh permintaan dari perangkat yang sama, dan tampilan di sekitarnya tidak perlu berpindah saat iklan dimuat ulang.
Prasyarat
- Selesaikan Panduan memulai.
Selalu lakukan pengujian dengan iklan percobaan
Saat membuat 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 percobaan adalah dengan menggunakan ID unit iklan percobaan khusus kami untuk banner iOS:
ca-app-pub-3940256099942544/2435281174
ID ini telah dikonfigurasi secara khusus untuk menampilkan iklan pengujian untuk setiap permintaan, dan Anda bebas menggunakannya di aplikasi Anda sendiri saat melakukan coding, pengujian, dan pen-debugan. Pastikan Anda menggantinya dengan ID unit iklan Anda sendiri sebelum memublikasikan aplikasi.
Untuk mengetahui 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 di-instantiate 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
Anda 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],
]];
Pembuat Antarmuka
Anda dapat menambahkan GADBannerView
ke storyboard atau file xib. Saat menggunakan metode ini, pastikan 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, sekarang 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
merepresentasikan 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 mematuhi kecepatan refresh yang Anda tentukan di UI AdMob. Jika Anda belum mengaktifkan pengambilan data, kirim permintaan baru. Untuk mengetahui detail selengkapnya tentang refresh unit iklan, seperti menetapkan kecepatan refresh, lihat Menggunakan refresh otomatis untuk iklan Banner.
Peristiwa iklan
Dengan menggunakan GADBannerViewDelegate
, Anda dapat memproses peristiwa siklus proses,
seperti saat iklan ditutup atau pengguna keluar dari aplikasi.
Mendaftar untuk acara banner
Untuk mendaftar ke peristiwa iklan banner, tetapkan properti delegate
di
GADBannerView
ke objek yang menerapkan protokol
GADBannerViewDelegate
. Secara umum, class yang mengimplementasikan iklan banner juga bertindak sebagai class delegasi, yang dalam hal ini, properti delegate
dapat ditetapkan ke self
.
Swift
bannerView.delegate = self
SwiftUI
banner.delegate = context.coordinator
Objective-C
self.bannerView.delegate = self;
Menerapkan peristiwa banner
Setiap metode di GADBannerViewDelegate
ditandai sebagai opsional, jadi Anda
hanya perlu mengimplementasikan metode yang Anda inginkan. 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 API iOS.
Kasus penggunaan
Berikut adalah beberapa contoh kasus penggunaan untuk metode peristiwa iklan ini.
Menambahkan banner ke hierarki tampilan setelah iklan diterima
Anda mungkin ingin 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 iklan tersebut 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 untuk metode
GADBannerViewDelegate
ini.
Untuk menangkap semua jenis presentasi overlay atau pemanggilan browser eksternal, bukan
hanya yang berasal dari klik iklan, aplikasi Anda sebaiknya memproses metode yang setara di UIViewController
atau UIApplication
. Berikut adalah tabel yang menampilkan metode iOS yang setara yang dipanggil pada saat yang sama 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. Sebaiknya gunakan fitur ini untuk mengoptimalkan performa Anda lebih lanjut. Lihat iklan banner yang dapat diciutkan untuk mengetahui detail selengkapnya.
Banner adaptif inline
Banner adaptif inline adalah banner yang lebih besar dan lebih tinggi dibandingkan dengan banner adaptif anchor. Banner ini memiliki tinggi yang bervariasi, dan dapat setinggi layar perangkat. Banner adaptif inline direkomendasikan daripada iklan banner adaptif anchor untuk aplikasi yang menempatkan iklan banner di konten yang dapat di-scroll. Lihat banner adaptif inline untuk mengetahui detail selengkapnya.