原生樣式

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

必要條件

  • Google Mobile Ads Flutter 外掛程式 0.13.6 以上版本

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

固定大小

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

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

  2. 載入與步驟 1 所設大小相同的 AdManagerBannerAd。如要瞭解如何例項化及載入廣告,請參閱橫幅廣告說明文件。您可以在「橫幅廣告大小」部分中查看大小清單及對應的 AdSize 常數。

以下範例說明如何指定固定大小,例如 MEDIUM_RECTANGLE (300x250) 廣告大小:

AdManagerBannerAd ad = AdManagerBannerAd(
  adUnitId: '<your-ad-unit>',
  sizes: <AdSize>[AdSize.mediumRectangle],
  request: AdManagerAdRequest(),
);

自動調整大小

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

自動調整請求

使用 FluidAdManagerBannerAd 請求自動調整廣告:

final fluidAd = FluidAdManagerBannerAd(
  adUnitId: '<your-ad-unit>',
  request: AdManagerAdRequest(),
  listener: AdManagerBannerAdListener(
    onAdLoaded: (Ad ad) {
      print('$_fluidAd loaded.');
    },
    onAdFailedToLoad: (Ad ad, LoadAdError error) {
      print('$_fluidAd failedToLoad: $error');
      ad.dispose();
    },
  ),

顯示自動調整廣告

廣告載入後,請使用 FluidAdWidget 顯示流暢廣告。其高度會配合基礎平台廣告檢視畫面調整高度:

FluidAdWidget(
  width: <your-width>,
  ad: fluidAd,
);

您可以在 GitHub 上的範例應用程式中,查看 Ad Manager 自動調整廣告大小的導入範例。