原生樣式

原生樣式設定可讓 Google Ad Manager 根據您在產品中指定的原生樣式,處理原生廣告的顯示方式。首先,請指定大小和指定目標。 然後新增 HTML、CSS 和 JavaScript 來定義回應式廣告,以便在所有螢幕產生優異的顯示效果。您不需要進行任何顯示設定;Ad Manager 會自動套用適合目的地的原生樣式。使用 GAMBannerView 導入原生樣式的方式與橫幅廣告相同。這類素材資源可搭配預先決定的固定廣告大小,或在執行階段決定的自動調整廣告大小。

必要條件

  • Google Mobile Ads SDK 7.14.0 以上版本

本指南假設您對 Google Mobile Ads SDK 已有一定程度的瞭解。 如果您還沒看過我們的入門指南

固定大小

透過固定大小的原生樣式,您可以控制原生廣告的寬度和高度。如要設定固定大小,請按照下列步驟操作:

  1. 在 Ad Manager UI 中建立委刊項,然後從 Size 欄位下拉式選單中選取一種預先定義的大小。

  2. 在 Interface Builder 中,設定 GAMBannerView 的寬度和高度,以符合您在步驟 1 選取的預先定義大小。您可以在「橫幅大小」部分中查看大小清單和對應的 GADAdSize 常數。

按照「您的第一個橫幅廣告請求」中的操作說明,輕鬆導入固定大小的原生樣式,但您可以靈活調整 HTML、CSS 和 JavaScript,讓橫幅廣告打造符合應用程式中原生的外觀和風格。

自動調整大小

在某些情況下,固定大小可能較不合理。舉例來說,您可能希望廣告的寬度與應用程式的內容相符,但高度需要動態調整,以符合應用程式的內容。如要處理這種情況,您可以在 Ad Manager UI 中指定 Fluid 做為廣告大小,指定廣告在執行階段期間決定的大小。SDK 提供一個特殊的 GADAdSize 常數 kGADAdSizeFluid 來處理這種情況。自動調整廣告大小高度是根據發布商定義的寬度動態決定,可讓 GAMBannerView 配合廣告素材的高度調整高度。

自動調整請求

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

如果您發出包含 kGADAdSizeFluid 的多重大小要求,則傳回的廣告一律會放在自動調整容器中,運作起來就如同自動調整廣告。如果在這個自動調整容器中傳回非自動調整的廣告素材,SDK 會將廣告置於容器中央,這樣每次傳回新廣告時,您就不必修改寬度限制。

發出單一大小和多大小自動調整請求的導入方式非常類似;唯一的差別在於多重大小請求需要設定 validAdSizes 屬性,以指定適用於廣告請求的廣告大小:

Swift

bannerView.validAdSizes = [NSValueFromGADAdSize(kGADAdSizeFluid),
                           NSValueFromGADAdSize(kGADAdSizeBanner)]

Objective-C

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

以下是程式碼中的完整實作畫面:

Swift

var bannerView: GAMBannerView!

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 = GAMBannerView(adSize: kGADAdSizeFluid)
  var frameRect = bannerView.frame
  frameRect.size.width = view.bounds.width
  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.load(GAMRequest())
}

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 示範說明

GADAdSizeApproval 通訊協定

建議您在調整橫幅廣告大小之前,先瞭解橫幅廣告的高度。 在橫幅檢視畫面變更為新的 GADAdSize 之前,adView:willChangeAdSizeTo: 回呼會通知其委派。如要在橫幅廣告檢視畫面變更大小之前接收通知,您的類別必須符合 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: GADBannerView, willChangeAdSizeTo adSize: GADAdSize) {
  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;
}