橫幅

選取平台: Android iOS Unity Flutter

橫幅廣告會占據應用程式版面配置的一部分,通常位於裝置畫面頂端或底部。在使用者操作應用程式時,橫幅廣告會持續停留在畫面上,並能定時自動更新內容。

本指南會引導您開始使用錨定自動調整橫幅廣告。這種廣告的特色是,您只需指定廣告寬度,它就會自動調整為適合各種裝置的尺寸。

錨定自動調整橫幅廣告採用固定長寬比,而非固定大小,顯示比例接近 320x50。您只需指定最大可用寬度,Google Mobile Ads SDK 就會根據該寬度傳回高度適中的廣告。只要寬度不變,每次請求載入的廣告高度都會保持一致,廣告重新整理時也不會造成周圍內容位移。

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

建構及測試應用程式時,請務必使用測試廣告,而非實際的正式廣告;若未遵守此規定,可能導致帳戶遭到停權。

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

/21775744923/example/adaptive-banner

測試廣告單元會在每次請求時傳回測試廣告。在編寫程式碼、測試及偵錯階段,您可以自由在應用程式中使用這些廣告單元,但發布前記得要換成自己的廣告單元 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(),
);

載入廣告

以下是載入橫幅廣告的程式碼範例:

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

  if (size == null) {
    // Unable to get width of anchored banner.
    return;
  }

  BannerAd(
    adUnitId: _adUnitId,
    request: const AdRequest(),
    size: size,
    listener: BannerAdListener(
      onAdLoaded: (ad) {
        // Called when an ad is successfully received.
        debugPrint("Ad was loaded.");
        setState(() {
          _bannerAd = ad as BannerAd;
        });
      },
      onAdFailedToLoad: (ad, err) {
        // Called when an ad request failed.
        debugPrint("Ad failed to load with error: $err");
        ad.dispose();
      },
    ),
  ).load();
}

您可以使用 AdManagerBannerAdListener 監聽生命週期事件,例如廣告載入完成的時刻。以下示範如何實作每個方法,並將訊息記錄到控制台:

onAdOpened: (Ad ad) {
  // Called when an ad opens an overlay that covers the screen.
  debugPrint("Ad was opened.");
},
onAdClosed: (Ad ad) {
  // Called when an ad removes an overlay that covers the screen.
  debugPrint("Ad was closed.");
},
onAdImpression: (Ad ad) {
  // Called when an impression occurs on the ad.
  debugPrint("Ad recorded an impression.");
},
onAdClicked: (Ad ad) {
  // Called when an a click event occurs on the ad.
  debugPrint("Ad was clicked.");
},
onAdWillDismissScreen: (Ad ad) {
  // iOS only. Called before dismissing a full screen view.
  debugPrint("Ad will be dismissed.");
},

重新整理廣告

如果您的廣告單元已設為會自動重新整理,當廣告載入失敗,就無需再次發送請求。Google Mobile Ads SDK 會依照您在 Ad Manager 使用者介面指定的重新整理頻率執行。若未啟用重新整理功能,則需重新發送請求。如要進一步瞭解廣告單元的重新整理功能,例如怎麼設定重新整理頻率,請參閱「行動應用程式中廣告的重新整理頻率」。

顯示橫幅廣告

如要將 AdManagerBannerAd 顯示為小工具,您必須在呼叫 load() 後,使用支援的廣告例項化 AdWidget。您可以在呼叫 load() 之前建立小工具,但必須先呼叫 load(),才能將小工具新增至小工具樹狀結構。

AdWidget 本身繼承自 Flutter 的 Widget 類別,可以像其他小工具一樣使用。在 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 級別上都能展現最佳效能。

瞭解其他類型的橫幅廣告

請熟悉本節介紹的其他橫幅廣告類型,以便在您的 Flutter 應用程式中靈活運用。

內嵌自動調整橫幅廣告

內嵌自動調整橫幅廣告的高度可變,尺寸比錨定自動調整橫幅廣告更大、更高。如果應用程式需要在可捲動的內容中放送橫幅廣告,建議優先採用內嵌自動調整橫幅廣告。詳情請參閱「內嵌自動調整橫幅廣告」。

可收合橫幅廣告

可收合橫幅廣告一開始出現時,會以較大尺寸重疊在畫面上,使用者點選上面的按鈕就能收合縮小。您可以考慮使用這種橫幅廣告來進一步提升成效,詳情請參閱「可收合橫幅廣告」。