橫幅廣告會放在應用程式的版面配置中,位於裝置螢幕的頂端或底部。這類廣告會在使用者與應用程式互動時持續顯示在畫面上,並在一段時間後自動重新整理。
本指南說明如何將 AdMob 的橫幅廣告整合至 Flutter 應用程式。除了程式碼片段和操作說明,也會包含如何正確調整橫幅廣告大小的資訊。
一律使用測試廣告進行測試
建構及測試應用程式時,請務必使用測試廣告,而非即時的實際廣告。否則可能導致帳戶遭到停權。
要載入測試廣告,最簡單的方法就是使用我們專屬的橫幅廣告測試廣告單元 ID:
Android
ca-app-pub-3940256099942544/6300978111
iOS
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(); } }
橫幅廣告大小
下表列出標準橫幅廣告大小。
大小,單位為 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
,您必須在呼叫 load()
後,使用受支援的廣告將 AdWidget
執行個體化。您可以在呼叫 load()
前建立小工具,但必須先呼叫 load()
,才能將其新增至小工具樹狀結構。
AdWidget
繼承自 Flutter 小工具類別,且使用方式與其他小工具相同。在 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 級別中以最佳效能使用。