橫幅廣告

選取平台： Android iOS Unity Flutter

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

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

錨定自動調整橫幅廣告是固定長寬比的廣告，而非固定大小的廣告。長寬比與 320x50 類似。指定可用全寬後，Google Mobile Ads SDK 會傳回適合該寬度的最佳高度廣告。不同廣告請求的廣告最佳高度維持不變，且廣告重新整理時，廣告周圍的內容會留在原位。

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

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

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

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

測試廣告單元已設定為針對每個請求傳回測試廣告，您可以在編寫、測試及偵錯程式碼時，自由地在自己的應用程式中使用這些廣告單元。發布應用程式前，請務必將這些 ID 換成您自己的廣告單元 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());

載入廣告

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

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

重新整理廣告

如果您已將廣告單元設為重新整理，廣告載入失敗時，就不必再次要求廣告。Google Mobile Ads SDK 會遵守您在 AdMob 使用者介面中指定的任何重新整理頻率。如果尚未啟用重新整理功能，請發出新的要求。如要進一步瞭解廣告單元重新整理功能，例如設定重新整理頻率，請參閱「使用橫幅廣告自動重新整理功能」。

顯示橫幅廣告

如要將 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 應用程式。

自動調整內嵌橫幅廣告

內嵌自動調整橫幅廣告的高度可變動，且比錨定自動調整橫幅廣告更大、更高。如果應用程式在可捲動內容中放送橫幅廣告，建議使用自動調整內嵌橫幅廣告，而非自動調整錨定橫幅廣告。詳情請參閱「內嵌自動調整式橫幅」。

可收合橫幅廣告

可收合橫幅廣告一開始會以較大的重疊廣告顯示，並提供按鈕，可將廣告收合為較小尺寸。建議使用這個橫幅，進一步提升成效。詳情請參閱可收合橫幅廣告。