本頁面由 Cloud Translation API 翻譯而成。

橫幅

橫幅廣告會占用應用程式版面配置中的一個位置，位於裝置螢幕的頂端或底部。使用者與應用程式互動時，橫幅廣告會顯示在畫面上，且可在一段時間後自動重新整理。

本指南將說明如何開始使用錨定自動調整橫幅廣告。錨定自動調整橫幅廣告會根據您指定的廣告寬度，為每部裝置最佳化廣告大小。

錨定自動調整橫幅廣告是固定顯示比例的廣告，而非固定大小廣告。顯示比例也近 320x50指定可用的全寬度後，Google Mobile Ads SDK 會傳回廣告，並以該寬度提供最佳高度。廣告的最佳高度會在不同廣告請求中保持不變，廣告刷新時，廣告周圍的內容也會維持原位。

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

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

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

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

測試廣告單元會在每個請求中傳回測試廣告，您可以在編寫程式碼、測試和偵錯時，在自己的應用程式中自由使用這些廣告。請務必在發布應用程式前，將這些 ID 替換為您自己的廣告單元 ID。

取得廣告大小

如要請求正確廣告尺寸的橫幅廣告，請按照下列步驟操作：

使用 MediaQuery.of(context) 取得裝置螢幕的寬度，以密度獨立像素 (dp) 為單位。如果您不想使用全螢幕寬度，可以自行設定寬度。
請使用 AdSize 類別的適當靜態方法取得 AdSize 物件。舉例來說，您可以使用 AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width) 取得目前方向的廣告尺寸。

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

載入廣告

以下範例會將橫幅廣告例項化：

class BannerExampleState extends State<BannerExample>{
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';

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

    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      listener: BannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('BannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
      ),
    )..load();
  }
}

橫幅廣告事件

您可以使用 BannerAdListener 監聽生命週期事件，例如廣告載入時的事件。這個範例會實作每個方法，並將訊息記錄至主控台：

class BannerExampleState extends State<BannerExample> {
  BannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/9214589741'
    : 'ca-app-pub-3940256099942544/2435281174';


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

    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: size,
      listener: BannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('BannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
        // Called when an ad opens an overlay that covers the screen.
        onAdOpened: (Ad ad) {},
        // Called when an ad removes an overlay that covers the screen.
        onAdClosed: (Ad ad) {},
        // Called when an impression occurs on the ad.
        onAdImpression: (Ad ad) {},
      ),
    )..load();
  }
}

顯示橫幅廣告

如要將 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!),
      ),
    ),
  )
}

廣告必須在不再需要存取權時處置。呼叫 dispose() 的最佳做法是，在 AdWidget 從小工具樹中移除後，或在 BannerAdListener.onAdFailedToLoad() 回呼中呼叫。

大功告成！您的應用程式現在可以顯示橫幅廣告了。

Android 9 以下版本的捲動限制

我們瞭解，部分搭載 Android 9 以下版本的舊款或效能較低裝置，在捲動檢視畫面中顯示內嵌橫幅廣告時，可能會出現效能不佳的情形。建議您只在 Android 10 以上版本中使用這類橫幅廣告。固定位置橫幅廣告 (例如錨定橫幅廣告) 不受影響，可在所有 Android API 級別上以最佳效能使用。

GitHub 上的完整範例

如需本頁所述橫幅整合功能的完整範例，請參閱 banner_example。

瞭解其他橫幅類型

請熟悉本節為您的 Flutter 應用程式定義的其他類型橫幅。

內嵌自動調整橫幅廣告

內嵌自動調整橫幅廣告的高度可變，且相較於錨定自動調整橫幅廣告，內嵌自動調整橫幅廣告的尺寸更大、更高。如果應用程式會在可捲動內容中刊登橫幅廣告，則建議使用內嵌式自動調整橫幅廣告，而非錨定式自動調整橫幅廣告。詳情請參閱「內嵌式自動調整橫幅廣告」。

可收合橫幅廣告

可收合橫幅廣告是一種橫幅廣告，一開始會以較大的重疊廣告呈現，並提供可將廣告收合至較小尺寸的按鈕。建議您使用這則橫幅廣告進一步提升成效。詳情請參閱「可收合橫幅廣告」一文。