הוספת מודעות AdMob לאפליקציית Flutter

1. מבוא

מה תפַתחו

ב-codelab הזה נסביר איך להוסיף מודעת באנר, מודעת מעברון ומודעה מתגמלת לאפליקציה בשם Awesome Drawing Quiz, משחק שבו השחקנים צריכים לנחש את שם הציור.

אם נתקלתם בבעיות (באגים בקוד, שגיאות דקדוק, ניסוח לא ברור) במהלך העבודה ב-codelab הזה, אתם יכולים לדווח על הבעיה בלחיצה על הקישור דיווח על טעות בפינה הימנית התחתונה של ה-codelab.

מה תלמדו

  • איך מגדירים את הפלאגין Google Mobile Ads AdMob
  • איך מטמיעים מודעות באנר, מודעות מעברון ומודעות מתגמלות באפליקציית Flutter

מה תצטרכו

  • ‫Android Studio 4.1 ואילך
  • ‫Xcode 12 ואילך (לפיתוח ל-iOS)

מה רמת הניסיון שלך ב-AdMob?

מתחילים ביניים מומחים

מה רמת הניסיון שלך עם Flutter?

מתחילים ביניים מומחים

2. הגדרת סביבת הפיתוח של Flutter

כדי להשלים את שיעור ה-Lab הזה, תצטרכו שני סוגי תוכנה: Flutter SDK ועורך.

אפשר להריץ את ה-codelab באמצעות כל אחד מהמכשירים הבאים:

  • מכשיר פיזי עם Android או iOS שמחובר למחשב ומוגדר למצב פיתוח.
  • סימולטור iOS (נדרשת התקנה של כלי Xcode).
  • ‫ אמולטור Android (נדרשת הגדרה ב-Android Studio).
  • דפדפן (חובה להשתמש ב-Chrome לצורך ניפוי באגים).
  • כאפליקציה למחשב Windows,‏ Linux או macOS. אתם צריכים לפתח בפלטפורמה שבה אתם מתכננים לבצע פריסה. לכן, אם רוצים לפתח אפליקציה למחשב שולחני עם Windows, צריך לפתח ב-Windows כדי לגשת לשרשרת הבנייה המתאימה. יש דרישות ספציפיות למערכות הפעלה שמוסברות בפירוט במאמר docs.flutter.dev/desktop.

הורדת הקוד

אחרי שמורידים את קובץ ה-ZIP, מחלצים את התוכן שלו. תיקייה בשם admob-ads-in-flutter-master תיווצר.

אפשר גם לשכפל את מאגר GitHub משורת הפקודה:

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

המאגר מכיל שתי תיקיות:

  • ‫android_studio_folder.pngstarter – קוד התחלתי שתיצרו ב-Codelab הזה.
  • ‫android_studio_folder.pngcomplete – קוד מלא ל-Codelab הזה.

3. הגדרת האפליקציה שמקושרת ל-AdMob ויחידות המודעות

מכיוון ש-Flutter הוא SDK חוצה פלטפורמות, צריך להוסיף אפליקציה ויחידות מודעות גם ל-Android וגם ל-iOS ב-AdMob.

הגדרה ב-Android

כדי להגדיר את האפליקציה ל-Android, צריך להוסיף אפליקציית Android וליצור יחידות של מודעות.

הוספת אפליקציה ל-Android

  1. ב-AdMob console, בתפריט Apps, לוחצים על ADD APP.
  2. כשמוצגת השאלה האם פרסמת את האפליקציה שלך ב-Google Play או ב-App Store?, לוחצים על לא.
  3. מזינים Awesome Drawing Quiz בשדה של שם האפליקציה ובוחרים באפשרות Android בתור הפלטפורמה.

ddafee37a6f92229.png

  1. אין צורך להפעיל את מדדי המשתמשים כדי להשלים את ה-codelab הזה. עם זאת, מומלץ לעשות זאת כדי להבין את התנהגות המשתמשים בצורה מפורטת יותר. לוחצים על הוספה כדי להשלים את התהליך.

b918bf44362813a9.png

יצירת יחידות של מודעות

כדי להתחיל להוסיף יחידות של מודעות ל-AdMob:

  1. בתפריט אפליקציות במסוף AdMob, בוחרים באפשרות Awesome Drawing Quiz.
  2. לוחצים על התפריט יחידות של מודעות.

באנר

  1. לוחצים על הלחצן הוספת יחידת מודעות.
  2. בוחרים באפשרות באנר כפורמט.
  3. מזינים android-adq-banner בשדה שם יחידת המודעות.
  4. כדי להשלים את התהליך, לוחצים על יצירת יחידת מודעות.

Interstitial

  1. לוחצים על הלחצן הוספת יחידת מודעות.
  2. בוחרים בפורמט מודעת מעברון.
  3. מזינים android-adq-interstitial בשדה שם יחידת המודעות.
  4. כדי להשלים את התהליך, לוחצים על יצירת יחידת מודעות.

Rewarded

  1. לוחצים על הלחצן הוספת יחידת מודעות.
  2. בוחרים באפשרות מתגמלת כפורמט.
  3. מזינים android-adq-rewarded בשדה שם יחידת המודעות.
  4. משאירים את ברירת המחדל בהגדרות התגמול.
  5. כדי להשלים את התהליך, לוחצים על יצירת יחידת מודעות.

בדרך כלל חולפות כמה שעות עד שיחידת מודעות חדשה יכולה להציג מודעות.

אם רוצים לבדוק את התנהגות המודעה באופן מיידי, צריך להשתמש במזהה אפליקציית הבדיקה ובמזהים של יחידות המודעות שמפורטים בטבלאות של מזהה אפליקציית Android ומזהה יחידת המודעות, ושל מזהה אפליקציית iOS ומזהה יחידת המודעות.

הגדרה ל-iOS

כדי להגדיר את האפשרות הזו ב-iOS, צריך להוסיף אפליקציית iOS וליצור יחידות של מודעות.

הוספת אפליקציה ל-iOS

  1. ב-AdMob console, בתפריט Apps, לוחצים על ADD APP.
  2. כשמוצגת השאלה האם פרסמת את האפליקציה שלך ב-Google Play או ב-App Store?, לוחצים על לא.
  3. מזינים Awesome Drawing Quiz בשדה של שם האפליקציה ובוחרים באפשרות iOS בתור הפלטפורמה.

93e7f9f114232402.png

  1. אין צורך להפעיל את מדדי המשתמשים כדי להשלים את ה-codelab הזה. עם זאת, מומלץ לעשות זאת כדי להבין את התנהגות המשתמשים בצורה מפורטת יותר. לוחצים על הוספה כדי להשלים את התהליך.

b918bf44362813a9.png

יצירת יחידות של מודעות

כדי להוסיף יחידות של מודעות:

  1. בתפריט אפליקציות במסוף AdMob, בוחרים באפליקציה Awesome Drawing Quiz.
  2. לוחצים על התפריט יחידות של מודעות.

באנר

  1. לוחצים על הלחצן הוספת יחידת מודעות.
  2. בוחרים באפשרות באנר כפורמט.
  3. מזינים ios-adq-banner בשדה שם יחידת המודעות.
  4. כדי להשלים את התהליך, לוחצים על יצירת יחידת מודעות.

Interstitial

  1. לוחצים על הלחצן הוספת יחידת מודעות.
  2. בוחרים בפורמט מודעת מעברון.
  3. מזינים ios-adq-interstitial בשדה שם יחידת המודעות.
  4. כדי להשלים את התהליך, לוחצים על יצירת יחידת מודעות.

Rewarded

  1. לוחצים על הלחצן הוספת יחידת מודעות.
  2. בוחרים באפשרות מתגמלת כפורמט.
  3. מזינים ios-adq-rewarded בשדה שם יחידת המודעות.
  4. משאירים את ברירת המחדל בהגדרות התגמול.
  5. כדי להשלים את התהליך, לוחצים על יצירת יחידת מודעות.

בדרך כלל חולפות כמה שעות עד שיחידת מודעות חדשה יכולה להציג מודעות.

אם רוצים לבדוק את התנהגות המודעה באופן מיידי, אפשר להשתמש במזהה אפליקציית הבדיקה ובמזהים של יחידות המודעות שמפורטים בטבלה הבאה.

אופציונלי: שימוש באפליקציית הבדיקה שמקושרת ל-AdMob וביחידות המודעות לבדיקה

אם אתם רוצים לעקוב אחרי ה-codelab במקום ליצור אפליקציה חדשה ויחידות מודעות בעצמכם, אתם יכולים להשתמש במזהה האפליקציה שמקושרת ל-AdMob ובמזהים של יחידות המודעות לבדיקה שמפורטים בטבלאות הבאות.

מזהה אפליקציה ל-Android או מזהה יחידת מודעות

פריט

מזהה אפליקציה/מזהה יחידת מודעות

מזהה האפליקציה שמקושרת ל-AdMob

ca-app-pub-3940256099942544~3347511713

מודעת באנר

ca-app-pub-3940256099942544/6300978111

מעברון

ca-app-pub-3940256099942544/1033173712

ההטבה הופעלה

ca-app-pub-3940256099942544/5224354917

מזהה אפליקציה ל-iOS או מזהה יחידת מודעות

פריט

מזהה אפליקציה/מזהה יחידת מודעות

מזהה האפליקציה שמקושרת ל-AdMob

ca-app-pub-3940256099942544~1458002511

מודעת באנר

ca-app-pub-3940256099942544/2934735716

מעברון

ca-app-pub-3940256099942544/4411468910

ההטבה הופעלה

ca-app-pub-3940256099942544/1712485313

מידע נוסף על מודעות בדיקה זמין בתיעוד למפתחים בנושא מודעות בדיקה ל-Android ומודעות בדיקה ל-iOS.

4. הוספת Google Mobile Ads Flutter plugin

‫Flutter משתמשת בפלאגינים כדי לספק גישה למגוון רחב של שירותים ספציפיים לפלטפורמה. תוספים מאפשרים לכם לגשת לשירותים ולממשקי API בכל פלטפורמה.

התוסף google_mobile_ads תומך בטעינה ובהצגה של מודעות באנר, מודעות מעברון, מודעות מתגמלות ומודעות מותאמות באמצעות AdMob API.

‫Flutter הוא SDK חוצה פלטפורמות, ולכן הפלאגין google_mobile_ads רלוונטי גם ל-iOS וגם ל-Android. לכן, אם מוסיפים את הפלאגין לאפליקציית Flutter, הוא ישמש גם את גרסת Android וגם את גרסת iOS של אפליקציית המודעות המוטמעות של AdMob.

הוספה של הפלאגין Google Mobile Ads כתלות

כדי לגשת לממשקי ה-API של AdMob מהפרויקט מודעות משולבות בתוכן הדף של AdMob, מוסיפים את google_mobile_ads כתלות לקובץ pubspec.yaml שנמצא בהרמה הבסיסית (root) של הפרויקט.

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

...

לוחצים על Pub get כדי להתקין את הפלאגין בפרויקט Awesome Drawing Quiz.

9ce73858eedbd8fc.png

עדכון הקובץ AndroidManifest.xml‏ (Android)

  1. פותחים את הקובץ android/app/src/main/AndroidManifest.xml ב-Android Studio.
  2. מוסיפים את מזהה האפליקציה ב-AdMob על ידי הוספה של תג <meta-data> עם השם com.google.android.gms.ads.APPLICATION_ID. לדוגמה, אם מזהה האפליקציה שמקושרת ל-AdMob שלכם הוא ca-app-pub-3940256099942544~3347511713, אתם צריכים להוסיף את השורות הבאות לקובץ AndroidManifest.xml.

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‏ (iOS)

  1. פותחים את הקובץ ios/Runner/Info.plist ב-Android Studio.
  2. מוסיפים מפתח GADApplicationIdentifier עם ערך המחרוזת של מזהה האפליקציה ב-AdMob. לדוגמה, אם מזהה האפליקציה שמקושרת ל-AdMob שלכם הוא ca-app-pub-3940256099942544~1458002511, אתם צריכים להוסיף את השורות הבאות לקובץ Info.plist.

ios/Runner/Info.plist

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

5. הוספת מחלקה לעזרה במודעות

יוצרים קובץ חדש בשם ad_helper.dart בספרייה lib. לאחר מכן מטמיעים את המחלקה AdHelper, שמספקת מזהה אפליקציה שמקושרת ל-AdMob ומזהים של יחידות מודעות ל-Android ול-iOS.

חשוב להחליף את מזהה האפליקציה שמקושרת ל-AdMob‏ (ca-app-pub-xxxxxx~yyyyy) ואת המזהה של יחידת המודעות (ca-app-pub-xxxxxxx/yyyyyyyy) במזהים שיצרתם בשלב הקודם.

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

אם רוצים להשתמש במזהה של אפליקציה שמקושרת ל-AdMob לבדיקה ובמזהים של יחידות מודעות לבדיקה, צריך להשתמש בקטע הקוד הבא.

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

לפני טעינת המודעות, צריך להפעיל את Google Mobile Ads SDK. פותחים את הקובץ lib/home_route.dart ומשנים את _initGoogleMobileAds() כדי לאתחל את ה-SDK לפני שהדף הראשי נטען.

שימו לב: כדי לקבל את תוצאת ההפעלה של ה-SDK אחרי שהיא מסתיימת, צריך לשנות את סוג ההחזרה של השיטה _initGoogleMobileAds() מ-Future<dynamic> ל-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. הוספה של מודעת באנר

בקטע הזה מוצגת מודעת באנר בחלק העליון של מסך המשחק, כמו שרואים בצילום המסך הבא.

276b4cfa283ea6c7.png

  1. פותחים את הקובץ lib/game_route.dart ומייבאים את ad_manager.dart
  2. כדי לייבא את ad_helper.dart ואת google_mobile_ads.dart, מוסיפים את השורות הבאות:

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. בקטע _GameRouteState class, מוסיפים את החברים הבאים למודעת באנר.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _bannerAd
  BannerAd? _bannerAd;

  ...
}
  1. בשיטה initState(), יוצרים וטוענים BannerAd עבור באנר בגודל 320x50 (AdSize.banner). שימו לב: event listener לאירועי מודעות מוגדר לעדכן את ממשק המשתמש (setState()) כשמודעה נטענת .

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. משנים את השיטה build() כדי להציג מודעת באנר כשהיא זמינה.

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. כדי לשחרר את המשאב שמשויך לאובייקט BannerAd, צריך להפעיל את method‏ BannerAd.dispose() בשיטת קריאה חוזרת dispose().

lib/game_route.dart

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

  ...

  super.dispose();
}

זהו! מריצים את הפרויקט ומתחילים משחק חדש. אחרי שמודעה נטענת, מודעת באנר מופיעה בחלק העליון של המסך.

276b4cfa283ea6c7.png

8. הוספה של מודעת מעברון

בקטע הזה מוצגת מודעת מעברון אחרי שהמשחק (5 שלבים בסך הכול) מסתיים.

  1. פתיחת הקובץ lib/game_route.dart
  2. במחלקה _GameRouteState, מוסיפים את החברים וה-methods הבאים למודעה מעברית.

שימו לב: event listener של מודעות מוגדר לבדוק אם המודעה מוכנה (onAdLoaded() ו-onAdFailedToLoad()) ולהציג את מסך הבית של האפליקציה כשהמודעה נסגרת (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. ב-codelab הזה, מודעת מעברון מוצגת אחרי שמשתמש משלים 5 רמות. כדי לצמצם את מספר הבקשות המיותרות להצגת מודעות, כדאי לשלוח בקשה להצגת מודעה כשהמשתמש מגיע לרמה 3.

בשיטה onNewLevel(), מוסיפים את השורות הבאות.

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. בסיום המשחק, מוצגת תיבת הדו-שיח של ניקוד המשחק. כשמשתמש סוגר את תיבת הדו-שיח, הוא מועבר למסך הבית של חידון הציור המדהים.

מודעות מעברון צריכות להופיע בין מעברים בין מסכים, ולכן אנחנו מציגים את מודעת המעברון כשהמשתמש לוחץ על הלחצן סגירה.

משנים את השיטה onGameOver() באופן הבא.

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. כדי לשחרר את המשאב שמשויך לאובייקט InterstitialAd, צריך להפעיל את method‏ InterstitialAd.dispose() בשיטת קריאה חוזרת dispose().

lib/game_route.dart

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

זהו! מריצים את הפרויקט ומשלימים את המשחק. אם מודעת מעברון נטענת, היא תוצג לכם אחרי שתלחצו על הלחצן סגירה בתיבת הדו-שיח של הניקוד.

c546e438c405e941.gif

9. הוספה של מודעה מתגמלת

בקטע הזה מוסיפים מודעה מתגמלת שמעניקה למשתמש רמז נוסף כתגמול.

  1. פתיחת הקובץ lib/game_route.dart
  2. במחלקת _GameRouteState, מוסיפים חברים למודעה מתגמלת ומטמיעים את השיטה _loadRewardedAd(). שימו לב: המערכת טוענת מודעה מתגמלת נוספת כשהמודעה נסגרת (onAdDismissedFullScreenContent) כדי לשמור את המודעה במטמון מוקדם ככל האפשר.

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. מתקשרים אל השיטה _loadRewardedAd() מתוך השיטה initState() כדי לבקש מודעה מתגמלת כשהמשחק מתחיל.

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  @override
  void initState() {
    ...

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


  ...
}
  1. מאפשרים למשתמשים לצפות במודעה מתגמלת על ידי לחיצה על כפתור פעולה צף (FAB). הלחצן מוצג רק אם המשתמש לא השתמש ברמז ברמה הנוכחית ומודעה מתגמלת נטענה.

משנים את המתודה _buildFloatingActionButton() באופן הבא כדי להציג את כפתור הפעולה הצף. שימו לב שהחזרה של הערך null מסתירה את הלחצן מהמסך.

הערה: onUserEarnedReward הוא אירוע המודעה החשוב ביותר במודעה מתגמלת. האירוע מופעל כשמשתמש עומד בדרישות לקבלת תגמול (לדוגמה, סיים לצפות בסרטון).

ב-Codelab הזה, קוראים לשיטה QuizManager.instance.useHint() מהקריאה החוזרת, שחושפת עוד תו במחרוזת הרמז. האפליקציה טוענת מחדש מודעה מתגמלת ב-onAdClosed callback כדי לוודא שהמודעה מוכנה מוקדם ככל האפשר.

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. כדי לשחרר את המשאב שמשויך לאובייקט RewardedAd, צריך להפעיל את method‏ RewardedAd.dispose() בשיטת קריאה חוזרת dispose().

lib/game_route.dart

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

זהו! מריצים את הפרויקט ומשחקים במשחק. אחרי שמודעה מתגמלת נטענת, מופיע לחצן רמז בתחתית המסך. לוחצים על לחצן רמז כדי לקבל רמז נוסף.

4a114d243ae3e71d.gif

10. הכול מוכן!

סיימתם את ה-Codelab. אפשר למצוא את הקוד המלא של ה-Codelab הזה בתיקייה android_studio_folder.pngcomplete.

כדי ללמוד איך מטמיעים מודעות באנר ומודעות מותאמות בתוך השורה, כדאי לעיין ב-Codelab הוספת מודעות באנר ומודעות מותאמות בתוך השורה ב-AdMob לאפליקציית Flutter.

כדי לקבל מידע נוסף, אפשר לנסות את הסדנאות האחרות ללימוד Flutter.