Iklan Banner

Iklan banner menempati posisi di dalam tata letak aplikasi, baik di bagian atas maupun bawah layar perangkat. Iklan ini tetap berada di layar saat pengguna berinteraksi dengan aplikasi, dan dapat diperbarui secara otomatis setelah jangka waktu tertentu. Jika Anda baru menggunakan iklan seluler, iklan ini adalah awal yang bagus untuk memulai. Contoh kisah sukses.

Panduan ini menunjukkan cara mengintegrasikan iklan banner dariAdMob ke aplikasi iOS. Selain cuplikan kode dan petunjuk, panduan ini mencakup informasi tentang pengubahan ukuran banner dengan benar dan link ke referensi tambahan.

Prasyarat

• Selesaikan Panduan memulai.

Selalu uji dengan iklan uji coba

Saat membuat dan menguji aplikasi, pastikan Anda menggunakan iklan pengujian, bukan iklan produksi aktif. Jika Anda tidak melakukannya, akun Anda dapat ditangguhkan.

Cara termudah untuk memuat iklan pengujian adalah menggunakan ID unit iklan pengujian khusus kami untuk banner iOS: ca-app-pub-3940256099942544/2934735716

Aplikasi ini telah dikonfigurasi secara khusus guna menampilkan iklan pengujian untuk setiap permintaan, dan Anda bebas menggunakannya dalam aplikasi Anda sendiri saat membuat kode, menguji, dan men-debug. Pastikan Anda menggantinya dengan ID unit iklan Anda sendiri sebelum memublikasikan aplikasi.

Untuk informasi selengkapnya tentang cara kerja iklan pengujian Mobile Ads SDK, lihat Menguji Iklan.

Buat GADBannerView

Iklan banner ditampilkan di objek GADBannerView, sehingga langkah pertama untuk mengintegrasikan iklan banner adalah menyertakan GADBannerView dalam hierarki tampilan Anda. Hal ini biasanya dilakukan dengan Builder Antarmuka atau secara terprogram.

Pembuat Antarmuka

GADBannerView dapat ditambahkan ke storyboard atau file xib seperti tampilan umumnya. Saat menggunakan metode ini, pastikan untuk menambahkan batasan lebar dan tinggi agar cocok dengan ukuran iklan yang ingin ditampilkan. Misalnya, saat menampilkan banner (320x50), gunakan batasan lebar 320 titik, dan batasan tinggi 50 titik.

Secara terprogram

Instance GADBannerView juga dapat langsung dibuat. Berikut adalah contoh cara membuat GADBannerView, diratakan dengan bagian tengah bawah area aman layar, dengan ukuran banner 320x50:

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    
    // In this case, we instantiate the banner with desired ad size.
    bannerView = GADBannerView(adSize: GADAdSizeBanner)

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GADBannerView) {
    bannerView.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(bannerView)
    view.addConstraints(
      [NSLayoutConstraint(item: bannerView,
                          attribute: .bottom,
                          relatedBy: .equal,
                          toItem: view.safeAreaLayoutGuide,
                          attribute: .bottom,
                          multiplier: 1,
                          constant: 0),
       NSLayoutConstraint(item: bannerView,
                          attribute: .centerX,
                          relatedBy: .equal,
                          toItem: view,
                          attribute: .centerX,
                          multiplier: 1,
                          constant: 0)
      ])
   }
   
}

Objective-C

@import GoogleMobileAds;

@interface ViewController ()

@property(nonatomic, strong) GADBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GADBannerView alloc]
      initWithAdSize:GADAdSizeBanner];

  [self addBannerViewToView:self.bannerView];
}

- (void)addBannerViewToView:(UIView *)bannerView {
  bannerView.translatesAutoresizingMaskIntoConstraints = NO;
  [self.view addSubview:bannerView];
  [self.view addConstraints:@[
    [NSLayoutConstraint constraintWithItem:bannerView
                               attribute:NSLayoutAttributeBottom
                               relatedBy:NSLayoutRelationEqual
                                  toItem:self.view.safeAreaLayoutGuide
                               attribute:NSLayoutAttributeBottom
                              multiplier:1
                                constant:0],
    [NSLayoutConstraint constraintWithItem:bannerView
                               attribute:NSLayoutAttributeCenterX
                               relatedBy:NSLayoutRelationEqual
                                  toItem:self.view
                               attribute:NSLayoutAttributeCenterX
                              multiplier:1
                                constant:0]
                                ]];
}
  


@end

Perhatikan bahwa dalam kasus ini, kita tidak memberikan batasan lebar atau tinggi, karena ukuran iklan yang diberikan akan memberikan ukuran konten intrinsik pada banner untuk menyesuaikan ukuran tampilan.

Jika tidak ingin menggunakan ukuran standar yang ditentukan oleh konstanta, Anda dapat menyetel ukuran khusus menggunakan GADAdSizeFromCGSize. Lihat bagian ukuran banner untuk mengetahui informasi selengkapnya.

Konfigurasikan GADBannerView properti

Untuk memuat dan menampilkan iklan, GADBannerView memerlukan beberapa properti yang ditetapkan.

• rootViewController - Pengontrol tampilan ini digunakan untuk menampilkan overlay saat iklan diklik. Ini biasanya harus disetel ke pengontrol tampilan yang berisi GADBannerView.
• adUnitID - Ini adalah ID unit iklan tempat GADBannerView harus memuat iklan.

Berikut adalah contoh kode yang menunjukkan cara menyetel dua properti yang diperlukan dalam metode viewDidLoad UIViewController:

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
  bannerView.rootViewController = self
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
}

Catatan: ID unit iklan dibuat di UI AdMob, dan mewakili tempat di aplikasi Anda tempat iklan muncul. Misalnya, jika Anda menampilkan iklan banner dalam dua pengontrol tampilan, Anda dapat membuat unit iklan untuk masing-masing pengontrol.

Memuat iklan

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

Swift

override func viewDidLoad() {
  super.viewDidLoad()
  ...

  bannerView.adUnitID = "ca-app-pub-3940256099942544/2934735716"
  bannerView.rootViewController = self
  bannerView.load(GADRequest())
}

Objective-C

- (void)viewDidLoad {
  [super viewDidLoad];
  ...

  self.bannerView.adUnitID = @"ca-app-pub-3940256099942544/2934735716";
  self.bannerView.rootViewController = self;
  [self.bannerView loadRequest:[GADRequest request]];
}

ObjekGADRequest mewakili satu permintaan iklan, dan berisi properti untuk hal-hal seperti informasi penargetan.

Catatan: Jika iklan gagal dimuat, Anda tidak perlu secara eksplisit meminta iklan lain selama Anda telah mengonfigurasi unit iklan untuk diperbarui; Google Mobile Ads SDK mengikuti rasio pembaruan yang Anda tetapkan di UIAdMob . Jika belum mengaktifkan pembaruan, Anda harus memberikan permintaan baru.

Peristiwa iklan

Melalui penggunaan GADBannerViewDelegate, Anda dapat memproses peristiwa siklus proses, seperti saat iklan ditutup atau pengguna keluar dari aplikasi.

Mendaftar ke 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, dalam hal ini, properti delegate dapat disetel ke self.

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GADBannerView!

  override func viewDidLoad() {
    super.viewDidLoad()
    ...
    bannerView.delegate = self
  }
}

Objective-C

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GADBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  ...
  self.bannerView.delegate = self;
}

Menerapkan peristiwa banner

Setiap metode di GADBannerViewDelegate ditandai sebagai opsional, sehingga Anda hanya perlu mengimplementasikan metode yang diinginkan. Contoh ini mengimplementasikan setiap metode dan mencatat pesan ke konsol:

Swift

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  print("bannerViewDidReceiveAd")
}

func bannerView(_ bannerView: GADBannerView, didFailToReceiveAdWithError error: Error) {
  print("bannerView:didFailToReceiveAdWithError: \(error.localizedDescription)")
}

func bannerViewDidRecordImpression(_ bannerView: GADBannerView) {
  print("bannerViewDidRecordImpression")
}

func bannerViewWillPresentScreen(_ bannerView: GADBannerView) {
  print("bannerViewWillPresentScreen")
}

func bannerViewWillDismissScreen(_ bannerView: GADBannerView) {
  print("bannerViewWillDIsmissScreen")
}

func bannerViewDidDismissScreen(_ bannerView: GADBannerView) {
  print("bannerViewDidDismissScreen")
}

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 Delegasi Iklan untuk implementasi metode delegasi banner di aplikasi iOS API Demo.

Swift Objective-C

Kasus penggunaan

Berikut 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: GADBannerView) {
  // Add banner to view and add constraints as above.
  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 pada contoh berikut:

Swift

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  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, daftarkan 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 setara yang dipanggil pada waktu yang sama dengan metode GADBannerViewDelegate:

Metode libstdcDelegate	Metode iOS
bannerViewWillPresentScreen:	viewWillDisappear:ViewControllerViewController
bannerViewWillDismissScreen:	viewWillAppear:ViewControllerViewController
bannerViewDidDismissScreen:	viewDidAppear:ViewControllerViewController

Ukuran spanduk

Tabel berikut mencantumkan ukuran banner standar.

Ukuran dalam poin (LxT)	Deskripsi	Ketersediaan	Konstanta AdSize
320x50	Banner	Ponsel dan tablet	GADAdSizeBanner
320x100	Banner besar	Ponsel dan tablet	GADAdSizeLargeBanner
300x250	Persegi panjang sedang IAB	Ponsel dan tablet	GADAdSizeMediumRectangle
468x60	Banner ukuran penuh IAB	Tablet	GADAdSizeFullBanner
728x90	Papan peringkat IAB	Tablet	GADAdSizeLeaderboard
Lebar yang disediakan x Tinggi adaptif	Banner adaptif	Ponsel dan Tablet	T/A

Ukuran iklan kustom

Untuk menentukan ukuran banner kustom, tetapkan ukuran yang diinginkan menggunakan GADAdSizeFromCGSize, seperti yang ditunjukkan di sini:

Swift

let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))

Objective-C

GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));

Referensi lainnya

Contoh di GitHub

• Contoh iklan banner: Swift | Objective-C

• Demo fitur lanjutan: Swift | Objective-C

• Contoh BannerUITableView di GitHub: Swift | Objective-C

Tutorial video Mobile Ads Garage

• Penerapan Banner
• Praktik Terbaik Banner

Kisah sukses

• Contoh kasus penggunaan