橫幅廣告是會佔用應用程式的部分版面的矩形廣告。使用者與應用程式互動時，這類廣告會固定顯示在畫面頂端或底部，或在使用者捲動瀏覽內容時，持續顯示在畫面上。橫幅廣告經過一段時間後會自動重新整理。詳情請參閱「橫幅廣告總覽」。
本指南將說明如何開始使用錨定自動調整橫幅廣告，這是一種使用您指定的廣告寬度，針對每部裝置最佳化廣告大小，盡可能提高成效。
錨定自動調整橫幅廣告
錨定自動調整橫幅廣告是固定的顯示比例廣告，而非一般的固定大小廣告。長寬比與業界標準中的 320*50 類似。指定可用的完整寬度後，系統會傳回高度調整為該寬度的廣告。在同一部裝置上提出要求時，最佳高度不會改變，而在重新整理廣告時，周圍的檢視畫面也不需要移動。
先備知識
- 完成入門指南。
一律使用測試廣告進行測試
建構及測試應用程式時，請務必使用測試廣告，而非即時的實際廣告。否則可能導致帳戶遭到停權。
要載入測試廣告，最簡單的方法就是使用 iOS 橫幅廣告專用的測試廣告單元 ID：
/6499/example/adaptive-banner
這項機制經過特別設定，可針對每個請求傳回測試廣告，您可以在編寫程式碼、進行測試及偵錯時，自由用於自家的應用程式。但別忘了在發布應用程式前，用自己的廣告單元 ID 取代這個 ID。
如要進一步瞭解 Mobile Ads SDK 測試廣告的運作方式，請參閱「測試廣告」一文。
建立 GAMBannerView
橫幅廣告會顯示在 GAMBannerView 物件中，因此整合橫幅廣告的第一步是在檢視區塊階層中加入 GAMBannerView。這項作業通常透過程式輔助或 Interface Builder 完成。
透過程式輔助方式
GAMBannerView 也可以直接例項化。以下範例說明如何建立 GAMBannerView，並對齊螢幕安全區域的正下方：
Swift
import GoogleMobileAds
import UIKit
class ViewController: UIViewController {
var bannerView: GAMBannerView!
override func viewDidLoad() {
super.viewDidLoad()
let viewWidth = view.frame.inset(by: view.safeAreaInsets).width
// Here the current interface orientation is used. Use
// GADLandscapeAnchoredAdaptiveBannerAdSizeWithWidth or
// GADPortraitAnchoredAdaptiveBannerAdSizeWithWidth if you prefer to load an ad of a
// particular orientation,
let adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
bannerView = GAMBannerView(adSize: adaptiveSize)
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];
// Here safe area is taken into account, hence the view frame is used after the
// view has been laid out.
CGRect frame = UIEdgeInsetsInsetRect(self.view.frame, self.view.safeAreaInsets);
CGFloat viewWidth = frame.size.width;
// Here the current interface orientation is used. If the ad is being preloaded
// for a future orientation change or different orientation, the function for the
// relevant orientation should be used.
GADAdSize adaptiveSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
// In this case, we instantiate the banner with desired ad size.
self.bannerView = [[GAMBannerView alloc] initWithAdSize:adaptiveSize];
[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
請注意，在本例中，我們並未設定寬度或高度限制，因為提供的廣告大小會為橫幅廣告提供內建內容大小來調整檢視畫面的大小。
介面建構工具
GAMBannerView 可新增至分鏡腳本或 xib 檔案。使用這個方法時，請務必只新增橫幅廣告的位置限制。舉例來說，在畫面底部顯示自動調整橫幅廣告時，請將橫幅檢視畫面的底部設定為等於底部版面配置指南的頂端，然後將中間 X 設為超級檢視畫面的中間 X。
橫幅廣告的大小仍會以程式輔助方式設定：
Swift
bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth)
Objective-C
self.bannerView.adSize = GADCurrentOrientationAnchoredAdaptiveBannerAdSizeWithWidth(viewWidth);
載入廣告
設定好 GAMBannerView 及其屬性後，就可以載入廣告了。方法是在 GAMRequest 物件上呼叫 loadRequest:：
Swift
override func viewDidLoad() {
super.viewDidLoad()
...
// Set the ad unit ID and view controller that contains the GAMBannerView.
bannerView.adUnitID = "/6499/example/adaptive-banner"
bannerView.rootViewController = self
bannerView.load(GAMRequest())
}
Objective-C
- (void)viewDidLoad {
[super viewDidLoad];
...
// Set the ad unit ID and view controller that contains the GAMBannerView.
self.bannerView.adUnitID = @"/6499/example/adaptive-banner";
self.bannerView.rootViewController = self;
[self.bannerView loadRequest:[GAMRequest request]];
}
GAMRequest 物件代表單一廣告請求，且包含指定目標資訊這類項目的屬性。
如果廣告無法載入，即使您已將廣告單元設為重新整理，也不需要明確請求其他廣告；Google Mobile Ads SDK 會遵循您在 Ad Manager UI 中指定的任何重新整理頻率。如果尚未啟用重新整理功能，就必須重新提出要求。
廣告事件
使用 GADBannerViewDelegate 時，您可以監聽生命週期事件，例如廣告關閉或使用者離開應用程式。
註冊橫幅廣告事件
如要註冊橫幅廣告事件，請將 GAMBannerView 上的 delegate 屬性設為導入 GADBannerViewDelegate 通訊協定的物件。一般來說，導入橫幅廣告的類別也為委派類別，在這種情況下，delegate 屬性可設為 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;
}
導入橫幅廣告事件
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 試用版應用程式中導入橫幅廣告委派方法，請參閱「廣告委派」範例。
用途
以下是這些廣告事件方法的幾個使用範例。
收到廣告時，將橫幅廣告加入檢視區塊階層
您可能要延遲將 GAMBannerView 新增至檢視區塊階層，直到收到廣告為止。您可以監聽 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];
}
為橫幅廣告建立動畫
您也可使用 bannerViewDidReceiveAd: 事件，在系統傳回橫幅廣告後加入動畫，如以下範例所示：
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;
}];
}
暫停和恢復應用程式
GADBannerViewDelegate 通訊協定具有事件通知的方法，例如當點擊導致重疊廣告顯示或關閉時。如要追蹤這些事件是否源自廣告，請註冊這些 GADBannerViewDelegate 方法。
如要擷取所有類型的重疊簡報或外部瀏覽器叫用 (而非只有來自廣告點擊的請求)，建議應用程式監聽 UIViewController 或 UIApplication 上的對等方法。下表顯示與 GADBannerViewDelegate 方法同時叫用的對等 iOS 方法：
| GADBannerViewDelegate 方法 | iOS 方法 |
|---|---|
bannerViewWillPresentScreen: |
UIViewController 的 viewWillDisappear: |
bannerViewWillDismissScreen: |
UIViewController 的 viewWillAppear: |
bannerViewDidDismissScreen: |
UIViewController 的 viewDidAppear: |
以人工方式計算曝光次數
如果您設有特殊曝光記錄時機，可以手動將曝光連線偵測 (ping) 傳送至 Ad Manager。方法是在載入廣告前，先為手動曝光啟用 GAMBannerView：
Swift
bannerView.enableManualImpressions = true
Objective-C
self.bannerView.enableManualImpressions = YES;
當您確定廣告已成功傳回並出現在螢幕上時，可以手動觸發曝光：
Swift
bannerView.recordImpression()
Objective-C
[self.bannerView recordImpression];
應用程式事件
應用程式事件可讓您建立廣告，以便將訊息傳送至其應用程式的程式碼。接著，應用程式即可根據這些訊息採取動作。
您可以使用 GADAppEventDelegate 監聽 Ad Manager 專用的應用程式事件。
這些事件可能會在廣告的生命週期內隨時發生，即使在呼叫 GADBannerViewDelegate 物件的 bannerViewDidReceiveAd: 之前亦然。
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;
可在檢視控制器中實作應用程式事件方法：
Swift
import GoogleMobileAds
class ViewController: UIViewController, GADAppEventDelegate {
}
Objective-C
@import GoogleMobileAds;
@interface ViewController : UIViewController <GADAppEventDelegate> {
}
@end
請記得在請求廣告前，使用 appEventDelegate 屬性設定委派。
Swift
bannerView.appEventDelegate = self
Objective-C
self.bannerView.appEventDelegate = self;
以下範例說明如何透過應用程式事件指定顏色，藉此變更應用程式的背景顏色：
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];
}
}
}
以下的對應廣告素材會將顏色應用程式事件訊息傳送至 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>
請參閱 Ad Manager 應用程式事件範例，瞭解如何在 iOS API 試用版應用程式中導入應用程式事件。
其他資源
GitHub 上的範例
- 錨定自動調整橫幅廣告範例：Swift | Objective-C
- 進階功能示範：Swift | Objective-C
後續步驟
可收合橫幅廣告
可收合橫幅廣告是一種橫幅廣告，一開始會以較大的重疊廣告呈現，並提供可將廣告收合至較小尺寸的按鈕。建議您運用它進一步最佳化效能。詳情請參閱「可收合橫幅廣告」一文。
內嵌自動調整橫幅廣告
與錨定自動調整橫幅廣告相比，內嵌自動調整橫幅廣告尺寸更大、更高。它們的高度不一，而且可以和裝置螢幕一樣高。如果應用程式會在可捲動內容中刊登橫幅廣告，建議使用內嵌自動調整橫幅廣告，而非錨定式自動調整橫幅廣告。詳情請參閱內嵌自動調整橫幅廣告。