AdMob-Anzeigen zu einer Flutter-App hinzufügen

1. Einführung

Inhalt

In diesem Codelab erfahren Sie, wie Sie einer App namens Awesome Drawing Quiz ein Banner, eine Interstitial-Anzeige und eine Anzeige mit Prämie hinzufügen. In diesem Spiel können Spieler den Namen der Zeichnung erraten.

Wenn beim Durcharbeiten dieses Codelab Probleme wie Code- oder Grammatikfehler oder unklare Formulierungen auftreten, melden Sie sie bitte. Klicken Sie dazu links unten im Codelab auf den Link Fehler melden.

Aufgaben in diesem Lab

  • So konfigurieren Sie das AdMob-Plug-in für Google Mobile Anzeigen
  • Banner, Interstitial-Anzeigen und Anzeigen mit Prämie in einer Flutter-App implementieren

Voraussetzungen

  • Android Studio 4.1 oder höher
  • Xcode 12 oder höher (für iOS-Entwicklung)

Wie würden Sie Ihre Erfahrung mit AdMob bewerten?

<ph type="x-smartling-placeholder"></ph> Neuling Leicht fortgeschritten Kompetent .

Wie würden Sie Ihre Erfahrung mit Flutter bewerten?

<ph type="x-smartling-placeholder"></ph> Neuling Leicht fortgeschritten Kompetent

2. Flutter-Entwicklungsumgebung einrichten

Für dieses Lab benötigen Sie zwei Softwareprogramme: das Flutter SDK und einen Editor.

Sie können das Codelab auf jedem dieser Geräte ausführen:

  • Ein physisches Android- oder iOS, das mit Ihrem Computer verbunden ist und sich im Entwicklermodus befindet.
  • Den iOS-Simulator (erfordert die Installation von Xcode-Tools).
  • Android-Emulator (Einrichtung in Android Studio erforderlich)
  • Ein Browser (zur Fehlerbehebung wird Chrome benötigt)
  • Als Windows-, Linux- oder macOS-Desktopanwendung Die Entwicklung muss auf der Plattform erfolgen, auf der Sie die Bereitstellung planen. Wenn Sie also eine Windows-Desktop-App entwickeln möchten, müssen Sie die Entwicklung unter Windows ausführen, damit Sie auf die entsprechende Build-Kette zugreifen können. Es gibt betriebssystemspezifische Anforderungen, die unter docs.flutter.dev/desktop ausführlich beschrieben werden.

Code herunterladen

Extrahieren Sie nach dem Herunterladen der ZIP-Datei den Inhalt. Sie haben einen Ordner mit dem Namen „admob-ads-in-flutter-master“.

Alternativ können Sie das GitHub-Repository über die Befehlszeile klonen:

$ git clone https://github.com/googlecodelabs/admob-ads-in-flutter

Das Repository enthält zwei Ordner:

  • android_studio_folder.pngstarter – Startet Code, den Sie in diesem Codelab erstellen.
  • android_studio_folder.pngcomplete – Vollständiger Code für dieses Codelab.

3. AdMob-App und Anzeigenblöcke einrichten

Da Flutter ein plattformübergreifendes SDK ist, müssen Sie in AdMob eine App und Anzeigenblöcke für Android und iOS hinzufügen.

Einrichtung für Android

Zur Einrichtung für Android müssen Sie eine Android-App hinzufügen und Anzeigenblöcke erstellen.

Android-App hinzufügen

  1. Klicken Sie in der AdMob-Konsole im Menü Apps auf APP HINZUFÜGEN.
  2. Wenn die Frage Haben Sie Ihre App bei Google Play oder im App Store veröffentlicht? angezeigt wird, klicken Sie auf Nein.
  3. Geben Sie in das Feld für den App-Namen Awesome Drawing Quiz ein und wählen Sie Android als Plattform aus.

ddafee37a6f92229.png

  1. Das Aktivieren von Nutzermesswerten ist für dieses Codelab nicht erforderlich. Wir empfehlen dies jedoch, da Sie so das Nutzerverhalten besser nachvollziehen können. Klicken Sie auf HINZUFÜGEN, um den Vorgang abzuschließen.

b918bf44362813a9.png

Anzeigenblöcke erstellen

So fügen Sie in AdMob Anzeigenblöcke hinzu:

  1. Wählen Sie in der AdMob-Konsole im Menü Apps die Option Awesome Drawing Quiz aus.
  2. Klicken Sie auf das Menü Anzeigenblöcke.

Banner

  1. Klicken Sie auf die Schaltfläche ANZEIGENBLOCK HINZUFÜGEN.
  2. Wählen Sie als Format Banner aus.
  3. Geben Sie in das Feld Name des Anzeigenblocks android-adq-banner ein.
  4. Klicken Sie auf ANZEIGENBLOCK ERSTELLEN, um den Vorgang abzuschließen.

Interstitial

  1. Klicken Sie auf die Schaltfläche ANZEIGENBLOCK HINZUFÜGEN.
  2. Wählen Sie als Format Interstitial aus.
  3. Geben Sie in das Feld Name des Anzeigenblocks android-adq-interstitial ein.
  4. Klicken Sie auf ANZEIGENBLOCK ERSTELLEN, um den Vorgang abzuschließen.

Mit Prämie

  1. Klicken Sie auf die Schaltfläche ANZEIGENBLOCK HINZUFÜGEN.
  2. Wählen Sie als Format Mit Prämie aus.
  3. Geben Sie in das Feld Name des Anzeigenblocks android-adq-rewarded ein.
  4. Behalten Sie die Standardeinstellungen für Prämieneinstellungen bei.
  5. Klicken Sie auf ANZEIGENBLOCK ERSTELLEN, um den Vorgang abzuschließen.

In der Regel dauert es einige Stunden, bis in einem neuen Anzeigenblock Anzeigen ausgeliefert werden können.

Wenn Sie die Funktionsweise der Anzeige sofort testen möchten, verwenden Sie die Test-App-ID und die Anzeigenblock-IDs, die in den Tabellen „Android-App-ID/Anzeigenblock-ID“ bzw. „iOS-App-ID/Anzeigenblock-ID“ aufgeführt sind.

Einrichtung für iOS

Für die Einrichtung für iOS müssen Sie eine iOS-App hinzufügen und Anzeigenblöcke erstellen.

iOS-Apps hinzufügen

  1. Klicken Sie in der AdMob-Konsole im Menü Apps auf APP HINZUFÜGEN.
  2. Wenn die Frage Haben Sie Ihre App bei Google Play oder im App Store veröffentlicht? angezeigt wird, klicken Sie auf Nein.
  3. Geben Sie in das Feld für den App-Namen Awesome Drawing Quiz ein und wählen Sie iOS als Plattform aus.

93e7f9f114232402.png

  1. Das Aktivieren von Nutzermesswerten ist für dieses Codelab nicht erforderlich. Wir empfehlen dies jedoch, da Sie so das Nutzerverhalten besser nachvollziehen können. Klicken Sie auf HINZUFÜGEN, um den Vorgang abzuschließen.

b918bf44362813a9.png

Anzeigenblöcke erstellen

So fügen Sie Anzeigenblöcke hinzu:

  1. Wählen Sie in der AdMob-Konsole im Menü Apps die App Awesome Drawing Quiz aus.
  2. Klicken Sie auf das Menü Anzeigenblöcke.

Banner

  1. Klicken Sie auf die Schaltfläche ANZEIGENBLOCK HINZUFÜGEN.
  2. Wählen Sie als Format Banner aus.
  3. Geben Sie in das Feld Name des Anzeigenblocks ios-adq-banner ein.
  4. Klicken Sie auf ANZEIGENBLOCK ERSTELLEN, um den Vorgang abzuschließen.

Interstitial

  1. Klicken Sie auf die Schaltfläche ANZEIGENBLOCK HINZUFÜGEN.
  2. Wählen Sie als Format Interstitial aus.
  3. Geben Sie in das Feld Name des Anzeigenblocks ios-adq-interstitial ein.
  4. Klicken Sie auf ANZEIGENBLOCK ERSTELLEN, um den Vorgang abzuschließen.

Mit Prämie

  1. Klicken Sie auf die Schaltfläche ANZEIGENBLOCK HINZUFÜGEN.
  2. Wählen Sie als Format Mit Prämie aus.
  3. Geben Sie in das Feld Name des Anzeigenblocks ios-adq-rewarded ein.
  4. Behalten Sie die Standardeinstellungen für Prämieneinstellungen bei.
  5. Klicken Sie auf ANZEIGENBLOCK ERSTELLEN, um den Vorgang abzuschließen.

In der Regel dauert es einige Stunden, bis in einem neuen Anzeigenblock Anzeigen ausgeliefert werden können.

Wenn Sie die Funktionsweise der Anzeige sofort testen möchten, verwenden Sie die Test-App-ID und die Anzeigenblock-IDs, die in der folgenden Tabelle aufgeführt sind.

Optional: Test-App und -Anzeigenblöcke von AdMob verwenden

Wenn Sie das Codelab verwenden möchten, anstatt selbst eine neue Anwendung und Anzeigenblöcke zu erstellen, können Sie die in den folgenden Tabellen aufgeführten Test-IDs für AdMob-Apps und Anzeigenblöcke verwenden.

Android-App-ID/Anzeigenblock-ID

Posten

App-ID/Anzeigenblock-ID

AdMob-App-ID

ca-app-pub-3940256099942544~3347511713

Banner

ca-app-pub-3940256099942544/6300978111

Interstitial

ca-app-pub-3940256099942544/1033173712

Verfügbar

ca-app-pub-3940256099942544/5224354917

iOS-App-ID/Anzeigenblock-ID

Posten

App-ID/Anzeigenblock-ID

AdMob-App-ID

ca-app-pub-3940256099942544~1458002511

Banner

ca-app-pub-3940256099942544/2934735716

Interstitial

ca-app-pub-3940256099942544/4411468910

Verfügbar

ca-app-pub-3940256099942544/1712485313

Weitere Informationen zu Testanzeigen finden Sie in der Entwicklerdokumentation zu Android-Testanzeigen und iOS-Testanzeigen.

4. Google Mobile Ads Flutter-Plug-in hinzufügen

Flutter verwendet Plug-ins, um Zugriff auf eine Vielzahl plattformspezifischer Dienste zu bieten. Plug-ins ermöglichen Ihnen den Zugriff auf Dienste und APIs auf jeder Plattform.

Das Plug-in google_mobile_ads unterstützt das Laden und Anzeigen von Banner-, Interstitial- und nativen Anzeigen sowie Anzeigen mit Prämie über die AdMob API.

Da Flutter ein plattformübergreifendes SDK ist, ist das Plug-in „google_mobile_ads“ sowohl für iOS als auch für Android anwendbar. Wenn Sie also das Plug-in zu Ihrer Flutter-App hinzufügen, wird es sowohl von der Android- als auch der iOS-Version der AdMob-App für Inline-Anzeigen verwendet.

Google Mobile Ads-Plug-in als Abhängigkeit hinzufügen

Wenn Sie über das Projekt für AdMob-Inline-Anzeigen auf die AdMob APIs zugreifen möchten, fügen Sie der Datei pubspec.yaml im Stammverzeichnis des Projekts google_mobile_ads als Abhängigkeit hinzu.

pubspec.yaml

...
environment:
  # TODO: Update the minimum sdk version to 2.12.0 to support null safety.
  sdk: ">=2.17.0 <3.0.0"

dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^3.0.1

  # TODO: Add google_mobile_ads as a dependency
  google_mobile_ads: ^1.2.0

...

Klicken Sie auf Pub get, um das Plug-in im Projekt Awesome Drawing Quiz zu installieren.

8ce73858eedbd8fc.png

AndroidManifest.xml (Android) aktualisieren

  1. Öffnen Sie die Datei android/app/src/main/AndroidManifest.xml in Android Studio.
  2. Fügen Sie Ihre AdMob-App-ID hinzu, indem Sie ein <meta-data>-Tag mit dem Namen com.google.android.gms.ads.APPLICATION_ID einfügen. Wenn Ihre AdMob-App-ID beispielsweise ca-app-pub-3940256099942544~3347511713 lautet, müssen Sie der Datei AndroidManifest.xml die folgenden Zeilen hinzufügen.

AndroidManifest.xml

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

</manifest>

Info.plist-Datei aktualisieren (iOS)

  1. Öffnen Sie die Datei ios/Runner/Info.plist in Android Studio.
  2. Fügen Sie einen GADApplicationIdentifier-Schlüssel mit dem Stringwert Ihrer AdMob-App-ID hinzu. Wenn Ihre AdMob-App-ID beispielsweise ca-app-pub-3940256099942544~1458002511 lautet, müssen Sie der Datei Info.plist die folgenden Zeilen hinzufügen.

ios/Runner/Info.plist

...
<key>GADApplicationIdentifier</key>
<string>ca-app-pub-3940256099942544~1458002511</string>
...

5. Hilfsklasse für Anzeigen hinzufügen

Erstellen Sie eine neue Datei mit dem Namen ad_helper.dart im Verzeichnis lib. Implementieren Sie dann die AdHelper-Klasse, die eine AdMob-App-ID und Anzeigenblock-IDs für Android und iOS bereitstellt.

Ersetzen Sie die AdMob-App-ID (ca-app-pub-xxxxxx~yyyyy) und die Anzeigenblock-ID (ca-app-pub-xxxxxxx/yyyyyyyy) durch die IDs, die Sie im vorherigen Schritt erstellt haben.

lib/ad_helper.dart

import 'dart:io';

class AdHelper {

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return '<YOUR_ANDROID_BANNER_AD_UNIT_ID>';
    } else if (Platform.isIOS) {
      return '<YOUR_IOS_BANNER_AD_UNIT_ID>';
    } else {
      throw UnsupportedError('Unsupported platform');
    }
  }

  static String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return '<YOUR_ANDROID_INTERSTITIAL_AD_UNIT_ID>';
    } else if (Platform.isIOS) {
      return '<YOUR_IOS_INTERSTITIAL_AD_UNIT_ID>';
    } else {
      throw UnsupportedError('Unsupported platform');
    }
  }

  static String get rewardedAdUnitId {
    if (Platform.isAndroid) {
      return '<YOUR_ANDROID_REWARDED_AD_UNIT_ID>';
    } else if (Platform.isIOS) {
      return '<YOUR_IOS_REWARDED_AD_UNIT_ID>';
    } else {
      throw UnsupportedError('Unsupported platform');
    }
  }
}

Verwenden Sie das folgende Code-Snippet, wenn Sie die AdMob-Test-App-ID und die Test-Anzeigenblock-IDs nutzen möchten.

lib/ad_helper.dart

import 'dart:io';

class AdHelper {

  static String get bannerAdUnitId {
    if (Platform.isAndroid) {
      return 'ca-app-pub-3940256099942544/6300978111';
    } else if (Platform.isIOS) {
      return 'ca-app-pub-3940256099942544/2934735716';
    } else {
      throw new UnsupportedError('Unsupported platform');
    }
  }

  static String get interstitialAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/1033173712";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/4411468910";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }

  static String get rewardedAdUnitId {
    if (Platform.isAndroid) {
      return "ca-app-pub-3940256099942544/5224354917";
    } else if (Platform.isIOS) {
      return "ca-app-pub-3940256099942544/1712485313";
    } else {
      throw new UnsupportedError("Unsupported platform");
    }
  }
}

6. Google Mobile Ads SDK initialisieren

Bevor Sie Anzeigen laden, müssen Sie das Google Mobile Ads SDK initialisieren. Öffnen Sie die Datei lib/home_route.dart und ändern Sie _initGoogleMobileAds(), um das SDK zu initialisieren, bevor die Startseite geladen wird.

Sie müssen den Rückgabetyp der Methode _initGoogleMobileAds() von Future<dynamic> in Future<InitializationStatus> ändern, um das Ergebnis der SDK-Initialisierung nach Abschluss zu erhalten.

home_route.dart

// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';

import 'package:flutter/material.dart';

...

class HomeRoute extends StatelessWidget {

  ...

  Future<InitializationStatus> _initGoogleMobileAds() {
    // TODO: Initialize Google Mobile Ads SDK
    return MobileAds.instance.initialize();
  }
}

7. Banneranzeige hinzufügen

In diesem Bereich platzieren Sie eine Banneranzeige oben auf dem Spielbildschirm, wie im folgenden Screenshot zu sehen ist.

276b4cfa283ea6c7.png

  1. Öffnen Sie die Datei lib/game_route.dart und importieren Sie ad_manager.dart
  2. Importieren Sie ad_helper.dart und google_mobile_ads.dart, indem Sie die folgenden Zeilen hinzufügen:

lib/game_route.dart

...

// TODO: Import ad_helper.dart
import 'package:awesome_drawing_quiz/ad_helper.dart';

// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';

class GameRoute extends StatefulWidget {
  ...
}
  1. Fügen Sie dem Kurs „_GameRouteState“ die folgenden Mitglieder für eine Banneranzeige hinzu.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _bannerAd
  BannerAd? _bannerAd;

  ...
}
  1. Erstellen und laden Sie in der Methode initState() ein BannerAd für das 320 x 50-Banner (AdSize.banner). Beachten Sie, dass ein Anzeigenereignis-Listener so konfiguriert ist, dass die Benutzeroberfläche (setState()) beim Laden einer Anzeige aktualisiert wird .

lib/game_route.dart

@override
void initState() {
  ...

  // TODO: Load a banner ad
  BannerAd(
    adUnitId: AdHelper.bannerAdUnitId,
    request: AdRequest(),
    size: AdSize.banner,
    listener: BannerAdListener(
      onAdLoaded: (ad) {
        setState(() {
          _bannerAd = ad as BannerAd;
        });
      },
      onAdFailedToLoad: (ad, err) {
        print('Failed to load a banner ad: ${err.message}');
        ad.dispose();
      },
    ),
  ).load();
}
  1. Passen Sie die Methode build() so an, dass eine Banneranzeige eingeblendet wird, sofern verfügbar.

lib/game_route.dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    ...
    body: SafeArea(
      child: Stack(
        children: [
          Center(
            ...
          ),
          // TODO: Display a banner when ready
          if (_bannerAd != null)
            Align(
              alignment: Alignment.topCenter,
              child: Container(
                width: _bannerAd!.size.width.toDouble(),
                height: _bannerAd!.size.height.toDouble(),
                child: AdWidget(ad: _bannerAd!),
              ),
            ),
        ],
      ),
    ),
    ...
  );
}
  1. Geben Sie die mit dem BannerAd-Objekt verknüpfte Ressource frei, indem Sie die Methode BannerAd.dispose() in der Callback-Methode dispose() aufrufen.

lib/game_route.dart

@override
void dispose() {
  // TODO: Dispose a BannerAd object
  _bannerAd?.dispose();

  ...

  super.dispose();
}

Fertig! Führen Sie das Projekt aus und starten Sie ein neues Spiel. Nachdem eine Anzeige geladen wurde, sehen Sie oben auf dem Bildschirm eine Banneranzeige.

276b4cfa283ea6c7.png

8. Interstitial-Anzeige hinzufügen

In diesem Bereich schalten Sie nach Ende des Spiels (insgesamt 5 Level) eine Interstitial-Anzeige.

  1. Öffnen Sie die Datei lib/game_route.dart.
  2. Fügen Sie in der Klasse _GameRouteState die folgenden Mitglieder und Methoden für eine Interstitial-Anzeige hinzu.

Ein Anzeigenereignis-Listener ist so konfiguriert, dass er prüft, ob die Anzeige bereit ist (onAdLoaded() und onAdFailedToLoad()) und dass der Startbildschirm der App angezeigt wird, wenn die Anzeige geschlossen wird (onAdDismissedFullScreenContent()).

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _interstitialAd
 InterstitialAd? _interstitialAd;

  // TODO: Implement _loadInterstitialAd()
  void _loadInterstitialAd() {
    InterstitialAd.load(
      adUnitId: AdHelper.interstitialAdUnitId,
      request: AdRequest(),
      adLoadCallback: InterstitialAdLoadCallback(
        onAdLoaded: (ad) {
          ad.fullScreenContentCallback = FullScreenContentCallback(
            onAdDismissedFullScreenContent: (ad) {
              _moveToHome();
            },
          );

          setState(() {
            _interstitialAd = ad;
          });
        },
        onAdFailedToLoad: (err) {
          print('Failed to load an interstitial ad: ${err.message}');
        },
      ),
    );
  }

  ...
}
  1. In diesem Codelab wird eine Interstitial-Anzeige eingeblendet, nachdem ein Nutzer fünf Level abgeschlossen hat. Um unnötige Anzeigenanfragen zu minimieren, fordern Sie eine Anzeige an, wenn ein Nutzer Level 3 erreicht.

Fügen Sie in der Methode onNewLevel() die folgenden Zeilen hinzu.

lib/game_route.dart

@override
void onNewLevel(int level, Drawing drawing, String clue) {
  ...

  // TODO: Load an Interstitial Ad
  if (level >= 3 && _interstitialAd == null) {
    _loadInterstitialAd();
  }
}
  1. Wenn ein Spiel beendet ist, wird das Dialogfeld für den Spielstand angezeigt. Wenn ein Nutzer das Dialogfeld schließt, wird er zum Startbildschirm des Quiz zum Zeichnen weitergeleitet.

Da Interstitial-Anzeigen zwischen Bildschirmübergängen eingeblendet werden sollen, wird sie eingeblendet, wenn ein Nutzer auf die Schaltfläche SCHLIEẞEN klickt.

Ändern Sie die Methode onGameOver() wie folgt.

lib/game_route.dart

@override
void onGameOver(int correctAnswers) {
  showDialog(
    context: _scaffoldKey.currentContext,
    builder: (context) {
      return AlertDialog(
        title: Text('Game over!'),
        content: Text('Score: $correctAnswers/5'),
        actions: [
          FlatButton(
            child: Text('close'.toUpperCase()),
            onPressed: () {

              // TODO: Display an Interstitial Ad
              if (_interstitialAd != null) {
                _interstitialAd?.show();
              } else {
                _moveToHome();
              }
            },
          ),
        ],
      );
    },
  );
}
  1. Geben Sie die mit dem InterstitialAd-Objekt verknüpfte Ressource frei, indem Sie die Methode InterstitialAd.dispose() in der Callback-Methode dispose() aufrufen.

lib/game_route.dart

@override
void dispose() {
  ...

  // TODO: Dispose an InterstitialAd object
  _interstitialAd?.dispose();

  ...

  super.dispose();
}

Fertig! Führen Sie das Projekt aus und schließen Sie das Spiel ab. Wenn eine Interstitial-Anzeige geladen wird, sehen Sie eine Interstitial-Anzeige, sobald Sie im Bewertungsdialogfeld auf SCHLIEẞEN klicken.

c546e438c405e941.gif

9. Anzeige mit Prämie hinzufügen

In diesem Abschnitt fügen Sie eine Anzeige mit Prämie hinzu, über die der Nutzer einen zusätzlichen Hinweis als Prämie erhält.

  1. Öffnen Sie die Datei lib/game_route.dart.
  2. Fügen Sie in der Klasse _GameRouteState Mitglieder für eine Anzeige mit Prämie hinzu und implementieren Sie die Methode _loadRewardedAd(). Beim Schließen der Anzeige (onAdDismissedFullScreenContent) wird eine weitere Anzeige mit Prämie geladen, um sie so früh wie möglich im Cache zu speichern.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _rewardedAd
  RewardedAd? _rewardedAd;

  // TODO: Implement _loadRewardedAd()
  void _loadRewardedAd() {
    RewardedAd.load(
      adUnitId: AdHelper.rewardedAdUnitId,
      request: AdRequest(),
      rewardedAdLoadCallback: RewardedAdLoadCallback(
        onAdLoaded: (ad) {
          ad.fullScreenContentCallback = FullScreenContentCallback(
            onAdDismissedFullScreenContent: (ad) {
              setState(() {
                ad.dispose();
                _rewardedAd = null;
              });
              _loadRewardedAd();
            },
          );

          setState(() {
            _rewardedAd = ad;
          });
        },
        onAdFailedToLoad: (err) {
          print('Failed to load a rewarded ad: ${err.message}');
        },
      ),
    );
  }

  ...
}
  1. Rufen Sie _loadRewardedAd() über die Methode initState() auf, um zu Beginn des Spiels eine Anzeige mit Prämie anzufordern.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  @override
  void initState() {
    ...

    // COMPLETE: Load a Rewarded Ad
    _loadRewardedAd();
  }


  ...
}
  1. Nutzern erlauben, sich eine Anzeige mit Prämie anzusehen, indem sie auf die schwebende Aktionsschaltfläche klicken. Die Schaltfläche wird nur angezeigt, wenn ein Nutzer im aktuellen Level keinen Hinweis verwendet hat und eine Anzeige mit Prämie geladen wurde.

Ändern Sie die Methode _buildFloatingActionButton() so, dass die unverankerte Aktionsschaltfläche angezeigt wird. Beachte, dass durch Rückgabe von null die Schaltfläche auf dem Bildschirm ausgeblendet wird.

onUserEarnedReward ist das wichtigste Anzeigenereignis in einer Anzeige mit Prämie. Sie wird ausgelöst, wenn ein Nutzer berechtigt ist, eine Prämie zu erhalten, z. B. wenn er sich ein Video angesehen hat.

In diesem Codelab wird die Methode QuizManager.instance.useHint() über den Callback aufgerufen. Dabei wird ein weiteres Zeichen im Hinweisstring angezeigt. Die Anzeige mit Prämie wird im onAdClosed-Callback neu geladen, damit sie so früh wie möglich verfügbar ist.

lib/game_route.dart

Widget? _buildFloatingActionButton() {
  // TODO: Return a FloatingActionButton if a rewarded ad is available
  return (!QuizManager.instance.isHintUsed && _rewardedAd != null)
      ? FloatingActionButton.extended(
          onPressed: () {
            showDialog(
              context: context,
              builder: (context) {
                return AlertDialog(
                  title: Text('Need a hint?'),
                  content: Text('Watch an Ad to get a hint!'),
                  actions: [
                    TextButton(
                      child: Text('cancel'.toUpperCase()),
                      onPressed: () {
                        Navigator.pop(context);
                      },
                    ),
                    TextButton(
                      child: Text('ok'.toUpperCase()),
                      onPressed: () {
                        Navigator.pop(context);
                        _rewardedAd?.show(
                          onUserEarnedReward: (_, reward) {
                            QuizManager.instance.useHint();
                          },
                        );
                      },
                    ),
                  ],
                );
              },
            );
          },
          label: Text('Hint'),
          icon: Icon(Icons.card_giftcard),
        )
      : null;
}
  1. Geben Sie die mit dem RewardedAd-Objekt verknüpfte Ressource frei, indem Sie die Methode RewardedAd.dispose() in der Callback-Methode dispose() aufrufen.

lib/game_route.dart

@override
void dispose() {
  ...

  // TODO: Dispose a RewardedAd object
  _rewardedAd?.dispose();

  ...

  super.dispose();
}

Fertig! Führen Sie das Projekt aus und spielen Sie das Spiel. Sobald eine Anzeige mit Prämie geladen wurde, wird unten auf dem Bildschirm eine Hinweisschaltfläche angezeigt. Klicken Sie auf die Schaltfläche Hinweis, um einen weiteren Hinweis zu erhalten.

4a114d243ae3e71d.gif

10. Fertig

Du hast das Codelab abgeschlossen. Du findest den fertigen Code für dieses Codelab im Ordner android_studio_folder.pngcomplete.

Informationen zum Implementieren von Bannern und nativen Inline-Anzeigen finden Sie im Codelab AdMob-Banner und native Inline-Anzeigen zu einer Flutter-App hinzufügen.

Weitere Informationen finden Sie in den anderen Flutter-Codelabs.