Dodawanie reklam AdMob do aplikacji Flutter

1. Wprowadzenie

Co utworzysz

Dzięki nim dowiesz się, jak dodać baner, reklamę pełnoekranową i reklamę z nagrodą do aplikacji Niesamowite rysowanie, czyli gry, która pozwala graczom odgadnąć nazwę rysunku.

Jeśli podczas wykonywania ćwiczeń z programowania napotkasz jakieś problemy (błędy w kodzie, błędy gramatyczne, niejasne sformułowania), zgłoś je, klikając link Zgłoś błąd w lewym dolnym rogu ćwiczenia.

Czego się nauczysz

  • Jak skonfigurować wtyczkę do reklam mobilnych Google AdMob
  • Jak wdrożyć w aplikacji Flutter baner, reklamy pełnoekranowe i reklamy z nagrodą

Czego potrzebujesz

  • Android Studio 4.1 lub nowszy
  • Xcode 12 lub nowsza wersja (na potrzeby programowania na iOS)

Jak oceniasz swój poziom znajomości AdMob?

Początkujący Poziom średnio zaawansowany Biegły

Jak oceniasz swój poziom znajomości Flutter?

Początkujący Poziom średnio zaawansowany Biegły .

2. Konfigurowanie środowiska programistycznego Flutter

Aby ukończyć ten moduł, potrzebujesz 2 oprogramowania: pakietu SDK Flutter i edytora.

Ćwiczenie z programowania możesz uruchomić na dowolnym z tych urządzeń:

  • Fizyczne urządzenie z Androidem lub iOS podłączone do komputera i ustawione w trybie programisty.
  • Symulator iOS (wymaga zainstalowania narzędzi Xcode).
  • Emulator Androida (wymaga skonfigurowania Android Studio).
  • Przeglądarka (do debugowania wymagany jest Chrome).
  • Aplikacja komputerowa w systemie Windows, Linux lub macOS Programowanie należy tworzyć na platformie, na której zamierzasz wdrożyć usługę. Jeśli więc chcesz opracować aplikację komputerową dla systemu Windows, musisz to zrobić w tym systemie, aby uzyskać dostęp do odpowiedniego łańcucha kompilacji. Istnieją wymagania związane z konkretnymi systemami operacyjnymi, które zostały szczegółowo omówione na stronie docs.flutter.dev/desktop.

Pobieranie kodu

Po pobraniu pliku ZIP rozpakuj jego zawartość. Zostanie utworzony folder o nazwie admob-ads-in-flutter-master.

Możesz też skopiować repozytorium GitHub za pomocą wiersza poleceń:

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

Repozytorium zawiera 2 foldery:

  • android_studio_folder.pngstarter – kod początkowy, który utworzysz w ramach tego ćwiczenia z programowania.
  • android_studio_folder.pngcomplete – kod ukończony w ramach tego ćwiczenia z programowania.

3. Konfigurowanie aplikacji i jednostek reklamowych AdMob

Flutter to wieloplatformowy pakiet SDK, dlatego w AdMob musisz dodać aplikację i jednostki reklamowe na Androida i iOS.

Skonfiguruj na urządzeniu z Androidem

Aby skonfigurować aplikację na Androida, musisz dodać aplikację na Androida i utworzyć jednostki reklamowe.

Dodawanie aplikacji na Androida

  1. W konsoli AdMob w menu Aplikacje kliknij DODAJ APLIKACJĘ.
  2. Gdy pojawi się pytanie Czy Twoja aplikacja została opublikowana w Google Play lub App Store?, kliknij NIE.
  3. Wpisz Awesome Drawing Quiz w polu nazwy aplikacji i jako platformę wybierz Android.

ddafee37a6f92229.png

  1. Włączenie danych o użytkownikach nie jest konieczne do wykonania tego ćwiczenia z programowania. Zalecamy jednak, aby to zrobić, ponieważ pozwala to lepiej poznać zachowania użytkowników. Aby zakończyć proces, kliknij DODAJ.

b918bf44362813a9.png

Tworzenie jednostek reklamowych

Aby zacząć dodawać jednostki reklamowe do AdMob:

  1. Z menu Aplikacje w konsoli AdMob wybierz Niesamowite quizy.
  2. Kliknij menu Jednostki reklamowe.

Banner

  1. Kliknij przycisk DODAJ JEDNOSTKĘ REKLAMOWĄ.
  2. Jako format wybierz Baner.
  3. W polu Nazwa jednostki reklamowej wpisz android-adq-banner.
  4. Aby zakończyć proces, kliknij UTWÓRZ JEDNOSTKĘ REKLAMOWĄ.

Reklama pełnoekranowa

  1. Kliknij przycisk DODAJ JEDNOSTKĘ REKLAMOWĄ.
  2. Jako format wybierz Reklama pełnoekranowa.
  3. W polu Nazwa jednostki reklamowej wpisz android-adq-interstitial.
  4. Aby zakończyć proces, kliknij UTWÓRZ JEDNOSTKĘ REKLAMOWĄ.

Reklama z nagrodą

  1. Kliknij przycisk DODAJ JEDNOSTKĘ REKLAMOWĄ.
  2. Jako format wybierz Reklama z nagrodą.
  3. W polu Nazwa jednostki reklamowej wpisz android-adq-rewarded.
  4. W polu Ustawienia nagrody pozostaw wartość domyślną.
  5. Aby zakończyć proces, kliknij UTWÓRZ JEDNOSTKĘ REKLAMOWĄ.

Zazwyczaj zajmuje to kilka godzin, zanim nowa jednostka reklamowa zacznie wyświetlać reklamy.

Jeśli chcesz od razu przetestować działanie reklamy, użyj identyfikatora aplikacji testowej i identyfikatora jednostki reklamowej wymienionych w tabelach identyfikatorów aplikacji na Androida lub jednostki reklamowej, a także identyfikatorów aplikacji na iOS / jednostek reklamowych na iOS.

Skonfiguruj na urządzeniu z iOS

Aby skonfigurować kampanię pod kątem iOS, musisz dodać aplikację na iOS i utworzyć jednostki reklamowe.

Dodawanie aplikacji na iOS

  1. W konsoli AdMob w menu Aplikacje kliknij DODAJ APLIKACJĘ.
  2. Gdy pojawi się pytanie Czy Twoja aplikacja została opublikowana w Google Play lub App Store?, kliknij NIE.
  3. Wpisz Awesome Drawing Quiz w polu nazwy aplikacji i jako platformę wybierz iOS.

93e7f9f114232402.png

  1. Włączenie danych o użytkownikach nie jest konieczne do wykonania tego ćwiczenia z programowania. Zalecamy jednak, aby to zrobić, ponieważ pozwala to lepiej poznać zachowania użytkowników. Aby zakończyć proces, kliknij DODAJ.

b918bf44362813a9.png

Tworzenie jednostek reklamowych

Aby dodać jednostki reklamowe:

  1. W menu Aplikacje w konsoli AdMob wybierz aplikację Niesamowite rysowanie.
  2. Kliknij menu Jednostki reklamowe.

Banner

  1. Kliknij przycisk DODAJ JEDNOSTKĘ REKLAMOWĄ.
  2. Jako format wybierz Baner.
  3. W polu Nazwa jednostki reklamowej wpisz ios-adq-banner.
  4. Aby zakończyć proces, kliknij UTWÓRZ JEDNOSTKĘ REKLAMOWĄ.

Reklama pełnoekranowa

  1. Kliknij przycisk DODAJ JEDNOSTKĘ REKLAMOWĄ.
  2. Jako format wybierz Reklama pełnoekranowa.
  3. W polu Nazwa jednostki reklamowej wpisz ios-adq-interstitial.
  4. Aby zakończyć proces, kliknij UTWÓRZ JEDNOSTKĘ REKLAMOWĄ.

Reklama z nagrodą

  1. Kliknij przycisk DODAJ JEDNOSTKĘ REKLAMOWĄ.
  2. Jako format wybierz Reklama z nagrodą.
  3. W polu Nazwa jednostki reklamowej wpisz ios-adq-rewarded.
  4. W polu Ustawienia nagrody pozostaw wartość domyślną.
  5. Aby zakończyć proces, kliknij UTWÓRZ JEDNOSTKĘ REKLAMOWĄ.

Zazwyczaj zajmuje to kilka godzin, zanim nowa jednostka reklamowa zacznie wyświetlać reklamy.

Jeśli chcesz od razu przetestować działanie reklamy, użyj identyfikatora aplikacji testowej i identyfikatorów jednostki reklamowej wymienionych w tabeli poniżej.

Opcjonalnie: używanie testowej aplikacji i jednostek reklamowych AdMob

Jeśli chcesz wykonać ćwiczenia w Codelabs, zamiast samodzielnie tworzyć nową aplikację i jednostki reklamowe, możesz użyć testowego identyfikatora aplikacji AdMob i identyfikatorów jednostek reklamowych wymienionych w tabelach poniżej.

Identyfikator aplikacji na Androida/identyfikator jednostki reklamowej

Element

identyfikator aplikacji/identyfikator jednostki reklamowej

Identyfikator aplikacji AdMob

ca-app-pub-3940256099942544~3347511713

Baner

ca-app-pub-3940256099942544/6300978111

Pełnoekranowa

ca-app-pub-3940256099942544/1033173712

Z nagrodą

ca-app-pub-3940256099942544/5224354917

Identyfikator aplikacji na iOS lub identyfikator jednostki reklamowej

Element

identyfikator aplikacji/identyfikator jednostki reklamowej

Identyfikator aplikacji AdMob

ca-app-pub-3940256099942544~1458002511

Baner

ca-app-pub-3940256099942544/2934735716

Pełnoekranowa

ca-app-pub-3940256099942544/4411468910

Z nagrodą

ca-app-pub-3940256099942544/1712485313

Więcej informacji o reklamach testowych znajdziesz w artykułach na temat reklam testowych na Androida i reklam testowych na iOS dla deweloperów.

4. Dodaj wtyczkę Google Mobile Ads Flutter

Flutter wykorzystuje wtyczki, aby zapewnić dostęp do szerokiej gamy usług dostępnych na poszczególnych platformach. Wtyczki umożliwiają dostęp do usług i interfejsów API na każdej platformie.

Wtyczka google_mobile_ads obsługuje wczytywanie i wyświetlanie banerów, reklam pełnoekranowych, reklam z nagrodą oraz reklam natywnych za pomocą interfejsu AdMob API.

Flutter to wieloplatformowy pakiet SDK, więc wtyczka google_mobile_ads działa zarówno w wersji na iOS, jak i na Androida. Jeśli dodasz tę wtyczkę do aplikacji Flutter, będzie ona używana przez wersję aplikacji do wyświetlania reklam wbudowanych w AdMob na Androida i iOS.

Dodaj wtyczkę do reklam mobilnych Google jako zależność

Aby uzyskać dostęp do interfejsów API AdMob z poziomu projektu reklamy wbudowane AdMob, dodaj google_mobile_ads jako zależność do pliku pubspec.yaml znajdującego się w katalogu głównym projektu.

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

...

Kliknij Pub get, aby zainstalować wtyczkę w projekcie Awesome Rysunku Quiz.

9ce73858eedbd8fc.png

Zaktualizuj plik AndroidManifest.xml (Android)

  1. Otwórz plik android/app/src/main/AndroidManifest.xml w Android Studio.
  2. Dodaj identyfikator aplikacji AdMob, dodając tag <meta-data> o nazwie com.google.android.gms.ads.APPLICATION_ID. Jeśli na przykład identyfikator aplikacji AdMob to ca-app-pub-3940256099942544~3347511713, do pliku AndroidManifest.xml musisz dodać te wiersze.

AndroidManifest.xml

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

</manifest>

Zaktualizuj plik Info.plist (iOS)

  1. Otwórz plik ios/Runner/Info.plist w Android Studio.
  2. Dodaj klucz GADApplicationIdentifier z wartością ciągu znaków identyfikatora aplikacji AdMob. Jeśli na przykład identyfikator aplikacji AdMob to ca-app-pub-3940256099942544~1458002511, do pliku Info.plist musisz dodać te wiersze.

ios/Runner/Info.plist

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

5. Dodaj klasę pomocniczą do reklam

Utwórz nowy plik o nazwie ad_helper.dart w katalogu lib. Następnie zaimplementuj klasę AdHelper, która zawiera identyfikator aplikacji AdMob i identyfikatory jednostek reklamowych dla Androida i iOS.

Pamiętaj, aby zastąpić identyfikatory aplikacji AdMob (ca-app-pub-xxxxxx~yyyyy) i identyfikatory jednostki reklamowej (ca-app-pub-xxxxxxx/yyyyyyyy) identyfikatorami utworzonymi w poprzednim kroku.

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');
    }
  }
}

Jeśli chcesz użyć testowego identyfikatora aplikacji AdMob, a także identyfikatorów jednostek reklamowych, użyj tego fragmentu kodu.

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. Zainicjowanie pakietu SDK do reklam mobilnych Google

Zanim wczytasz reklamy, musisz zainicjować pakiet SDK do reklam mobilnych Google. Otwórz plik lib/home_route.dart i zmodyfikuj _initGoogleMobileAds(), aby zainicjować pakiet SDK przed wczytaniem strony głównej.

Pamiętaj, że aby uzyskać wynik inicjowania pakietu SDK po zakończeniu procesu, musisz zmienić typ zwracany metody _initGoogleMobileAds() z Future<dynamic> na Future<InitializationStatus>.

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. Dodawanie banera reklamowego

W tej sekcji na górze ekranu gry wyświetlany jest baner reklamowy, tak jak na poniższym zrzucie ekranu.

276b4cfa283ea6c7.png

  1. Otwórz plik lib/game_route.dart i zaimportuj ad_manager.dart
  2. Zaimportuj ad_helper.dart i google_mobile_ads.dart, dodając te wiersze:

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. W zajęciach _GameRouteState dodaj tych użytkowników do banera reklamowego.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _bannerAd
  BannerAd? _bannerAd;

  ...
}
  1. W metodzie initState() utwórz i wczytaj element BannerAd dla banera 320 x 50 (AdSize.banner). Pamiętaj, że detektor zdarzeń reklamowych jest skonfigurowany tak, aby aktualizować interfejs (setState()) po wczytaniu reklamy .

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. Zmień metodę build(), aby wyświetlać baner reklamowy, gdy jest dostępny.

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. Zwolnij zasób powiązany z obiektem BannerAd, wywołując metodę BannerAd.dispose() w metodzie wywołania zwrotnego dispose().

lib/game_route.dart

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

  ...

  super.dispose();
}

Znakomicie. Uruchom projekt i uruchom nową grę. Po wczytaniu reklamy na górze ekranu wyświetli się baner reklamowy.

276b4cfa283ea6c7.png

8. Dodaj reklamę pełnoekranową

W tej sekcji po zakończeniu gry (łącznie 5 poziomów) wyświetli się reklama pełnoekranowa.

  1. Otwórz plik lib/game_route.dart
  2. W klasie _GameRouteState dodaj elementy składowe i metody reklamy pełnoekranowej.

Pamiętaj, że detektor zdarzeń reklamowych jest skonfigurowany tak, aby sprawdzać, czy reklama jest gotowa (onAdLoaded() i onAdFailedToLoad()), i wyświetlać ekran główny aplikacji po jej zamknięciu (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. W ramach tego ćwiczenia w Codelabs reklama pełnoekranowa wyświetla się po ukończeniu 5 poziomów przez użytkownika. Aby zminimalizować liczbę zbędnych żądań reklamy, wysyłaj żądanie reklamy, gdy użytkownik osiągnie poziom 3.

W metodzie onNewLevel() dodaj te wiersze.

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. Po zakończeniu gry pojawi się okno z wynikiem. Gdy użytkownik zamknie okno, zostanie przekierowany na ekran główny testu na rysowanie.

Reklamy pełnoekranowe powinny wyświetlać się między przejściami ekranu, dlatego pokazują je, gdy użytkownik kliknie przycisk ZAMKNIJ.

Zmodyfikuj metodę onGameOver() w następujący sposób.

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. Zwolnij zasób powiązany z obiektem InterstitialAd, wywołując metodę InterstitialAd.dispose() w metodzie wywołania zwrotnego dispose().

lib/game_route.dart

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

Znakomicie. Uruchom projekt i zakończ grę. Po wczytaniu reklamy pełnoekranowej pojawi się ona po kliknięciu przycisku ZAMKNIJ w oknie z wynikami.

c546e438c405e941.gif

9. Dodaj reklamę z nagrodą

W tej sekcji możesz dodać reklamę z nagrodą, która wyświetli użytkownikowi dodatkową wskazówkę jako nagrodę.

  1. Otwórz plik lib/game_route.dart.
  2. W klasie _GameRouteState dodaj do grupy użytkowników reklamy z nagrodą i zaimplementuj metodę _loadRewardedAd(). Pamiętaj, że po zamknięciu reklamy wczytuje kolejną reklamę z nagrodą (onAdDismissedFullScreenContent), by jak najszybciej zapisać ją w pamięci podręcznej.

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. Wywołaj _loadRewardedAd() z metody initState(), aby zażądać reklamy z nagrodą po rozpoczęciu gry.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  @override
  void initState() {
    ...

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


  ...
}
  1. Zezwalaj użytkownikom na obejrzenie reklamy z nagrodą przez kliknięcie pływającego przycisku polecenia. Przycisk jest widoczny tylko wtedy, gdy użytkownik nie skorzystał z podpowiedzi na obecnym poziomie i wczytała się reklama z nagrodą.

Aby wyświetlić pływający przycisk polecenia, zmodyfikuj metodę _buildFloatingActionButton() w podany niżej sposób. Pamiętaj, że powrót null ukrywa przycisk na ekranie.

Pamiętaj, że onUserEarnedReward to najważniejsze zdarzenie reklamy w reklamie z nagrodą. Pojawia się, gdy użytkownik kwalifikuje się do otrzymania nagrody (np. skończy oglądać film).

W tym ćwiczeniu w Codelabs metoda QuizManager.instance.useHint() jest wywoływana z wywołania zwrotnego, które ujawnia jeszcze 1 znak w ciągu podpowiedzi. Aplikacja ponownie wczytuje reklamę z nagrodą w wywołaniu zwrotnym onAdClosed, aby jak najszybciej była ona gotowa.

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. Zwolnij zasób powiązany z obiektem RewardedAd, wywołując metodę RewardedAd.dispose() w metodzie wywołania zwrotnego dispose().

lib/game_route.dart

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

Znakomicie. Uruchom projekt i zagraj w grę. Po wczytaniu reklamy z nagrodą u dołu ekranu pojawi się przycisk podpowiedzi. Kliknij przycisk Podpowiedź, aby uzyskać dodatkową wskazówkę.

4a114d243ae3e71d.gif

10. Wszystko gotowe

Ćwiczenie z programowania zostało ukończone. Ukończony kod tego ćwiczenia z programowania znajdziesz w folderze android_studio_folder.pngcomplete.

Aby dowiedzieć się, jak wdrożyć banery i natywne reklamy wbudowane, zapoznaj się z ćwiczeniem z programowania Dodawanie banera AdMob i natywnych reklam wbudowanych do aplikacji Flutter.

Aby dowiedzieć się więcej, wykonaj inne ćwiczenia z programowania Flutter.