Halaman ini diterjemahkan oleh Cloud Translation API.

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.

Panduan ini menunjukkan cara mengintegrasikan iklan banner dariAd Manager 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: /6499/example/banner

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 GAMBannerView

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

Pembuat Antarmuka

GAMBannerView 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 GAMBannerView juga dapat langsung dibuat. Berikut adalah contoh cara membuat GAMBannerView, diratakan dengan bagian tengah bawah area aman layar, dengan ukuran banner 320x50:

Swift

import GoogleMobileAds
import UIKit

class ViewController: UIViewController {

  var bannerView: GAMBannerView!

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

    addBannerViewToView(bannerView)
  }

  func addBannerViewToView(_ bannerView: GAMBannerView) {
    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) GAMBannerView *bannerView;

@end

@implementation ViewController

- (void)viewDidLoad {
  [super viewDidLoad];
  
  // In this case, we instantiate the banner with desired ad size.
  self.bannerView = [[GAMBannerView 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 GAMBannerView properti

Untuk memuat dan menampilkan iklan, GAMBannerView 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 GAMBannerView.
adUnitID - Ini adalah ID unit iklan tempat GAMBannerView 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 = "/6499/example/banner"
  bannerView.rootViewController = self
}

Objective-C

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

  self.bannerView.adUnitID = @"/6499/example/banner";
  self.bannerView.rootViewController = self;
}

Memuat iklan

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

Swift

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

  bannerView.adUnitID = "/6499/example/banner"
  bannerView.rootViewController = self
  bannerView.load(GAMRequest())
}

Objective-C

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

  self.bannerView.adUnitID = @"/6499/example/banner";
  self.bannerView.rootViewController = self;
  [self.bannerView loadRequest:[GAMRequest request]];
}

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

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

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

Objective-C

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GAMBannerView *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 GAMBannerView 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:(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 pada contoh berikut:

Swift

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

Objective-C

- (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, 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));

Ukuran iklan khusus

Selain unit iklan standar, Google Ad Manager memungkinkan Anda menayangkan unit iklan berukuran ke dalam aplikasi. Ukuran iklan (lebar, tinggi) yang ditentukan untuk permintaan iklan harus cocok dengan dimensi tampilan iklan (GAMBannerView) yang ditampilkan di aplikasi. Untuk menyetel ukuran khusus, gunakan GADAdSizeFromCGSize.

Swift

// Define custom GADAdSize of 250x250 for GAMBannerView.
let customAdSize = GADAdSizeFromCGSize(CGSize(width: 250, height: 250))
bannerView = GAMBannerView(adSize: customAdSize)

Objective-C

// Define custom GADAdSize of 250x250 for GAMBannerView
GADAdSize customAdSize = GADAdSizeFromCGSize(CGSizeMake(250, 250));
self.bannerView = [[GAMBannerView alloc] initWithAdSize:customAdSize];

Lihat contoh Beberapa Ukuran Iklan Ad Manager untuk implementasi ukuran iklan kustom di aplikasi Demo API iOS.

Swift Objective-C

Beberapa ukuran iklan

Ad Manager memungkinkan Anda menentukan beberapa ukuran iklan yang mungkin memenuhi syarat untuk ditayangkan ke dalam GAMBannerView. Ada tiga langkah yang diperlukan untuk menggunakan fitur ini:

Di UI Ad Manager, buat item baris yang menargetkan unit iklan yang sama yang dikaitkan dengan materi iklan dengan ukuran yang berbeda.

Di aplikasi Anda, tetapkan properti validAdSizes di GAMBannerView:

Swift

// Define an optional array of GADAdSize to specify all valid sizes that are appropriate
// for this slot. Never create your own GADAdSize directly. Use one of the
// predefined standard ad sizes (such as GADAdSizeBanner), or create one using
// the GADAdSizeFromCGSize method.
//
// Note: Ensure that the allocated GAMBannerView is defined with an ad size. Also note
// that all desired sizes should be included in the validAdSizes array.
bannerView.validAdSizes = [NSValueFromGADAdSize(GADAdSizeBanner),
    NSValueFromGADAdSize(GADAdSizeMediumRectangle),
    NSValueFromGADAdSize(GADAdSizeFromCGSize(CGSize(width: 120, height: 20)))]

Objective-C

// Define an optional array of GADAdSize to specify all valid sizes that are appropriate
// for this slot. Never create your own GADAdSize directly. Use one of the
// predefined standard ad sizes (such as GADAdSizeBanner), or create one using
// the GADAdSizeFromCGSize method.
//
// Note: Ensure that the allocated GAMBannerView is defined with an ad size. Also note
// that all desired sizes should be included in the validAdSizes array.
self.bannerView.validAdSizes = @[
    NSValueFromGADAdSize(GADAdSizeBanner),
    NSValueFromGADAdSize(GADAdSizeMediumRectangle),
    NSValueFromGADAdSize(GADAdSizeFromCGSize(CGSizeMake(120, 20)))
];

Terapkan metode GADAdSizeDelegate untuk mendeteksi perubahan ukuran iklan.

Swift

public func bannerView(_ bannerView: GADBannerView, willChangeAdSizeTo size: GADAdSize)

Objective-C



(void)bannerView:(GAMBannerView *)view willChangeAdSizeTo:(GADAdSize)size;

Jangan lupa untuk menetapkan delegasi sebelum membuat permintaan untuk iklan.

Swift

bannerView.adSizeDelegate = self

Objective-C

self.bannerView.adSizeDelegate = self;

Lihat contoh Beberapa Ukuran Iklan Ad Manager untuk implementasi ukuran iklan kustom di aplikasi Demo API iOS.

Swift Objective-C

Penghitungan tayangan manual

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

Swift

bannerView.enableManualImpressions = true

Objective-C

self.bannerView.enableManualImpressions = YES;

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

Swift

bannerView.recordImpression()

Objective-C

[self.bannerView recordImpression];

Peristiwa aplikasi

Peristiwa aplikasi memungkinkan Anda membuat iklan yang dapat mengirimkan 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.

Swift

// 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: GAMBannerView,
    didReceiveAppEvent name: String, withInfo info: String?)

Objective-C

// 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 dalam pengontrol tampilan:

Swift

import GoogleMobileAds

class ViewController: UIViewController, GADAppEventDelegate {
}

Objective-C

@import GoogleMobileAds;

@interface ViewController : UIViewController <GADAppEventDelegate> {
}

@end

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

Swift

bannerView.appEventDelegate = self

Objective-C

self.bannerView.appEventDelegate = self;

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

Swift

func bannerView(_ banner: GAMBannerView, 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
    }
  }
}

Objective-C

- (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];
    }
  }
}

Dan, berikut adalah materi iklan yang sesuai yang mengirimkan pesan peristiwa aplikasi berwarna 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 implementasi peristiwa aplikasi di aplikasi Demo API iOS.

Swift Objective-C

Referensi lainnya

Contoh di GitHub

Contoh iklan banner: Swift | Objective-C
Demo fitur lanjutan: Swift | Objective-C

Tutorial video Garasi Iklan Seluler

Langkah berikutnya

Pelajari privasi pengguna lebih lanjut.