افزودن تبلیغات AdMob به برنامه Flutter

1. مقدمه

چیزی که خواهی ساخت

این لبه کد شما را از طریق افزودن یک بنر، تبلیغات بینابینی و پاداش به برنامه ای به نام Awesome Drawing Quiz راهنمایی می کند، بازی که به بازیکنان امکان می دهد نام نقاشی را حدس بزنند.

اگر در حین کار با این کد با مشکلاتی (اشکالات کد، خطاهای دستوری، عبارت نامشخص) مواجه شدید، لطفاً با کلیک کردن روی پیوند گزارش یک اشتباه در گوشه سمت چپ پایین صفحه کد، مشکل را گزارش کنید.

چیزی که یاد خواهید گرفت

  • نحوه پیکربندی افزونه Google Mobile Ads AdMob
  • نحوه پیاده سازی بنر، تبلیغات بینابینی و پاداش در برنامه فلاتر

آنچه شما نیاز دارید

  • اندروید استودیو 4.1 یا بالاتر
  • Xcode 12 یا بالاتر (برای توسعه iOS)

سطح تجربه خود را با AdMob چگونه ارزیابی می کنید؟

تازه کار متوسط مسلط

سطح تجربه خود را با فلاتر چگونه ارزیابی می کنید؟

تازه کار متوسط مسلط

2. محیط توسعه Flutter خود را تنظیم کنید

برای تکمیل این آزمایشگاه به دو نرم افزار نیاز دارید - Flutter SDK و یک ویرایشگر .

شما می توانید کدلب را با استفاده از هر یک از این دستگاه ها اجرا کنید:

  • یک دستگاه فیزیکی Android یا iOS که به رایانه شما متصل شده و روی حالت Developer تنظیم شده است.
  • شبیه ساز iOS (نیاز به نصب ابزار Xcode دارد).
  • شبیه ساز اندروید (نیاز به نصب در Android Studio دارد).
  • یک مرورگر (Chrome برای اشکال زدایی لازم است).
  • به عنوان یک برنامه دسکتاپ Windows ، Linux ، یا macOS . شما باید روی پلتفرمی که قصد استقرار در آن را دارید توسعه دهید. بنابراین، اگر می خواهید یک برنامه دسکتاپ ویندوز توسعه دهید، باید در ویندوز توسعه دهید تا به زنجیره ساخت مناسب دسترسی داشته باشید. الزامات خاص سیستم عامل وجود دارد که به طور مفصل در docs.flutter.dev/desktop پوشش داده شده است.

کد را دانلود کنید

پس از دانلود فایل فشرده، محتویات آن را استخراج کنید. شما یک پوشه به نام admob-ads-in-flutter-master خواهید داشت.

همچنین، می‌توانید مخزن GitHub را از خط فرمان کلون کنید:

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

مخزن شامل دو پوشه است:

  • android_studio_folder.png starter - کد شروعی که در این Codelab خواهید ساخت.
  • android_studio_folder.png کامل - کد تکمیل شده برای این کد لبه.

3. برنامه AdMob و واحدهای تبلیغاتی را تنظیم کنید

از آنجایی که Flutter یک SDK چند پلتفرمی است، باید یک برنامه و واحدهای تبلیغاتی برای Android و iOS در AdMob اضافه کنید.

برای اندروید تنظیم کنید

برای راه‌اندازی برای Android، باید یک برنامه Android اضافه کنید و واحدهای تبلیغاتی ایجاد کنید.

یک برنامه اندروید اضافه کنید

  1. در کنسول AdMob ، روی ADD APP از منوی Apps کلیک کنید.
  2. وقتی از شما می پرسند آیا برنامه خود را در Google Play یا App Store منتشر کرده اید؟ ، روی NO کلیک کنید.
  3. در قسمت نام برنامه وارد Awesome Drawing Quiz شوید و Android را به عنوان پلتفرم انتخاب کنید.

ddafee37a6f92229.png

  1. فعال کردن معیارهای کاربر برای تکمیل این کد لبه ضروری نیست. با این حال، توصیه می کنیم این کار را انجام دهید زیرا به شما امکان می دهد رفتار کاربر را با جزئیات بیشتری درک کنید. برای تکمیل فرآیند روی ADD کلیک کنید.

b918bf44362813a9.png

ایجاد واحدهای تبلیغاتی

برای شروع اضافه کردن واحدهای تبلیغاتی به AdMob:

  1. از منوی Apps در کنسول AdMob ، Awesome Drawing Quiz را انتخاب کنید.
  2. روی منوی واحدهای آگهی کلیک کنید.

بنر

  1. روی دکمه ADD AD UNIT کلیک کنید.
  2. Banner را به عنوان قالب انتخاب کنید.
  3. android-adq-banner در قسمت Ad unit name وارد کنید.
  4. برای تکمیل فرآیند، روی CREATE AD UNIT کلیک کنید.

بینابینی

  1. روی دکمه ADD AD UNIT کلیک کنید.
  2. Interstitial را به عنوان قالب انتخاب کنید.
  3. android-adq-interstitial را در قسمت Ad unit name وارد کنید.
  4. برای تکمیل فرآیند، روی CREATE AD UNIT کلیک کنید.

پاداش داده شد

  1. روی دکمه ADD AD UNIT کلیک کنید.
  2. Rewarded را به عنوان قالب انتخاب کنید.
  3. android-adq-rewarded در قسمت Ad unit name وارد کنید.
  4. تنظیمات پاداش را پیش فرض بگذارید.
  5. برای تکمیل فرآیند، روی CREATE AD UNIT کلیک کنید.

معمولاً چند ساعت طول می کشد تا یک واحد تبلیغاتی جدید بتواند تبلیغات را ارائه دهد.

اگر می‌خواهید رفتار آگهی را فوراً آزمایش کنید، از شناسه برنامه آزمایشی و شناسه‌های واحد آگهی فهرست‌شده در جدول شناسه برنامه Android/شناسه واحد آگهی و شناسه برنامه iOS/شناسه واحد آگهی استفاده کنید.

برای iOS تنظیم کنید

برای راه‌اندازی برای iOS، باید یک برنامه iOS اضافه کنید و واحدهای تبلیغاتی ایجاد کنید.

یک برنامه iOS اضافه کنید

  1. در کنسول AdMob ، روی ADD APP از منوی Apps کلیک کنید.
  2. وقتی از شما می پرسند آیا برنامه خود را در Google Play یا App Store منتشر کرده اید؟ ، روی NO کلیک کنید.
  3. در قسمت نام برنامه وارد Awesome Drawing Quiz شوید و iOS را به عنوان پلتفرم انتخاب کنید.

93e7f9f114232402.png

  1. فعال کردن معیارهای کاربر برای تکمیل این کد لبه ضروری نیست. با این حال، توصیه می کنیم این کار را انجام دهید زیرا به شما امکان می دهد رفتار کاربر را با جزئیات بیشتری درک کنید. برای تکمیل فرآیند روی ADD کلیک کنید.

b918bf44362813a9.png

ایجاد واحدهای تبلیغاتی

برای افزودن واحدهای تبلیغاتی:

  1. برنامه Awesome Drawing Quiz را از منوی Apps در کنسول AdMob انتخاب کنید.
  2. روی منوی واحدهای آگهی کلیک کنید.

بنر

  1. روی دکمه ADD AD UNIT کلیک کنید.
  2. Banner را به عنوان قالب انتخاب کنید.
  3. ios-adq-banner در قسمت Ad unit name وارد کنید.
  4. برای تکمیل فرآیند، روی CREATE AD UNIT کلیک کنید.

بینابینی

  1. روی دکمه ADD AD UNIT کلیک کنید.
  2. Interstitial را به عنوان قالب انتخاب کنید.
  3. ios-adq-interstitial را در قسمت Ad unit name وارد کنید.
  4. برای تکمیل فرآیند، روی CREATE AD UNIT کلیک کنید.

پاداش داده شد

  1. روی دکمه ADD AD UNIT کلیک کنید.
  2. Rewarded را به عنوان قالب انتخاب کنید.
  3. ios-adq-rewarded در قسمت نام واحد آگهی وارد کنید.
  4. تنظیمات پاداش را پیش فرض بگذارید.
  5. برای تکمیل فرآیند، روی CREATE AD UNIT کلیک کنید.

معمولاً چند ساعت طول می کشد تا یک واحد تبلیغاتی جدید بتواند تبلیغات را ارائه دهد.

اگر می‌خواهید رفتار آگهی را فوراً آزمایش کنید، از شناسه برنامه آزمایشی و شناسه‌های واحد آگهی فهرست‌شده در جدول زیر استفاده کنید.

اختیاری: از برنامه آزمایشی AdMob و واحدهای تبلیغاتی استفاده کنید

اگر می‌خواهید به‌جای ایجاد یک برنامه جدید و واحدهای تبلیغاتی به‌تنهایی از نرم‌افزار کد پیروی کنید، می‌توانید از شناسه برنامه آزمایشی 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

برای کسب اطلاعات بیشتر در مورد تبلیغات آزمایشی، به آگهی های آزمایشی اندروید و مستندات توسعه دهنده تبلیغات آزمایشی iOS مراجعه کنید.

4. افزونه Google Mobile Ads Flutter را اضافه کنید

Flutter از پلاگین ها برای دسترسی به طیف گسترده ای از خدمات پلتفرم خاص استفاده می کند. پلاگین ها شما را قادر می سازند به سرویس ها و API ها در هر پلتفرم دسترسی داشته باشید.

افزونه google_mobile_ads از بارگیری و نمایش تبلیغات بنر، بینابینی، پاداش و بومی با استفاده از AdMob API پشتیبانی می کند.

از آنجایی که Flutter یک SDK چند پلتفرمی است، افزونه google_mobile_ads هم برای iOS و هم برای اندروید قابل اجرا است. بنابراین، اگر افزونه را به برنامه Flutter خود اضافه کنید، در هر دو نسخه اندروید و 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 را با فراخوانی متد BannerAd.dispose() در متد callback 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. در این کد لبه پس از تکمیل 5 سطح توسط کاربر، یک تبلیغ بینابینی نمایش داده می شود. برای به حداقل رساندن درخواست‌های غیرضروری تبلیغات، زمانی که کاربر به سطح ۳ رسید، آگهی درخواست کنید.

در متد 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. هنگامی که یک بازی تمام می شود، گفتگوی امتیاز بازی نمایش داده می شود. هنگامی که کاربر کادر گفتگو را می بندد، کاربر را به صفحه اصلی مسابقه طراحی عالی هدایت می کند.

از آنجایی که تبلیغات بینابینی باید بین جابجایی های صفحه نمایش داده شوند، وقتی کاربر روی دکمه CLOSE کلیک می کند، تبلیغ بینابینی را نشان می دهیم.

متد 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 را با فراخوانی متد InterstitialAd.dispose() در متد callback dispose() آزاد کنید.

lib/game_route.dart 

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

همین! پروژه را اجرا کنید و بازی را کامل کنید. اگر یک تبلیغ بینابینی بارگیری شود، پس از کلیک روی دکمه CLOSE از کادر گفتگوی امتیاز، یک تبلیغ بینابینی را مشاهده خواهید کرد.

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. با استفاده از متد initState() _loadRewardedAd() را فراخوانی کنید تا در هنگام شروع بازی، تبلیغ پاداشی درخواست کنید.

lib/game_route.dart 

class _GameRouteState extends State<GameRoute> implements QuizEventListener {

  ...

  @override
  void initState() {
    ...

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


  ...
}
  1. با کلیک بر روی دکمه اقدام شناور، به کاربران اجازه دهید یک تبلیغ پاداش را تماشا کنند. این دکمه تنها در صورتی نشان داده می‌شود که کاربر از راهنمایی در سطح فعلی استفاده نکرده باشد و یک تبلیغ پاداش بارگیری شود.

متد _buildFloatingActionButton() را به صورت زیر تغییر دهید تا دکمه اکشن شناور نمایش داده شود. توجه داشته باشید که بازگشت null دکمه را از روی صفحه پنهان می کند.

توجه داشته باشید که onUserEarnedReward مهمترین رویداد تبلیغاتی در یک تبلیغ پاداش است. زمانی که کاربر واجد شرایط دریافت جایزه شود (مثلاً، تماشای یک ویدیو را به پایان رساند) فعال می‌شود.

در این کد، متد QuizManager.instance.useHint() از callback فراخوانی می شود که یک کاراکتر دیگر را در رشته hint نشان می دهد. این برنامه یک آگهی با پاداش را در پاسخ به تماس 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 را با فراخوانی متد RewardedAd.dispose() در روش callback dispose() آزاد کنید.

lib/game_route.dart 

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

همین! پروژه را اجرا کنید و بازی را انجام دهید. هنگامی که یک تبلیغ پاداش بارگیری شد، یک دکمه اشاره در پایین صفحه مشاهده خواهید کرد. برای دریافت راهنمایی اضافی روی دکمه اشاره کلیک کنید.

4a114d243ae3e71d.gif

10. همه چیز تمام شد!

شما آزمایشگاه کد را تکمیل کرده اید. شما می توانید کد تکمیل شده برای این آزمایشگاه کد را در آدرس زیر بیابید android_studio_folder.png پوشه کامل

برای یادگیری نحوه پیاده‌سازی بنر و تبلیغات داخلی بومی، افزودن بنر AdMob و تبلیغات داخلی بومی به یک کد برنامه Flutter را بررسی کنید.

برای کسب اطلاعات بیشتر، سایر کدهای Flutter را امتحان کنید.