原生樣式

選取平台： Android iOS Flutter

透過原生樣式設定，Google Ad Manager 能依照您在產品中指定的樣式，自動呈現原生廣告。您只需先設定好廣告大小和目標對象，再加入 HTML、CSS 和 JavaScript 定義程式碼，就能打造出在各種螢幕上出色呈現的回應式廣告。您無需自行設定廣告顯示方式，Ad Manager 會自動根據放送位置套用合適的原生樣式。原生樣式和橫幅廣告一樣是用 GAMBannerView 導入，可以使用預先設定的固定廣告大小，也可以採用在執行階段動態調整的彈性大小。

必備條件

  • Google Mobile Ads SDK 7.14.0 以上版本

本指南假設您對 Google Mobile Ads SDK 已有基本瞭解。如果您還不熟悉這個 SDK，建議先參閱「開始使用」指南。

固定大小

採用固定大小的原生樣式時，您可以控制廣告的寬度和高度。如要設定固定大小，請按照下列步驟操作：

  1. 在 Ad Manager 使用者介面中建立委刊項，然後從 Size 欄位下拉式選單中選取一個預先定義的大小。

  2. 在 Interface Builder 中，將 GAMBannerView 的寬度和高度設為步驟 1 所選的預先定義大小。在「橫幅大小」一節，您可以查看各種大小和對應的 GADAdSize 常數。

如要實作固定大小的原生樣式，只要按照「您的第一個橫幅廣告請求」中的指示操作即可。此外，您可以自由調整 HTML、CSS 和 JavaScript 程式碼，讓橫幅廣告的外觀和風格更貼近應用程式的整體設計，自然融入使用者體驗。

自動調整大小

有時候，固定大小的廣告可能不太適用。舉例來說，您可能希望廣告寬度與應用程式內容一致，但高度能依廣告內容動態調整。如有這種需求，您可以在 Ad Manager 使用者介面中將廣告大小設為 Fluid，代表廣告大小會在應用程式執行階段決定。SDK 提供特殊的 GADAdSize 常數 kGADAdSizeFluid，專門用於處理這種情況。自動調整大小的廣告會根據發布商設定的寬度動態調整，讓 GAMBannerView 的高度與廣告素材一致。

自動調整請求

與其他廣告格式不同，kGADAdSizeFluid 廣告大小沒有預先定義的寬度，因此請務必在程式碼或 Interface Builder 中明確設定橫幅廣告的畫面寬度。如未指定寬度，SDK 預設會根據裝置全寬來設定橫幅廣告的高度。

如果您發送的多尺寸請求包含 kGADAdSizeFluid，傳回的廣告一定會放在自動調整的容器中，並以自動調整廣告的形式呈現。如果自動調整容器傳回非自動調整的廣告素材，SDK 會將廣告置中，避免每次傳回新廣告時，都需要修改寬度限制。

無論是請求單一還是多尺寸的自動調整廣告，實作方式幾乎相同。唯一的差別是，多尺寸請求需要利用 validAdSizes 屬性指定可接受的廣告大小。

Swift

bannerView.validAdSizes = [nsValue(for: AdSizeFluid), nsValue(for: AdSizeBanner)]

Objective-C

_bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
                              NSValueFromGADAdSize(kGADAdSizeBanner) ];

以下是完整的實作程式碼範例：

Swift

var bannerView: AdManagerBannerView!

override func viewDidLoad() {
super.viewDidLoad()
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  bannerView = AdManagerBannerView(adSize: AdSizeFluid)
  var frameRect = bannerView.frame
  frameRect.size.width = view.bounds.width
  bannerView.frame = frameRect

  // Uncomment this code for a multisize fluid request.
  // bannerView.validAdSizes = [nsValue(for: AdSizeFluid), nsValue(for: AdSizeBanner)]

  bannerView.adUnitID = "YOUR_AD_UNIT_ID"
  bannerView.rootViewController = self

  // Make the ad request.
  bannerView.load(AdManagerRequest())
}

Objective-C

GAMBannerView *_bannerView;

- (void)viewDidLoad {
  [super viewDidLoad];
  // Create the GAMBannerView and set its width to a width that makes sense for your
  // app. In this example, the width is set to the width of the UIViewController's
  // root view.
  _bannerView = [[GAMBannerView alloc] initWithAdSize:kGADAdSizeFluid];
  CGRect frameRect = _bannerView.frame;
  frameRect.size.width = CGRectGetWidth(self.view.bounds);
  _bannerView.frame = frameRect;

  // Uncomment this code for a multisize fluid request.
  // _bannerView.validAdSizes = @[ NSValueFromGADAdSize(kGADAdSizeFluid),
  //                               NSValueFromGADAdSize(kGADAdSizeBanner) ];

  _bannerView.adUnitID = @"YOUR_AD_UNIT_ID";
  _bannerView.rootViewController = self;

  // Make the ad request.
  [_bannerView loadRequest:[GAMRequest request]];
}

如要查看 Ad Manager 自動調整廣告大小的實作範例，請下載使用 Swift 或 Objective-C 開發的 iOS API 試用版應用程式

下載 API 試用版

GADAdSizeDelegate 協定

您可能希望在橫幅廣告的大小改變前，預先得知新的高度。adView:willChangeAdSizeTo: 回呼會在橫幅廣告檢視區塊變更為新的 GADAdSize 前通知委派物件。如要在大小變更前接收通知，您的類別必須遵循 GADAdSizeDelegate 協定。

以下示範如何實作 adView:willChangeAdSizeTo: 回呼，取得橫幅廣告大小變更後的寬度和高度：

Swift

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
bannerView.adSizeDelegate = self

// MARK: - GADAdSizeDelegate

func adView(_ bannerView: BannerView, willChangeAdSizeTo adSize: AdSize) {
  let height = adSize.size.height
  let width = adSize.size.width
}

Objective-C

// To be notified before the banner's ad size changes, your view controller class must
// conform to the GADAdSizeDelegate protocol.
_bannerView.adSizeDelegate = self;

#pragma mark - GADAdSizeDelegate

- (void)adView:(GADBannerView *)bannerView willChangeAdSizeTo:(GADAdSize)adSize {
  CGFloat height = adSize.size.height;
  CGFloat width = adSize.size.width;
}