插頁式廣告

插頁式廣告會全螢幕顯示,覆蓋整個應用程式的介面。這類廣告通常會在應用程式流程中的自然轉換點顯示,例如活動之間或遊戲關卡之間的暫停期間。應用程式顯示插頁式廣告時,使用者可選擇輕觸廣告前往到達網頁,或是關閉廣告並返回應用程式。

本指南說明如何將插頁式廣告整合至 Flutter 應用程式。

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

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

如要載入測試廣告,最簡單的方法就是使用我們專用的插頁式廣告專用廣告單元 ID:

Android

ca-app-pub-3940256099942544/1033173712

iOS

ca-app-pub-3940256099942544/4411468910

測試廣告單元已設為針對每個請求傳回測試廣告,而您可以在自己的應用程式中自由使用這些廣告單元,藉此編寫、測試及偵錯。請務必先將這些編號換成自己的廣告單元 ID,再發布應用程式。

載入廣告

以下範例會載入插頁式廣告:

class InterstitialExampleState extends State<InterstitialExample> {
  InterstitialAd? _interstitialAd;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/1033173712'
    : 'ca-app-pub-3940256099942544/4411468910';

  /// Loads an interstitial ad.
  void loadAd() {
    InterstitialAd.load(
        adUnitId: adUnitId,
        request: const AdRequest(),
        adLoadCallback: InterstitialAdLoadCallback(
          // Called when an ad is successfully received.
          onAdLoaded: (ad) {
            debugPrint('$ad loaded.');
            // Keep a reference to the ad so you can show it later.
            _interstitialAd = ad;
          },
          // Called when an ad request failed.
          onAdFailedToLoad: (LoadAdError error) {
            debugPrint('InterstitialAd failed to load: $error');
          },
        ));
  }
}

插頁式廣告事件

透過使用 FullScreenContentCallback,您可以監聽生命週期事件,例如廣告顯示或關閉的時間。只要在顯示廣告前設定 InterstitialAd.fullScreenContentCallback,即可接收這些事件的通知。以下範例會實作每個方法:

class InterstitialExampleState extends State<InterstitialExample> {
  InterstitialAd? _interstitialAd;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/1033173712'
    : 'ca-app-pub-3940256099942544/4411468910';

  /// Loads an interstitial ad.
  void loadAd() {
    InterstitialAd.load(
        adUnitId: adUnitId,
        request: const AdRequest(),
        adLoadCallback: InterstitialAdLoadCallback(
          // Called when an ad is successfully received.
          onAdLoaded: (ad) {
             ad.fullScreenContentCallback = FullScreenContentCallback(
                // Called when the ad showed the full screen content.
                onAdShowedFullScreenContent: (ad) {},
                // Called when an impression occurs on the ad.
                onAdImpression: (ad) {},
                // Called when the ad failed to show full screen content.
                onAdFailedToShowFullScreenContent: (ad, err) {
                  // Dispose the ad here to free resources.
                  ad.dispose();
                },
                // Called when the ad dismissed full screen content.
                onAdDismissedFullScreenContent: (ad) {
                  // Dispose the ad here to free resources.
                  ad.dispose();
                },
                // Called when a click is recorded for an ad.
                onAdClicked: (ad) {});

            debugPrint('$ad loaded.');
            // Keep a reference to the ad so you can show it later.
            _interstitialAd = ad;
          },
          // Called when an ad request failed.
          onAdFailedToLoad: (LoadAdError error) {
            debugPrint('InterstitialAd failed to load: $error');
          },
        ));
  }
}

顯示插頁式廣告

InterstitialAd 會顯示為 Overlay 在所有應用程式內容上方,並以靜態方式放置,因此無法新增至 Flutter 小工具樹狀結構。您可以呼叫 show() 來選擇廣告的顯示時機。

_interstitiaAd.show();

呼叫 show() 後,無法以程式輔助方式關閉以這種方式顯示的 Ad,必須要求使用者輸入內容。InterstitialAd 只能顯示一次,後續的呼叫將觸發 onAdFailedToShowFullScreenContent

如果不再需要某則廣告,就必須拒登。呼叫 dispose() 的時機,最佳做法是在 FullScreenContentCallback.onAdDismissedFullScreenContentFullScreenContentCallback.onAdFailedToShowFullScreenContent 回呼中。

大功告成!您的應用程式已準備好顯示插頁式廣告。

後續步驟

GitHub 上的完整範例

插頁式廣告