橫幅

選取平台： Android iOS Unity Flutter

橫幅廣告會占據應用程式版面配置的一部分，通常位於裝置畫面頂端或底部。使用者操作應用程式時，這類廣告會持續停留在畫面上，並能定時自動重新整理內容。

本指南會引導您開始使用錨定自動調整橫幅廣告。您只要指定廣告寬度，這類廣告就會自動調整為適合各種裝置的尺寸。

錨定自動調整橫幅廣告採用固定長寬比，而非固定大小，顯示比例接近 320x50。您只需指定最大可用寬度，Google Mobile Ads SDK 就會根據該寬度傳回高度適中的廣告。只要寬度不變，每次請求載入的廣告高度都會保持一致，廣告重新整理時也不會造成周圍內容位移。

請務必使用測試廣告進行測試

建構及測試應用程式時，請務必使用測試廣告，而非實際運作中的廣告，否則可能導致帳戶遭停權。

如要載入測試廣告，最簡單的方法是使用橫幅廣告專用的測試廣告單元 ID：

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

測試廣告單元會在每次請求時傳回測試廣告。在編寫程式碼、測試及偵錯階段，您可以自由在應用程式中使用這些廣告單元，但發布前記得要換成自己的廣告單元 ID。

取得廣告大小

如要請求大小合適的橫幅廣告，請按照下列步驟操作：

  1. 使用 MediaQuery.of(context) 取得裝置螢幕寬度，單位為密度獨立像素 (dp)。如果不想使用全螢幕寬度，可以自行設定寬度。

  2. 使用 AdSize 類別中對應的靜態方法取得 AdSize 物件。例如，使用 AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width) 取得符合目前螢幕方向的廣告大小。

// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
  MediaQuery.sizeOf(context).width.truncate(),
);
main.dart

載入廣告

以下是載入橫幅廣告的程式碼範例：

void _loadAd() async {
  // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
  final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
    MediaQuery.sizeOf(context).width.truncate(),
  );

  if (size == null) {
    // Unable to get width of anchored banner.
    return;
  }

  BannerAd(
    adUnitId: _adUnitId,
    request: const AdRequest(),
    size: size,
    listener: BannerAdListener(
      onAdLoaded: (ad) {
        // Called when an ad is successfully received.
        debugPrint("Ad was loaded.");
        setState(() {
          _bannerAd = ad as BannerAd;
        });
      },
      onAdFailedToLoad: (ad, err) {
        // Called when an ad request failed.
        debugPrint("Ad failed to load with error: $err");
        ad.dispose();
      },
    ),
  ).load();
}
main.dart

您可以使用 BannerAdListener 監聽生命週期事件，例如廣告載入完成的時刻。這個範例會導入每個方法，並在控制台中記下資訊：

onAdOpened: (Ad ad) {
  // Called when an ad opens an overlay that covers the screen.
  debugPrint("Ad was opened.");
},
onAdClosed: (Ad ad) {
  // Called when an ad removes an overlay that covers the screen.
  debugPrint("Ad was closed.");
},
onAdImpression: (Ad ad) {
  // Called when an impression occurs on the ad.
  debugPrint("Ad recorded an impression.");
},
onAdClicked: (Ad ad) {
  // Called when an a click event occurs on the ad.
  debugPrint("Ad was clicked.");
},
onAdWillDismissScreen: (Ad ad) {
  // iOS only. Called before dismissing a full screen view.
  debugPrint("Ad will be dismissed.");
},
main.dart

重新整理廣告

如已設定廣告單元重新整理功能，廣告載入失敗時，就不需要請求其他廣告。Google Mobile Ads SDK 會套用您在 AdMob UI 指定的重新整理頻率。如果您未啟用重新整理功能，請發出新請求。請參閱「為橫幅廣告使用自動重新整理功能」一文，進一步瞭解廣告單元重新整理功能 (例如設定重新整理頻率)。

顯示橫幅廣告

如要將 BannerAd 顯示為小工具，請務必在呼叫 load() 後，使用支援的廣告例項化 AdWidget。雖然可以在呼叫 load() 前建立小工具，但必須呼叫 load() 後，才能將其加入小工具樹狀結構。

AdWidget 本身繼承自 Flutter 的 Widget 類別，可以像其他小工具一樣使用。在 iOS 平台上，請務必將小工具放在明確指定高度與寬度的容器中，否則廣告可能無法正常顯示。您可以將 BannerAd 放進符合廣告大小的容器中：

if (_bannerAd != null)
  Align(
    alignment: Alignment.bottomCenter,
    child: SafeArea(
      child: SizedBox(
        width: _bannerAd!.size.width.toDouble(),
        height: _bannerAd!.size.height.toDouble(),
        child: AdWidget(ad: _bannerAd!),
      ),
    ),
  ),
main.dart

不再需要某則廣告時，請務必釋放相關資源。呼叫 dispose() 的最佳時機包括：AdWidget 從小工具樹狀結構中移除後，或在 BannerAdListener.onAdFailedToLoad() 回呼中執行。

大功告成！您的應用程式已能順利顯示橫幅廣告。

Android 9 以下版本的捲動限制

部分搭載 Android 9 以下版本的舊型或性能較弱的裝置，在顯示可隨畫面捲動的內嵌橫幅廣告時，可能出現效能不佳情形。建議您只在 Android 10 以上版本中使用這類橫幅廣告。錨定橫幅廣告等固定位置的橫幅廣告則不受影響，在所有 Android API 級別上都能展現最佳效能。

GitHub 上的完整範例

如要查看本頁面涵蓋的橫幅廣告整合完整範例，請參閱 banner_example。

瞭解其他類型的橫幅廣告

請熟悉本節介紹的其他橫幅廣告類型，以便在您的 Flutter 應用程式中靈活運用。

內嵌自動調整橫幅廣告

內嵌自動調整橫幅廣告的高度可變，尺寸比錨定自動調整橫幅廣告更大、更高。如果應用程式會在可捲動內容中放送橫幅廣告，內嵌自動調整橫幅廣告會是比錨定式更好的選擇。詳情請參閱「內嵌自動調整橫幅廣告」。

可收合橫幅廣告

「可收合橫幅廣告」一開始顯示時，會以較大尺寸重疊在畫面上，當使用者點按收合按鈕，廣告就會恢復為較小尺寸。您可以考慮使用這種橫幅廣告來進一步提高成效，詳情請參閱「可收合橫幅廣告」。