Flutter ऐप्लिकेशन में AdMob विज्ञापन जोड़ना

1. परिचय

आपको क्या बनाना होगा

इस कोडलैब से आपको बेहतरीन ड्रॉइंग क्विज़ नाम के ऐप्लिकेशन में बैनर, पेज पर अचानक दिखने वाले (इंटरस्टीशियल) विज्ञापन और इनाम वाले विज्ञापन जोड़ने का तरीका पता चलता है. यह एक ऐसा गेम है जिसकी मदद से खिलाड़ी ड्रॉइंग के नाम का अनुमान लगा सकते हैं.

कोडलैब के इस मॉड्यूल को इस्तेमाल करते समय, अगर आपको कोई समस्या (कोड में गड़बड़ी, व्याकरण से जुड़ी गड़बड़ियां, गलत शब्द) आती है, तो कृपया कोडलैब के नीचे बाएं कोने में दिए गए गलती की शिकायत करें लिंक पर क्लिक करके, समस्या की शिकायत करें.

आपको इनके बारे में जानकारी मिलेगी

  • Google मोबाइल विज्ञापनों के लिए, AdMob प्लगिन को कॉन्फ़िगर करने का तरीका
  • Flutter ऐप्लिकेशन में बैनर, इंटरस्टीशियल, और इनाम वाले विज्ञापनों को लागू करने का तरीका

आपको इन चीज़ों की ज़रूरत होगी

  • Android Studio 4.1 या उसके बाद वाला वर्शन
  • Xcode 12 या इसके बाद का वर्शन (iOS डेवलपमेंट के लिए)

AdMob के साथ आपका अनुभव कैसा रहा?

शुरुआती इंटरमीडिएट कुशल

Flutter के साथ आपका अनुभव कैसा रहा?

शुरुआती इंटरमीडिएट कुशल

2. Flutter डेवलपमेंट एनवायरमेंट को सेट अप करें

इस लैब को पूरा करने के लिए, आपको सॉफ़्टवेयर के दो हिस्सों की ज़रूरत होगी—Flutter SDK टूल और एडिटर.

इनमें से किसी भी डिवाइस का इस्तेमाल करके, कोडलैब चलाया जा सकता है:

  • आपके कंप्यूटर से कनेक्ट किया गया Android या iOS डिवाइस होना चाहिए और वह डेवलपर मोड पर सेट होना चाहिए.
  • iOS सिम्युलेटर (Xcode टूल इंस्टॉल करना ज़रूरी है).
  • Android Emulator (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.pngस्टार्टर — इस कोडलैब में बनाया जाने वाला शुरुआती कोड.
  • android_studio_folder.pngपूरा हुआ — इस कोडलैब के लिए कोड पूरा हो गया.

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. इस कोडलैब को पूरा करने के लिए, उपयोगकर्ता मेट्रिक को चालू करना ज़रूरी नहीं है. हालांकि, हमारा सुझाव है कि आप ऐसा करें, क्योंकि इससे आपको उपयोगकर्ता के व्यवहार को समझने में मदद मिलती है. प्रोसेस पूरी करने के लिए, जोड़ें पर क्लिक करें.

b918bf44362813a9.png

विज्ञापन यूनिट बनाना

AdMob में विज्ञापन यूनिट जोड़ने के लिए:

  1. 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 ऐप्लिकेशन जोड़ें

  1. AdMob कंसोल में, ऐप्लिकेशन मेन्यू में जाकर, ऐप्लिकेशन जोड़ें पर क्लिक करें.
  2. जब आपसे पूछा जाए कि क्या आपने अपना ऐप्लिकेशन Google Play या App Store पर पब्लिश किया है?, तो नहीं पर क्लिक करें.
  3. ऐप्लिकेशन के नाम वाले फ़ील्ड में Awesome Drawing Quiz डालें. इसके बाद, iOS को प्लैटफ़ॉर्म के तौर पर चुनें.

93e7f9f114232402.png

  1. इस कोडलैब को पूरा करने के लिए, उपयोगकर्ता मेट्रिक को चालू करना ज़रूरी नहीं है. हालांकि, हमारा सुझाव है कि आप ऐसा करें, क्योंकि इससे आपको उपयोगकर्ता के व्यवहार को समझने में मदद मिलती है. प्रोसेस पूरी करने के लिए, जोड़ें पर क्लिक करें.

b918bf44362813a9.png

विज्ञापन यूनिट बनाना

विज्ञापन यूनिट जोड़ने के लिए:

  1. 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 ऐप्लिकेशन और विज्ञापन यूनिट की जांच करना

अगर आपको खुद नया ऐप्लिकेशन और विज्ञापन यूनिट बनाने के बजाय कोडलैब को फ़ॉलो करना है, तो नीचे दी गई टेबल में दिए गए, टेस्ट AdMob ऐप्लिकेशन आईडी और विज्ञापन यूनिट आईडी का इस्तेमाल करें.

Android ऐप्लिकेशन का आईडी/विज्ञापन यूनिट का आईडी

Item

ऐप्लिकेशन आईडी/विज्ञापन यूनिट आईडी

AdMob ऐप्लिकेशन आईडी

ca-app-pub-3940256099942544~3347511713

बैनर

ca-app-pub-3940256099942544/6300978111

मध्यवर्ती

ca-app-pub-3940256099942544/1033173712

इनाम दिया गया

ca-app-pub-3940256099942544/5224354917

iOS ऐप्लिकेशन आईडी/विज्ञापन यूनिट आईडी

Item

ऐप्लिकेशन आईडी/विज्ञापन यूनिट आईडी

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 मोबाइल विज्ञापन Flutter प्लगिन जोड़ें

Flutter, प्लैटफ़ॉर्म के हिसाब से कई सेवाओं का ऐक्सेस देने के लिए प्लगिन का इस्तेमाल करता है. प्लगिन की मदद से, हर प्लैटफ़ॉर्म पर सेवाओं और एपीआई को ऐक्सेस किया जा सकता है.

google_mobile_ads प्लगिन, AdMob API का इस्तेमाल करके बैनर, इंटरस्टीशियल, इनाम वाले विज्ञापन, और नेटिव विज्ञापनों को लोड करने और दिखाने के साथ काम करता है.

Flutter कई प्लैटफ़ॉर्म पर काम करने वाला SDK टूल है. इसलिए, google_mobile_ads प्लगिन iOS और Android, दोनों पर लागू होता है. इसलिए, अगर आपने अपने Flutter ऐप्लिकेशन में प्लगिन जोड़ा है, तो AdMob के इनलाइन विज्ञापन ऐप्लिकेशन के Android और iOS, दोनों वर्शन में उस प्लगिन का इस्तेमाल किया जाएगा.

Google Mobile Ads प्लगिन को डिपेंडेंसी के तौर पर जोड़ना

AdMob इनलाइन विज्ञापन प्रोजेक्ट से AdMob API को ऐक्सेस करने के लिए, प्रोजेक्ट के रूट में मौजूद pubspec.yaml फ़ाइल पर डिपेंडेंसी के तौर पर google_mobile_ads जोड़ें.

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

...

A शानदार ड्रॉइंग क्विज़ प्रोजेक्ट में प्लगिन इंस्टॉल करने के लिए, Pub get पर क्लिक करें.

9ce73858eedbd8fc.png

AndroidManifest.xml (Android) को अपडेट करना

  1. Android Studio में android/app/src/main/AndroidManifest.xml फ़ाइल खोलें.
  2. com.google.android.gms.ads.APPLICATION_ID नाम के साथ <meta-data> टैग जोड़कर, अपना AdMob ऐप्लिकेशन आईडी जोड़ें. उदाहरण के लिए, अगर आपका 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. Android Studio में ios/Runner/Info.plist फ़ाइल खोलें.
  2. अपने AdMob ऐप्लिकेशन आईडी की स्ट्रिंग वैल्यू के साथ GADApplicationIdentifier कुंजी जोड़ें. उदाहरण के लिए, अगर आपका AdMob ऐप्लिकेशन आईडी ca-app-pub-3940256099942544~1458002511 है, तो आपको Info.plist फ़ाइल में ये लाइनें जोड़नी होंगी.

ios/Runner/Info.plist

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

5. विज्ञापनों के लिए हेल्पर क्लास जोड़ें

lib डायरेक्ट्री के तहत, ad_helper.dart नाम से एक नई फ़ाइल बनाएं. इसके बाद, AdHelper क्लास लागू करें. इससे Android और iOS के लिए, AdMob का ऐप्लिकेशन आईडी और विज्ञापन यूनिट आईडी मिलता है.

पक्का करें कि आपने 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 फ़ाइल खोलें और होम पेज के लोड होने से पहले, SDK टूल को शुरू करने के लिए, _initGoogleMobileAds() में बदलाव करें.

ध्यान दें कि आपको _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() तरीके में, 320x50 बैनर (AdSize.banner) के लिए BannerAd बनाएं और लोड करें. ध्यान दें कि विज्ञापन इवेंट लिसनर, विज्ञापन लोड होने पर यूज़र इंटरफ़ेस (यूआई) (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. dispose() कॉलबैक वाले तरीके में BannerAd.dispose() तरीके को कॉल करके, BannerAd ऑब्जेक्ट से जुड़े संसाधन को रिलीज़ करें.

lib/game_route.dart

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

  ...

  super.dispose();
}

हो गया! प्रोजेक्ट चलाएं और नया गेम शुरू करें. विज्ञापन लोड होने के बाद, आपको स्क्रीन पर सबसे ऊपर बैनर विज्ञापन दिखेगा.

276b4cfa283ea6c7.png

8. पेज पर अचानक दिखने वाला विज्ञापन जोड़ें

इस सेक्शन में, गेम (कुल पांच लेवल) खत्म होने के बाद, पेज पर अचानक दिखने वाला विज्ञापन दिखाया जाता है.

  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. इस कोडलैब में, जब कोई उपयोगकर्ता पांच लेवल पूरे कर लेता है, तो उसे पेज पर अचानक दिखने वाला विज्ञापन दिखता है. ग़ैर-ज़रूरी विज्ञापन अनुरोधों को कम करने के लिए, किसी उपयोगकर्ता के लेवल 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. dispose() कॉलबैक वाले तरीके में InterstitialAd.dispose() तरीके को कॉल करके, InterstitialAd ऑब्जेक्ट से जुड़े संसाधन को रिलीज़ करें.

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. गेम शुरू होने पर, इनाम वाले विज्ञापन का अनुरोध करने के लिए, 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() तरीके को कॉलबैक से कॉल किया जाता है. इससे संकेत स्ट्रिंग में एक और वर्ण दिखता है. ऐप्लिकेशन, 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. dispose() कॉलबैक वाले तरीके में RewardedAd.dispose() तरीके को कॉल करके, RewardedAd ऑब्जेक्ट से जुड़े संसाधन को रिलीज़ करें.

lib/game_route.dart

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

हो गया! प्रोजेक्ट चलाएं और गेम खेलें. इनाम वाला विज्ञापन लोड होने के बाद, आपको स्क्रीन के सबसे नीचे संकेत वाला बटन दिखेगा. ज़्यादा संकेत पाने के लिए, सुझाव बटन पर क्लिक करें.

4a114d243ae3e71d.gif

10. सब हो गया!

आपने कोडलैब पूरा कर लिया है. इस कोडलैब के लिए पूरा कोड देखने के लिए, android_studio_folder.pngपूरा करें फ़ोल्डर देखें.

बैनर और नेटिव इनलाइन विज्ञापनों को लागू करने का तरीका जानने के लिए, Flutter ऐप्लिकेशन में AdMob बैनर और नेटिव इनलाइन विज्ञापन जोड़ना कोडलैब देखें.

ज़्यादा जानने के लिए, अन्य Flutter कोड लैब आज़माएं.