Iklan Banner

Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

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

/21775744923/example/adaptive-banner

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 GAMBannerView

Iklan banner ditampilkan dalam objek GAMBannerView, jadi langkah pertama untuk mengintegrasikan iklan banner adalah menyertakan GAMBannerView dalam hierarki tampilan Anda. Hal ini biasanya dilakukan secara terprogram atau melalui Interface Builder.

Secara terprogram

GAMBannerView juga dapat dibuat instance-nya secara langsung. Contoh berikut membuat GAMBannerView:

// 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 GAMBannerView 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 GAMBannerView diterapkan dan propertinya, seperti adUnitID, dikonfigurasi, kini saatnya memuat iklan. Hal ini dilakukan dengan memanggil loadRequest: pada objek GAMRequest:

bannerView.load(AdManagerRequest())
ViewController.swift

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

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

Objek GAMRequest 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 Ad Manager. Jika Anda belum mengaktifkan refresh, buat permintaan baru. Untuk mengetahui detail selengkapnya tentang pembaruan unit iklan, seperti menyetel kecepatan refresh, lihat Kecepatan refresh untuk iklan di aplikasi seluler.

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 GAMBannerView 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 GAMBannerView 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:(GAMBannerView *)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:(GAMBannerView *)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:

Penghitungan tayangan manual

Anda dapat mengirim ping tayangan secara manual ke Ad Manager jika memiliki kondisi khusus untuk waktu pencatatan tayangan. Hal ini dapat dilakukan dengan mengaktifkan GAMBannerView untuk tayangan manual terlebih dahulu sebelum memuat iklan:

bannerView.enableManualImpressions = true

self.bannerView.enableManualImpressions = YES;

Saat menentukan bahwa iklan telah berhasil ditampilkan dan ada di layar, Anda dapat memicu tayangan secara manual:

bannerView.recordImpression()

[self.bannerView recordImpression];

Peristiwa aplikasi

Peristiwa aplikasi memungkinkan Anda membuat iklan yang dapat mengirim pesan ke kode aplikasinya. Aplikasi kemudian dapat mengambil tindakan berdasarkan pesan ini.

Anda dapat memproses peristiwa aplikasi khusus Ad Manager menggunakan GADAppEventDelegate. Peristiwa ini dapat terjadi kapan saja selama siklus proses iklan, bahkan sebelum bannerViewDidReceiveAd: objek GADBannerViewDelegate dipanggil.

// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.

// Called when the banner receives an app event.
optional public func bannerView(_ banner: AdManagerBannerView,
    didReceiveAppEvent name: String, withInfo info: String?)

// Implement your app event within this method. The delegate will be
// notified when the SDK receives an app event message from the ad.

@optional
// Called when the banner receives an app event.
-   (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info;

Metode peristiwa aplikasi Anda dapat diterapkan di pengontrol tampilan:

import GoogleMobileAds

class ViewController: UIViewController, AppEventDelegate {}

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {}

@end

Jangan lupa untuk menetapkan delegasi menggunakan properti appEventDelegate sebelum membuat permintaan untuk iklan.

bannerView.appEventDelegate = self

self.bannerView.appEventDelegate = self;

Berikut adalah contoh yang menunjukkan cara mengubah warna latar belakang aplikasi dengan menentukan warna melalui peristiwa aplikasi:

func bannerView(_ banner: AdManagerBannerView, didReceiveAppEvent name: String,
    withInfo info: String?) {
  if name == "color" {
    guard let info = info else { return }
    switch info {
    case "green":
      // Set background color to green.
      view.backgroundColor = UIColor.green
    case "blue":
      // Set background color to blue.
      view.backgroundColor = UIColor.blue
    default:
      // Set background color to black.
      view.backgroundColor = UIColor.black
    }
  }
}

- (void)bannerView:(GAMBannerView *)banner
    didReceiveAppEvent:(NSString *)name
              withInfo:(NSString *)info {
  if ([name isEqual:@"color"]) {
    if ([info isEqual:@"green"]) {
      // Set background color to green.
      self.view.backgroundColor = [UIColor greenColor];
    } else if ([info isEqual:@"blue"]) {
      // Set background color to blue.
      self.view.backgroundColor = [UIColor blueColor];
    } else {
      // Set background color to black.
      self.view.backgroundColor = [UIColor blackColor];
    }
  }
}

Berikut adalah materi iklan yang sesuai yang mengirim pesan peristiwa aplikasi warna ke appEventDelegate:

<html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0px;
      left: 0px;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>

Lihat contoh Peristiwa Aplikasi Ad Manager untuk penerapan peristiwa aplikasi di aplikasi Demo iOS API.

Swift Objective-C

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