跳至主要內容
目錄

將廣告新增至您的行動 Flutter 應用程式或遊戲

目錄

許多開發者會使用廣告來將他們的行動應用程式和遊戲變現。這樣能讓他們的應用程式免費下載，進而提高應用程式的受歡迎程度。

An illustration of a smartphone showing an ad

若要將廣告加入您的 Flutter 專案，請使用 Google 的行動廣告平台 AdMob。本食譜示範如何使用 google_mobile_ads 套件，在您的應用程式或遊戲中加入橫幅廣告。

1. 取得 AdMob 應用程式 ID

#

  1. 前往 AdMob 並設定帳戶。這可能需要一些時間，因為您需要提供銀行資訊、簽署合約等等。

  2. AdMob 帳戶準備就緒後，在 AdMob 中建立兩個應用程式：一個用於 Android，另一個用於 iOS。

  3. 開啟應用程式設定區段。

  4. 取得 Android 和 iOS 應用程式的 AdMob 應用程式 ID。它們類似 ca-app-pub-1234567890123456~1234567890。請注意兩個數字之間的分號 (~)。

    Screenshot from AdMob showing the location of the App ID

2. 特定平台的設定

#

更新您的 Android 和 iOS 設定，以包含您的應用程式 ID。

Android

#

將您的 AdMob 應用程式 ID 新增至您的 Android 應用程式。

  1. 開啟應用程式的 android/app/src/main/AndroidManifest.xml 檔案。

  2. 新增一個新的 <meta-data> 標籤。

  3. 將 android:name 元素的值設定為 com.google.android.gms.ads.APPLICATION_ID。

  4. 將 android:value 元素的值設定為您在上一個步驟中取得的 AdMob 應用程式 ID。將它們放在引號中，如下所示

    xml
    <manifest>
    <application>
        ...

        <!-- Sample AdMob app ID: ca-app-pub-3940256099942544~3347511713 -->
        <meta-data
            android:name="com.google.android.gms.ads.APPLICATION_ID"
            android:value="ca-app-pub-xxxxxxxxxxxxxxxx~yyyyyyyyyy"/>
    </application>
</manifest>

iOS

#

將您的 AdMob 應用程式 ID 新增至您的 iOS 應用程式。

  1. 開啟應用程式的 ios/Runner/Info.plist 檔案。

  2. 用 key 標籤包住 GADApplicationIdentifier。

  3. 用 string 標籤包住您的 AdMob 應用程式 ID。您在步驟 1 中建立了此 AdMob 應用程式 ID。

    xml
    <key>GADApplicationIdentifier</key>
<string>ca-app-pub-################~##########</string>

3. 新增 google_mobile_ads 外掛程式

#

若要將 google_mobile_ads 外掛程式新增為依賴項目，請執行 flutter pub add

flutter pub add google_mobile_ads

4. 初始化 Mobile Ads SDK

#

您需要在載入廣告之前初始化 Mobile Ads SDK。

  1. 呼叫 MobileAds.instance.initialize() 以初始化 Mobile Ads SDK。

    dart
    void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  unawaited(MobileAds.instance.initialize());

  runApp(MyApp());
}

如上所示，在啟動時執行初始化步驟，讓 AdMob SDK 在需要之前有足夠的時間初始化。

5. 載入橫幅廣告

#

若要顯示廣告，您需要向 AdMob 請求廣告。

若要載入橫幅廣告，請建構一個 BannerAd 執行個體，並對其呼叫 load()。

dart
/// Loads a banner ad.
void _loadAd() {
  final bannerAd = BannerAd(
    size: widget.adSize,
    adUnitId: widget.adUnitId,
    request: const AdRequest(),
    listener: BannerAdListener(
      // Called when an ad is successfully received.
      onAdLoaded: (ad) {
        if (!mounted) {
          ad.dispose();
          return;
        }
        setState(() {
          _bannerAd = ad as BannerAd;
        });
      },
      // Called when an ad request failed.
      onAdFailedToLoad: (ad, error) {
        debugPrint('BannerAd failed to load: $error');
        ad.dispose();
      },
    ),
  );

  // Start loading.
  bannerAd.load();
}

若要檢視完整的範例，請查看本食譜的最後一個步驟。

6. 顯示橫幅廣告

#

一旦您有一個已載入的 BannerAd 執行個體，請使用 AdWidget 來顯示它。

dart
AdWidget(ad: _bannerAd)

最好將 Widget 包在 SafeArea 中（這樣裝置的缺口就不會遮擋到廣告的任何部分）和 SizedBox 中（這樣它在載入前後都會具有指定的恆定大小）。

dart
@override
Widget build(BuildContext context) {
  return SafeArea(
    child: SizedBox(
      width: widget.adSize.width.toDouble(),
      height: widget.adSize.height.toDouble(),
      child: _bannerAd == null
          // Nothing to render yet.
          ? SizedBox()
          // The actual ad.
          : AdWidget(ad: _bannerAd!),
    ),
  );
}

當您不再需要存取廣告時，必須處置廣告。呼叫 dispose() 的最佳做法是在 AdWidget 從 Widget 樹狀結構中移除之後，或在 BannerAdListener.onAdFailedToLoad() 回呼中進行。

dart
_bannerAd?.dispose();

7. 設定廣告

#

若要顯示測試廣告以外的任何內容，您必須註冊廣告單元。

  1. 開啟 AdMob。

  2. 為每個 AdMob 應用程式建立一個廣告單元。

    Screenshot of the location of Ad Units in AdMob web UI

    這會詢問廣告單元的格式。AdMob 提供了許多橫幅廣告以外的格式 --- 插頁式廣告、獎勵廣告、應用程式開啟廣告等等。這些的 API 類似，並記錄在 AdMob 文件和 官方範例中。

  3. 選擇橫幅廣告。

  4. 取得 Android 和 iOS 應用程式的廣告單元 ID。您可以在廣告單元區段中找到這些 ID。它們看起來像 ca-app-pub-1234567890123456/1234567890。格式類似於應用程式 ID，但兩個數字之間有一個斜線 (/)。這區分了廣告單元 ID 和應用程式 ID。

    Screenshot of an Ad Unit ID in AdMob web UI

  5. 根據目標應用程式平台，將這些廣告單元 ID 新增至 BannerAd 的建構函式。

    dart
    final String adUnitId = Platform.isAndroid
    // Use this ad unit on Android...
    ? 'ca-app-pub-3940256099942544/6300978111'
    // ... or this one on iOS.
    : 'ca-app-pub-3940256099942544/2934735716';

8. 最後潤飾

#

若要在已發佈的應用程式或遊戲中顯示廣告（與偵錯或測試情境相對），您的應用程式必須符合其他要求

  1. 您的應用程式必須經過審查和核准，才能完全放送廣告。請遵循 AdMob 的應用程式準備就緒指南。例如，您的應用程式必須在至少一個受支援的商店中列出，例如 Google Play 商店或 Apple App Store。

  2. 您必須建立一個 app-ads.txt 檔案並將其發佈在您的開發者網站上。

An illustration of a smartphone showing an ad

若要進一步了解應用程式和遊戲的變現，請瀏覽 AdMob 和 Ad Manager 的官方網站。

9. 完整範例

#

以下程式碼實作一個簡單的有狀態 Widget，可載入橫幅廣告並顯示它。

dart
import 'dart:io';

import 'package:flutter/widgets.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';

class MyBannerAdWidget extends StatefulWidget {
  /// The requested size of the banner. Defaults to [AdSize.banner].
  final AdSize adSize;

  /// The AdMob ad unit to show.
  ///
  /// TODO: replace this test ad unit with your own ad unit
  final String adUnitId = Platform.isAndroid
      // Use this ad unit on Android...
      ? 'ca-app-pub-3940256099942544/6300978111'
      // ... or this one on iOS.
      : 'ca-app-pub-3940256099942544/2934735716';

  MyBannerAdWidget({
    super.key,
    this.adSize = AdSize.banner,
  });

  @override
  State<MyBannerAdWidget> createState() => _MyBannerAdWidgetState();
}

class _MyBannerAdWidgetState extends State<MyBannerAdWidget> {
  /// The banner ad to show. This is `null` until the ad is actually loaded.
  BannerAd? _bannerAd;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SizedBox(
        width: widget.adSize.width.toDouble(),
        height: widget.adSize.height.toDouble(),
        child: _bannerAd == null
            // Nothing to render yet.
            ? SizedBox()
            // The actual ad.
            : AdWidget(ad: _bannerAd!),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    _loadAd();
  }

  @override
  void dispose() {
    _bannerAd?.dispose();
    super.dispose();
  }

  /// Loads a banner ad.
  void _loadAd() {
    final bannerAd = BannerAd(
      size: widget.adSize,
      adUnitId: widget.adUnitId,
      request: const AdRequest(),
      listener: BannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          if (!mounted) {
            ad.dispose();
            return;
          }
          setState(() {
            _bannerAd = ad as BannerAd;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, error) {
          debugPrint('BannerAd failed to load: $error');
          ad.dispose();
        },
      ),
    );

    // Start loading.
    bannerAd.load();
  }
}

除非另有說明，否則本網站上的文件反映的是 Flutter 的最新穩定版本。頁面上次更新時間為 2024-06-24。 檢視原始碼 或 回報問題。