橫幅廣告

橫幅廣告會佔用應用程式版面配置的一部分，位於裝置螢幕的頂端或底部。使用者與應用程式互動時，這類通知會持續出現在螢幕上，且可能會在一段時間後自動重新整理。

本指南說明如何將 AdMob 的橫幅廣告整合至 Flutter 應用程式。除了程式碼片段和操作說明以外，也包含如何正確調整橫幅廣告的相關資訊。

一律使用測試廣告進行測試

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

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

ca-app-pub-3940256099942544/6300978111

ca-app-pub-3940256099942544/2934735716

測試廣告單元已設為針對每個請求傳回測試廣告，而您可以在自己的應用程式中自由使用這些廣告單元，藉此編寫、測試及偵錯。請務必先將這些編號換成自己的廣告單元 ID，再發布應用程式。

載入廣告

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

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/6300978111'
    : 'ca-app-pub-3940256099942544/2934735716';

  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: AdSize.banner,
      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();
  }
}

橫幅廣告大小

下表列出標準橫幅廣告大小。

如要定義自訂橫幅大小，請設定偏好的 AdSize：

final AdSize adSize = AdSize(300, 50);

橫幅廣告事件

透過使用 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/6300978111'
    : 'ca-app-pub-3940256099942544/2934735716';


  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: AdSize.banner,
      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() 的最佳做法是在小工具樹狀結構或 BannerAdListener.onAdFailedToLoad() 回呼中移除 AdWidget 後。

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

Android 9 以下版本的捲動限制

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

GitHub 上的完整範例

橫幅