Iklan banner

Pilih platform: Android iOS Unity Flutter

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

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

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

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

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

Objective-C

// 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, sekarang saatnya memuat iklan. Hal ini dilakukan dengan memanggil loadRequest: pada objek GADRequest:

Swift

bannerView.load(Request())
ViewController.swift

SwiftUI

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

Objective-C

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

Objek GADRequest merepresentasikan satu permintaan iklan, dan berisi properti untuk hal-hal seperti informasi penargetan.

Tips: Anda dapat menggunakan panggilan pemuatan iklan untuk membuat cache iklan yang telah dimuat sebelumnya sebelum Anda berencana menayangkannya, sehingga iklan dapat ditayangkan dengan latensi nol saat diperlukan. Karena masa berlaku iklan adalah satu jam, Anda harus menghapus cache ini dan memuat ulang dengan iklan baru setiap jam.

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.

Catatan: Saat menyetel kecepatan refresh di UI AdMob, refresh otomatis hanya terjadi jika banner terlihat di layar.

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

SwiftUI

banner.delegate = context.coordinator
BannerContentView.swift

Objective-C

self.bannerView.delegate = self;
ViewController.m

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

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

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

Swift Objective-C

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.

Jelajahi topik lainnya

• Privasi pengguna