橫幅

橫幅廣告會刊登在應用程式版面的頂端或底部 裝置畫面上在使用者與應用程式互動時，這類廣告會持續顯示在畫面上， 且會在一段特定時間過後自動重新整理

本指南說明如何將 AdMob 的橫幅廣告整合至 Flutter 應用程式。除了程式碼片段和操作說明外，我們還提供 瞭解如何正確調整橫幅廣告大小

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

建構及測試應用程式時，請務必使用測試廣告，而非 現場及正式環境廣告否則可能導致帳戶遭到停權。

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

Android

ca-app-pub-3940256099942544/6300978111

iOS

ca-app-pub-3940256099942544/2934735716

測試廣告單元會設為針對每個請求傳回測試廣告。 您可以在自己的應用程式中使用這些 API，編寫程式碼、測試及偵錯。 您只要先將這些內容換成自己的廣告單元編號，再發布 應用程式。

載入廣告

以下範例將橫幅廣告執行個體化：

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();
  }
}

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

大小，以 dp 為單位 (寬 x 高) 說明 AdSize 常數
320x50 標準橫幅廣告 banner
320x100 大型橫幅廣告 largeBanner
320x250 中矩形廣告 mediumRectangle
468x60 全尺寸橫幅廣告 fullBanner
728x90 超級橫幅廣告 leaderboard
提供的寬度 x 自適應高度 自動調整橫幅廣告 無

如要定義自訂橫幅大小，請設定偏好的 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，您必須將 AdWidget 執行個體化 (呼叫 load() 後搭配支援的廣告)你可以先建立小工具 呼叫 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 上的完整範例

橫幅