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

۱. مقدمه

آنچه خواهید ساخت

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

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

آنچه یاد خواهید گرفت

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

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

  • اندروید استودیو ۴.۱ یا بالاتر
  • Xcode نسخه ۱۲ یا بالاتر (برای توسعه iOS)

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

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

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

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

۲. محیط توسعه فلاتر خود را تنظیم کنید

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

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

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

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

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

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

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

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

  • پوشه android_studio.png شروع کننده — کد اولیه‌ای که در این آزمایشگاه کد خواهید ساخت.
  • پوشه android_studio.png کامل — کد تکمیل‌شده برای این آزمایشگاه کد.

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

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

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

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

اضافه کردن اپلیکیشن اندروید

  1. در کنسول AdMob ، از منوی برنامه‌ها ، روی «افزودن برنامه» کلیک کنید.
  2. وقتی از شما پرسیده شد که آیا برنامه خود را در گوگل پلی یا اپ استور منتشر کرده‌اید؟، روی خیر کلیک کنید.
  3. در قسمت نام برنامه، Awesome Drawing Quiz وارد کنید و پلتفرم اندروید را انتخاب کنید.

ddafee37a6f92229.png

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

b918bf44362813a9.png

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

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

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

بنر

  1. روی دکمه‌ی «افزودن واحد تبلیغات» کلیک کنید.
  2. بنر را به عنوان قالب انتخاب کنید.
  3. در قسمت نام واحد تبلیغات، android-adq-banner وارد کنید.
  4. برای تکمیل فرآیند، روی CREATE AD UNIT کلیک کنید.

بینابینی

  1. روی دکمه‌ی «افزودن واحد تبلیغات» کلیک کنید.
  2. به عنوان قالب، Interstitial را انتخاب کنید.
  3. android-adq-interstitial را در فیلد نام واحد تبلیغات وارد کنید.
  4. برای تکمیل فرآیند، روی CREATE AD UNIT کلیک کنید.

پاداش داده شده

  1. روی دکمه‌ی «افزودن واحد تبلیغات» کلیک کنید.
  2. به عنوان قالب، گزینه «پاداش داده شده» را انتخاب کنید.
  3. android-adq-rewarded در فیلد نام واحد تبلیغات وارد کنید.
  4. تنظیمات پاداش را به حالت پیش‌فرض رها کنید.
  5. برای تکمیل فرآیند، روی CREATE AD UNIT کلیک کنید.

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

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

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

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

اضافه کردن اپلیکیشن iOS

  1. در کنسول AdMob ، از منوی برنامه‌ها ، روی «افزودن برنامه» کلیک کنید.
  2. وقتی از شما پرسیده شد که آیا برنامه خود را در گوگل پلی یا اپ استور منتشر کرده‌اید؟، روی خیر کلیک کنید.
  3. در قسمت نام برنامه، Awesome Drawing Quiz وارد کنید و پلتفرم iOS را انتخاب کنید.

93e7f9f114232402.png

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

b918bf44362813a9.png

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

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

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

بنر

  1. روی دکمه‌ی «افزودن واحد تبلیغات» کلیک کنید.
  2. بنر را به عنوان قالب انتخاب کنید.
  3. ios-adq-banner در فیلد نام واحد تبلیغات وارد کنید.
  4. برای تکمیل فرآیند، روی CREATE AD UNIT کلیک کنید.

بینابینی

  1. روی دکمه‌ی «افزودن واحد تبلیغات» کلیک کنید.
  2. به عنوان قالب، Interstitial را انتخاب کنید.
  3. ios-adq-interstitial را در فیلد نام واحد تبلیغات وارد کنید.
  4. برای تکمیل فرآیند، روی CREATE AD UNIT کلیک کنید.

پاداش داده شده

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

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

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

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

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

شناسه برنامه اندروید/شناسه واحد تبلیغات

مورد

شناسه برنامه/شناسه واحد تبلیغات

شناسه برنامه 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 مراجعه کنید.

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

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

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

از آنجا که Flutter یک SDK چند پلتفرمی است، افزونه google_mobile_ads هم برای iOS و هم برای اندروید قابل استفاده است. بنابراین، اگر این افزونه را به برنامه Flutter خود اضافه کنید، توسط هر دو نسخه اندروید و iOS برنامه تبلیغات درون خطی AdMob استفاده می‌شود.

افزونه تبلیغات موبایلی گوگل را به عنوان یک وابستگی اضافه کنید

برای دسترسی به 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

...

برای نصب افزونه در پروژه Awesome Drawing Quiz، روی Pub get کلیک کنید.

9ce73858eedbd8fc.png

به‌روزرسانی AndroidManifest.xml (اندروید)

  1. فایل android/app/src/main/AndroidManifest.xml را در اندروید استودیو باز کنید.
  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 را در اندروید استودیو باز کنید.
  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>
...

۵. یک کلاس کمکی برای تبلیغات اضافه کنید

یک فایل جدید با نام ad_helper.dart در پوشه lib ایجاد کنید. سپس، کلاس AdHelper را پیاده‌سازی کنید که یک شناسه برنامه AdMob و شناسه‌های واحد تبلیغاتی برای اندروید و 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");
    }
  }
}

۶. کیت توسعه نرم‌افزار تبلیغات موبایلی گوگل (Google Mobile Ads SDK) را راه‌اندازی کنید

قبل از بارگذاری تبلیغات، باید SDK تبلیغات موبایلی گوگل را مقداردهی اولیه کنید. فایل lib/home_route.dart را باز کنید و _initGoogleMobileAds() را برای مقداردهی اولیه SDK قبل از بارگذاری صفحه اصلی تغییر دهید.

توجه داشته باشید که برای دریافت نتیجه مقداردهی اولیه SDK پس از تکمیل، باید نوع بازگشتی متد _initGoogleMobileAds() را از Future<dynamic> به Future<InitializationStatus> تغییر دهید.

مسیر_خانه.دارت 

// 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();
  }
}

۷. یک بنر تبلیغاتی اضافه کنید

در این بخش، همانطور که در تصویر زیر نشان داده شده است، یک بنر تبلیغاتی در بالای صفحه بازی نمایش می‌دهید.

۲۷۶b4cfa283ea6c7.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 ) ایجاد و بارگذاری کنید. توجه داشته باشید که یک شنونده رویداد تبلیغ (ad 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 را با فراخوانی متد BannerAd.dispose() در متد فراخوانی dispose() آزاد کنید.

lib/game_route.dart 

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

  ...

  super.dispose();
}

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

۲۷۶b4cfa283ea6c7.png

۸. یک تبلیغ بینابینی اضافه کنید

در این بخش، شما یک تبلیغ بینابینی را پس از پایان بازی (در مجموع ۵ مرحله) نمایش می‌دهید.

  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. در این کدلب، یک تبلیغ بینابینی پس از اینکه کاربر ۵ سطح را کامل کرد نمایش داده می‌شود. برای به حداقل رساندن درخواست‌های غیرضروری تبلیغات، وقتی کاربر به سطح ۳ رسید، درخواست تبلیغ دهید.

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

lib/game_route.dart 

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

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

c546e438c405e941.gif

۹. یک تبلیغ جایزه‌دار اضافه کنید

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

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

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

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

در این کد، متد QuizManager.instance.useHint() از تابع فراخوانی فراخوانی می‌شود که یک کاراکتر دیگر را در رشته‌ی راهنما نشان می‌دهد. برنامه یک تبلیغ جایزه‌دار را در تابع فراخوانی 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() در متد فراخوانی dispose() آزاد کنید.

lib/game_route.dart 

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

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

4a114d243ae3e71d.gif

۱۰. همه چیز تمام شد!

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

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

برای کسب اطلاعات بیشتر، سایر آزمایشگاه‌های کد فلاتر را امتحان کنید.