橫幅廣告

橫幅廣告佔據應用程式版面配置頂端或底部的位置，當使用者與應用程式互動時，畫面上將持續顯示在螢幕上，而且一段時間後會重新整理。如果您剛開始使用行動廣告，請先著手操作。 個案研究。

本指南說明如何將AdMob 的橫幅廣告整合至 iOS 應用程式。除了程式碼片段和操作說明之外，這個程式碼還包含如何調整橫幅廣告大小以及其他資源的連結。

必要條件

• 完成入門指南。

一律使用測試廣告進行測試

建構及測試應用程式時，請務必使用測試廣告，而非即時正式版的廣告。否則我們可能會將您的帳戶停權。

載入測試廣告最簡單的方法，就是使用 iOS 橫幅廣告專屬的測試廣告單元 ID： ca-app-pub-3940256099942544/2934735716

它經過特別設定，可以針對每次要求傳回測試廣告，而您可以在編寫、測試和偵錯應用程式時，在自己的應用程式中使用它。發布應用程式前，請務必將其中的 ID 換成自己的廣告單元 ID。

如要進一步瞭解 Mobile Ads SDK 的測試廣告運作方式，請參閱「測試廣告」。

建立 GADBannerView

橫幅廣告會顯示在 GADBannerView 物件中，因此整合橫幅廣告的第一步是在檢視區塊階層中加入 GADBannerView。這通常是透過介面製作工具或以程式輔助方式執行。

介面建構工具

如同一般的檢視畫面，您可以將 GADBannerView 新增至分鏡腳本或 xib 檔案。使用這個方法時，請務必依據您想要顯示的廣告大小新增寬度和高度限制。舉例來說，顯示橫幅 (320x50) 時，請使用寬度 320 點，高度限制 50 點。

程式輔助方式

GADBannerView 也可以直接執行個體化。以下範例說明如何建立 GADBannerView (與螢幕安全區域的底部對齊，橫幅大小為 320x50)：

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: bottomLayoutGuide,
                          attribute: .top,
                          multiplier: 1,
                          constant: 0),
       NSLayoutConstraint(item: bannerView,
                          attribute: .centerX,
                          relatedBy: .equal,
                          toItem: view,
                          attribute: .centerX,
                          multiplier: 1,
                          constant: 0)
      ])
   }
   
}

@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.bottomLayoutGuide
                               attribute:NSLayoutAttributeTop
                              multiplier:1
                                constant:0],
    [NSLayoutConstraint constraintWithItem:bannerView
                               attribute:NSLayoutAttributeCenterX
                               relatedBy:NSLayoutRelationEqual
                                  toItem:self.view
                               attribute:NSLayoutAttributeCenterX
                              multiplier:1
                                constant:0]
                                ]];
}
  


@end

請注意，在本範例中，我們不提供寬度或高度限制，因為所提供的廣告大小將可為橫幅廣告提供內建內容尺寸。

如果不想使用常數定義的標準大小，可以使用 GADAdSizeFromCGSize 設定自訂大小。詳情請參閱「橫幅廣告大小」一節。

設定 GADBannerView 屬性

如要載入及顯示廣告，GADBannerView 需要設定一些屬性。

• rootViewController：這個檢視畫面控制器會在使用者點擊廣告時呈現重疊元素。通常應設為包含 GADBannerView 的檢視畫面控制器。
• adUnitID - 這是 GADBannerView 應載入廣告的廣告單元 ID。

以下程式碼範例說明如何在 UIViewController 的 viewDidLoad 方法中設定兩個必要屬性：

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

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

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

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

載入廣告

GADBannerView 設定完成且設定屬性後，就能載入廣告。方法是在 GADRequest 物件上呼叫 loadRequest:：

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

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

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

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

GADRequest 物件代表單一廣告請求，且包含指定資訊等資訊。

廣告事件

使用 GADBannerViewDelegate 可讓您監聽生命週期事件，例如廣告關閉或使用者離開應用程式。

註冊橫幅廣告事件

如要註冊橫幅廣告事件，請將 GADBannerView 上的 delegate 屬性設為導入 GADBannerViewDelegate 通訊協定的物件。一般來說，導入橫幅廣告的類別也可以做為委派類別，在此案例中，delegate 屬性可以設為 self。

import GoogleMobileAds
import UIKit

class ViewController: UIViewController, GADBannerViewDelegate {

  var bannerView: GADBannerView!

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

@import GoogleMobileAds;

@interface ViewController () <GADBannerViewDelegate>

@property(nonatomic, strong) GADBannerView *bannerView;

@end

@implementation ViewController

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

導入橫幅事件

GADBannerViewDelegate 中的每個方法都會標示為選用，因此您只需導入所需的方法。這個範例會實作每個方法，並在訊息中記錄訊息：

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")
}

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

請參閱廣告委派範例，瞭解如何在 iOS API 展示應用程式中導入橫幅廣告委派方法。

Swift Objective-C

用途

以下舉例說明這些廣告事件方法的應用實例。

收到廣告後，在檢視區塊階層中新增橫幅廣告

建議先將 GADBannerView 新增至檢視區塊階層，再接收廣告。監聽 bannerViewDidReceiveAd: 事件即可：

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

- (void)bannerViewDidReceiveAd:(GADBannerView *)bannerView {
  // Add bannerView to view and add constraints as above.
  [self addBannerViewToView:self.bannerView];
}

建立橫幅廣告動畫

您也可以利用 bannerViewDidReceiveAd: 事件，在橫幅廣告傳回動畫時以動畫方式顯示，如以下範例所示：

func bannerViewDidReceiveAd(_ bannerView: GADBannerView) {
  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;
  }];
}

暫停及恢復應用程式

GADBannerViewDelegate 通訊協定有方法來通知事件，例如當點擊會導致系統顯示或關閉疊加層。如要追蹤這些事件是否與廣告有關，請註冊這些 GADBannerViewDelegate 方法。

如要擷取所有類型的重疊顯示或外部瀏覽器叫用，而不只是來自廣告點擊的叫用，應用程式最好監聽 UIViewController 或 UIApplication 中對等的方法。下表顯示與 GADBannerViewDelegate 方法同時叫用的對應 iOS 方法：

橫幅廣告大小

下表列出標準橫幅廣告大小。

自訂廣告大小

如要定義自訂橫幅大小，請使用 GADAdSizeFromCGSize 設定所需大小，如下所示：

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

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

其他資源

GitHub 範例

• 橫幅廣告範例：Swift | Objective-C

• 進階功能示範：Swift | Objective-C

• GitHub 上的 Banner UITableView 範例：Swift | Objective-C

行動廣告庫影片教學課程

• 橫幅廣告導入
• 橫幅最佳做法

成功案例

• 使用範例