橫幅

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

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

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

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

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

  • /6499/example/banner

測試廣告單元經過設定，可在每次請求時傳回測試廣告，因此您在編寫程式碼、測試及偵錯時，可以在自己的應用程式中免費使用。請務必先將這些內容換成您自己的廣告單元 ID，再發布應用程式。

載入廣告

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

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

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/6499/example/banner';

  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: AdSize.banner,
      listener: AdManagerBannerAdListener(
        // 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('AdManagerBannerAd 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);

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

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

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/6499/example/banner';


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

顯示橫幅廣告

如要以小工具的形式顯示 AdManagerBannerAd，您必須在呼叫 load() 後，使用受支援的廣告將 AdWidget 執行個體化。您可以在呼叫 load() 前建立小工具，但必須先呼叫 load()，才能將其新增至小工具樹狀結構。

AdWidget 繼承自 Flutter 小工具類別，且使用方式與其他小工具相同。在 iOS 上，請務必將小工具放在指定寬度和高度的小工具中。否則您的廣告可能不會顯示。AdManagerBannerAd 可以放在大小與廣告相符的容器中：

...
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 從小工具樹狀結構或 AdManagerBannerAdListener.onAdFailedToLoad() 回呼中移除後。

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

Android 9 以下版本的捲動限制

我們知道有些搭載 Android 9 以下版本的舊型或效能較差的裝置，在捲動檢視畫面中顯示內嵌橫幅廣告時，可能會改善效能。我們建議只在 Android 10 以上版本使用這些類型的橫幅廣告。固定位置橫幅 (例如錨定橫幅廣告) 不會受到影響，且可在所有 Android API 級別中以最佳效能使用。