橫幅廣告會佔用應用程式畫面的頂端,無論是在裝置螢幕的頂端或底部,這類廣告素材會在使用者與應用程式互動時持續顯示,而且會在一段時間後自動重新整理。如果您是第一次使用行動廣告,不妨從這裡開始著手。 個案研究。
本指南將說明如何將橫幅廣告從 AdMob 整合到 iOS 應用程式中。除了程式碼片段和操作說明之外,廣告程式碼還包括如何正確調整橫幅廣告大小,以及其他資源的連結。
必要條件
- 單獨或在 Firebase 中匯入 Google Mobile Ads SDK。
一律使用測試廣告進行測試
建構及測試應用程式時,請務必使用測試廣告,而非實際上線廣告。否則我們可能會將您的帳戶停權。
如要載入測試廣告,最簡單的方法就是使用 iOS 橫幅廣告專用的測試用廣告單元 ID:
ca-app-pub-3940256099942544/2934735716
這種代碼經過特別設定,可針對每個請求傳回測試廣告,您可以在編寫、測試及偵錯時,在自己的應用程式中免費使用此功能。只要先以自己的廣告單元 ID 取代,再發布應用程式。
如要進一步瞭解 Mobile Ads SDK 的測試廣告運作方式,請參閱「測試廣告」一文。
建立 GADBannerView
橫幅廣告會顯示在 GADBannerView
物件中,因此整合橫幅廣告的第一步就是在資料檢視階層中加入 GADBannerView
。這通常是使用介面建立工具或透過程式輔助方式完成。
介面建立工具
您可以將 GADBannerView
新增至分鏡腳本或 xib 檔案,就像一般一般的檢視畫面一樣。使用這個方法時,請務必加入寬度和高度限制,以符合您想顯示的廣告大小。舉例來說,顯示橫幅 (320x50) 時,請使用寬度限制為 320 點,高度限制為 50 點。
程式輔助方式
也可以直接對 GADBannerView
執行個體化。
以下示範如何建立 320x50 橫幅大小,以符合螢幕安全區域的底部中央的 GADBannerView
:
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: bottomLayoutGuide, attribute: .top, 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.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
方法中設定兩個必要屬性:
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; }
載入廣告
GADBannerView
設定完成且設定其屬性後,即可載入廣告。方法是在 GADRequest
物件上呼叫 loadRequest:
:
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]]; }
GADRequest 物件代表單一廣告請求,並包含指定資訊等屬性。
廣告事件
您可以透過 GADBannerViewDelegate
來監聽生命週期事件,例如廣告關閉或使用者退出應用程式時。
註冊橫幅廣告事件
如要註冊橫幅廣告事件,請將 GADBannerView
上的 delegate
屬性設為導入 GADBannerViewDelegate
通訊協定的物件。一般來說,導入橫幅廣告的類別也是委派類別,在這種情況下,delegate
屬性可設為 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; }
導入橫幅事件
GADBannerViewDelegate
中的每個方法都會標示為選用,因此您只需要實作所需的方法。本範例會實作每種方法並將訊息記錄到主控台:
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"); }
請參閱「廣告代表」範例,瞭解如何在 iOS API 示範應用程式中導入橫幅廣告委派方法。
用途
以下舉例說明這些廣告事件的應用實例。
收到廣告時,在檢視區塊階層加入橫幅廣告
在收到廣告階層之前,建議您延遲將 GADBannerView
新增至檢視階層中。您可以監聽 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]; }
使用橫幅廣告動畫
您也可以使用 bannerViewDidReceiveAd:
事件,在傳回的橫幅廣告中為橫幅廣告加入動畫效果,如以下範例所示:
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; }]; }
暫停和重新啟用應用程式
GADBannerViewDelegate
通訊協定可透過各種方法通知您事件,例如當點擊觸發顯示或關閉疊加層時。如果您想要追蹤這些事件是否為廣告所造成,請註冊這些 GADBannerViewDelegate
方法。
如要擷取所有類型的疊加層或外部瀏覽器叫用,不僅是廣告點擊而產生的,則更適合監聽 UIViewController
或 UIApplication
中對等的方法。下表顯示與 GADBannerViewDelegate
方法同時叫用的對等 iOS 方法:
GADBannerViewDelegate 方法 | iOS 方法 |
---|---|
bannerViewWillPresentScreen: |
UIViewController 的「viewWillDisappear: 」 |
bannerViewWillDismissScreen: |
UIViewController 的「viewWillAppear: 」 |
bannerViewDidDismissScreen: |
UIViewController 的「viewDidAppear: 」 |
橫幅廣告大小
下表列出標準橫幅廣告大小。
起始點大小 (寬 x 高) | 說明 | 可用性 | AdSize 常數 |
---|---|---|---|
320 x 50 | 橫幅 | 手機和平板電腦 | GADAdSizeBanner |
320x100 | 大型橫幅 | 手機和平板電腦 | GADAdSizeLargeBanner |
300 x 250 | IAB 中矩形廣告 | 手機和平板電腦 | GADAdSizeMediumRectangle |
468x60 | IAB 全尺寸橫幅廣告 | 平板電腦 | GADAdSizeFullBanner |
728x90 | IAB 超級橫幅廣告 | 平板電腦 | GADAdSizeLeaderboard |
提供的寬度 x 自動調整高度 | 自動調整橫幅廣告 | 手機和平板電腦 | 無 |
自訂廣告大小
如要定義自訂橫幅大小,請使用 GADAdSizeFromCGSize
設定您想要的大小,如下所示:
Swift
let adSize = GADAdSizeFromCGSize(CGSize(width: 300, height: 50))
Objective-C
GADAdSize size = GADAdSizeFromCGSize(CGSizeMake(300, 50));
其他資源
GitHub 範例
橫幅廣告範例:Swift | Objective-C
進階功能示範:Swift | Objective-C
GitHub 上的 Banner UITableView 範例:Swift | Objective-C