הוספת מודעות 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 כדי לגשת לשרשרת ה-build המתאימה. יש דרישות ספציפיות למערכת ההפעלה שמפורטות בהרחבה בכתובת 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 בפלטפורמות מרובות, עליכם להוסיף ב-AdMob אפליקציה ויחידות של מודעות גם ל-Android וגם ל-iOS.

הגדרה ל-Android

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

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

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

ddafee37a6f92229.png

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

b918bf44362813a9.png

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

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

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

באנר

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

מעברון

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

מודעות מתגמלות

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

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

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

הגדרה ל-iOS

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

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

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

93e7f9f114232402.png

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

b918bf44362813a9.png

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

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

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

באנר

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

מעברון

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

מודעות מתגמלות

  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

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 שנמצא ברמה הבסיסית של הפרויקט.

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 יופעל לפני שדף הבית נטען.

לתשומת ליבך, עליך לשנות את סוג ההחזרה של השיטה _initGoogleMobileAds() מ-Future<dynamic> ל-Future<InitializationStatus> כדי לקבל את תוצאת אתחול ה-SDK אחרי שהיא תסתיים.

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

lib/game_route.dart

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  // TODO: Add _bannerAd
  BannerAd? _bannerAd;

  ...
}
  1. בשיטה initState(), יוצרים וטוענים BannerAd עבור הבאנר בגודל 320x50 (AdSize.banner). הערה: האזנה לאירוע מודעה מוגדרת לעדכן את ממשק המשתמש (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, מוסיפים את המשתמשים ואת השיטות הבאות למודעת מעברון.

לתשומת ליבך: האזנה לאירועי מודעה מוגדרת לבדוק אם המודעה מוכנה (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. המשתמשים יכולים ללחוץ על לחצן הפעולה הצף כדי לצפות במודעה מתגמלת. הלחצן מוצג רק אם המשתמש לא השתמש ברמז ברמה הנוכחית, ומודעה מתגמלת נטענה.

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

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

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

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.

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

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