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

1. परिचय

आपको क्या बनाने को मिलेगा

इस कोडलैब में, Awesome Drawing Quiz नाम के ऐप्लिकेशन में बैनर, इंटरस्टीशियल, और इनाम वाला विज्ञापन जोड़ने का तरीका बताया गया है. यह एक ऐसा गेम है जिसमें खिलाड़ियों को ड्रॉइंग का नाम गेस करना होता है.

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

आपको क्या सीखने को मिलेगा

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

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

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

AdMob इस्तेमाल करने के अपने अनुभव को आप क्या रेटिंग देंगे?

शुरुआती सामान्य एडवांस

Flutter के साथ अपने अनुभव को आप क्या रेटिंग देंगे?

शुरुआती सामान्य एडवांस

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

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

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

  • आपके पास Android या iOS डिवाइस होना चाहिए. यह डिवाइस आपके कंप्यूटर से कनेक्ट होना चाहिए और डेवलपर मोड पर सेट होना चाहिए.
  • iOS सिम्युलेटर (इसके लिए, Xcode टूल इंस्टॉल करना ज़रूरी है).
  • Android Emulator (इसे Android Studio में सेट अप करना ज़रूरी है).
  • कोई ब्राउज़र (डीबग करने के लिए Chrome ज़रूरी है).
  • Windows, Linux या macOS के डेस्कटॉप ऐप्लिकेशन के तौर पर. आपको उसी प्लैटफ़ॉर्म पर डेवलपमेंट करना होगा जहां आपको ऐप्लिकेशन डिप्लॉय करना है. इसलिए, अगर आपको Windows डेस्कटॉप ऐप्लिकेशन डेवलप करना है, तो आपको Windows पर ही डेवलप करना होगा, ताकि सही बिल्ड चेन को ऐक्सेस किया जा सके. ऑपरेटिंग सिस्टम के हिसाब से कुछ ज़रूरी शर्तें होती हैं. इनके बारे में docs.flutter.dev/desktop पर पूरी जानकारी दी गई है.

कोड डाउनलोड करना

ज़िप फ़ाइल डाउनलोड करने के बाद, उसके कॉन्टेंट को एक्सट्रैक्ट करें. आपके पास admob-ads-in-flutter-master नाम का एक फ़ोल्डर होगा.

इसके अलावा, कमांड लाइन से GitHub रिपॉज़िटरी को क्लोन किया जा सकता है:

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

इस रिपॉज़िटरी में दो फ़ोल्डर हैं:

  • android_studio_folder.pngस्टार्टर — यह शुरुआती कोड है, जिसे आपको इस कोडलैब में बनाना है.
  • android_studio_folder.pngcomplete — इस कोडलैब के लिए पूरा किया गया कोड.

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 कंसोल में, ऐप्लिकेशन मेन्यू से Awesome Drawing Quiz चुनें.
  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 कंसोल में, ऐप्लिकेशन मेन्यू से Awesome Drawing Quiz ऐप्लिकेशन चुनें.
  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 Mobile Ads 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

...

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

ध्यान दें कि एसडीके के शुरू होने के बाद, उसका नतीजा पाने के लिए आपको _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 क्लास में, बैनर विज्ञापन के लिए ये सदस्य जोड़ें.

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. BannerAd ऑब्जेक्ट से जुड़े संसाधन को रिलीज़ करें. इसके लिए, dispose() कॉलबैक फ़ंक्शन में BannerAd.dispose() वाले तरीके को कॉल करें.

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

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. गेम खत्म होने पर, गेम के स्कोर का डायलॉग दिखता है. जब कोई उपयोगकर्ता डायलॉग बॉक्स को बंद करता है, तो उसे Awesome Drawing Quiz की होम स्क्रीन पर भेज दिया जाता है.

इंटरस्टीशियल विज्ञापन, स्क्रीन ट्रांज़िशन के बीच में दिखाए जाने चाहिए. इसलिए, जब कोई उपयोगकर्ता बंद करें बटन पर क्लिक करता है, तब हम इंटरस्टीशियल विज्ञापन दिखाते हैं.

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

lib/game_route.dart

@override
void dispose() {
  ...

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

  ...

  super.dispose();
}

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

4a114d243ae3e71d.gif

10. सब हो गया!

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

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

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