Iklan banner

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:

// 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),
])
BannerSnippets.swift

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)
  }
BannerContentView.swift

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)
}
BannerContentView.swift

// 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],
]];
BannerSnippets.m

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:

// Request an anchored adaptive banner with a width of 375.
bannerView.adSize = currentOrientationAnchoredAdaptiveBanner(width: 375)
ViewController.swift

// Request an anchored adaptive banner with a width of 375.
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(375);
ViewController.m

Memuat iklan

Setelah GADBannerView diterapkan dan propertinya, seperti adUnitID, dikonfigurasi, kini saatnya memuat iklan. Hal ini dilakukan dengan memanggil loadRequest: pada objek GADRequest:

bannerView.load(Request())
ViewController.swift

banner.adUnitID = "ca-app-pub-3940256099942544/2435281174"
banner.load(Request())
BannerContentView.swift

[self.bannerView loadRequest:[GADRequest request]];
ViewController.m

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.

bannerView.delegate = self
ViewController.swift

banner.delegate = context.coordinator
BannerContentView.swift

self.bannerView.delegate = self;
ViewController.m

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:

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)
}
ViewController.swift

- (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");
}
ViewController.m

Lihat contoh Ad Delegate untuk penerapan metode delegasi banner di aplikasi Demo iOS API.

Swift Objective-C

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::

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  // Add banner to view and add constraints.
  addBannerViewToView(bannerView)
}

- (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:

func bannerViewDidReceiveAd(_ bannerView: BannerView) {
  bannerView.alpha = 0
  UIView.animate(withDuration: 1, animations: {
    bannerView.alpha = 1
  })
}

- (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:

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.

Jelajahi topik lainnya

• Privasi pengguna