Flutter ऐप्लिकेशन में AdMob बैनर और नेटिव इनलाइन विज्ञापन जोड़ना

1. परिचय

इस कोडलैब में, Flutter ऐप्लिकेशन में AdMob बैनर और AdMob नेटिव इनलाइन विज्ञापन लागू किया गया है.

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

इस कोडलैब में, Flutter के लिए Google Mobile Ads प्लगिन का इस्तेमाल करके, Flutter ऐप्लिकेशन में AdMob इनलाइन बैनर और AdMob नेटिव इनलाइन विज्ञापन लागू करने के बारे में बताया गया है.

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

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

  • Google Mobile Ads Flutter प्लगिन को कॉन्फ़िगर करने का तरीका
  • 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-inline-ads-in-flutter-main नाम का एक फ़ोल्डर होगा.

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

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

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

  • android_studio_folder.png स्टार्टर: यह वह शुरुआती कोड है जिसे आपको इस कोडलैब में बनाना है.
  • android_studio_folder.png complete: इस कोडलैब के लिए पूरा किया गया कोड. (नेटिव कोड के लिए Java और Objective-C)
  • android_studio_folder.png complete_kotlin_swift: इस कोडलैब के लिए पूरा किया गया कोड. (नेटिव कोड के लिए Kotlin और Swift)

3. AdMob ऐप्लिकेशन और विज्ञापन यूनिट सेट अप करना

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

Android के लिए सेट अप करना

Android के लिए सेट अप करने के लिए, आपको एक Android ऐप्लिकेशन जोड़ना होगा और विज्ञापन यूनिट बनानी होंगी.

Android ऐप्लिकेशन जोड़ना

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

d51828db0e2e4f6c.png

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

b918bf44362813a9.png

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

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

  1. AdMob कंसोल में, ऐप्लिकेशन मेन्यू से AdMob इनलाइन विज्ञापन ऐप्लिकेशन चुनें.
  2. विज्ञापन यूनिट मेन्यू पर क्लिक करें.

बैनर

  1. विज्ञापन यूनिट जोड़ें पर क्लिक करें.
  2. फ़ॉर्मैट के तौर पर बैनर चुनें.
  3. विज्ञापन यूनिट का नाम फ़ील्ड में android-inline-banner डालें.
  4. प्रोसेस पूरी करने के लिए, विज्ञापन यूनिट बनाएं पर क्लिक करें.

नेटिव

  1. विज्ञापन यूनिट जोड़ें पर क्लिक करें.
  2. फ़ॉर्मैट के तौर पर नेटिव ऐडवांस चुनें.
  3. विज्ञापन यूनिट का नाम फ़ील्ड में android-inline-native डालें.
  4. प्रोसेस पूरी करने के लिए, विज्ञापन यूनिट बनाएं पर क्लिक करें.

आम तौर पर, नई विज्ञापन यूनिट को विज्ञापन दिखाने में कुछ घंटे लगते हैं.

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

iOS के लिए सेट अप करना

iOS के लिए सेट अप करने के लिए, आपको एक iOS ऐप्लिकेशन जोड़ना होगा और विज्ञापन यूनिट बनानी होंगी.

iOS ऐप्लिकेशन जोड़ना

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

a4c963c9aa09519.png

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

b918bf44362813a9.png

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

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

  1. AdMob कंसोल में, ऐप्लिकेशन मेन्यू से AdMob इनलाइन विज्ञापन ऐप्लिकेशन चुनें.
  2. विज्ञापन यूनिट मेन्यू पर क्लिक करें.

बैनर

  1. विज्ञापन यूनिट जोड़ें पर क्लिक करें.
  2. फ़ॉर्मैट के तौर पर बैनर चुनें.
  3. विज्ञापन यूनिट का नाम फ़ील्ड में ios-inline-banner डालें.
  4. प्रोसेस पूरी करने के लिए, विज्ञापन यूनिट बनाएं पर क्लिक करें.

नेटिव

  1. विज्ञापन यूनिट जोड़ें पर क्लिक करें.
  2. फ़ॉर्मैट के तौर पर नेटिव ऐडवांस चुनें.
  3. विज्ञापन यूनिट का नाम फ़ील्ड में ios-inline-native डालें.
  4. प्रोसेस पूरी करने के लिए, विज्ञापन यूनिट बनाएं पर क्लिक करें.

आम तौर पर, नई विज्ञापन यूनिट को विज्ञापन दिखाने में कुछ घंटे लगते हैं.

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

ज़रूरी नहीं: AdMob के टेस्ट ऐप्लिकेशन और विज्ञापन यूनिट का इस्तेमाल करना

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

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

Item

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

AdMob के ज़रिए विज्ञापन दिखाने वाले ऐप्लिकेशन का आईडी

ca-app-pub-3940256099942544~3347511713

बैनर

ca-app-pub-3940256099942544/6300978111

मूल भाषा वाला

ca-app-pub-3940256099942544/2247696110

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

Item

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

AdMob के ज़रिए विज्ञापन दिखाने वाले ऐप्लिकेशन का आईडी

ca-app-pub-3940256099942544~1458002511

बैनर

ca-app-pub-3940256099942544/2934735716

मूल भाषा वाला

ca-app-pub-3940256099942544/3986624511

टेस्ट विज्ञापनों के बारे में ज़्यादा जानने के लिए, 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

...
dependencies:
  flutter:
    sdk: flutter
  google_fonts: ^0.3.9

  # TODO: Add google_mobile_ads as a dependency
  google_mobile_ads: ^1.2.0

...

AdMob इनलाइन विज्ञापन प्रोजेक्ट में प्लगिन इंस्टॉल करने के लिए, Pub get पर क्लिक करें.

93ef6061e58ebc86.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) को पिछले चरण में बनाए गए आईडी से बदल दिया हो.

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 nativeAdUnitId {
    if (Platform.isAndroid) {
      return "<YOUR_ANDROID_NATIVE_AD_UNIT_ID>";
    } else if (Platform.isIOS) {
      return "<YOUR_IOS_NATIVE_AD_UNIT_ID>";
    } else {
      throw UnsupportedError("Unsupported platform");
    }
  }
}

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

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';
    }
    throw UnsupportedError("Unsupported platform");
  }

  static String get nativeAdUnitId {
    if (Platform.isAndroid) {
      return 'ca-app-pub-3940256099942544/2247696110';
    } else if (Platform.isIOS) {
      return 'ca-app-pub-3940256099942544/3986624511';
    }
    throw UnsupportedError("Unsupported platform");
  }
}

6. Google Mobile Ads SDK को शुरू करना

विज्ञापन लोड करने से पहले, आपको Google Mobile Ads SDK को शुरू करना होगा. lib/home_page.dart फ़ाइल खोलें और होम पेज लोड होने से पहले एसडीके को शुरू करने के लिए, _initGoogleMobileAds() में बदलाव करें.

ध्यान दें कि एसडीके के शुरू होने के बाद, उसका नतीजा पाने के लिए आपको _initGoogleMobileAds() तरीके के रिटर्न टाइप को Future<dynamic> से बदलकर Future<InitializationStatus> करना होगा.

home_page.dart

// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';

import 'package:flutter/material.dart';

...

class HomePage extends StatelessWidget {

  ...

  Future<InitializationStatus> _initGoogleMobileAds() {
    // TODO: Initialize Google Mobile Ads SDK
    return MobileAds.instance.initialize();
  }
}

7. बैनर विज्ञापन जोड़ना

इस सेक्शन में, सूची के बीच में बैनर विज्ञापन दिखाया जाता है. जैसा कि इस स्क्रीनशॉट में दिखाया गया है.

62c405c962909fd3.png

  1. lib/banner_inline_page.dart फ़ाइल खोलें.
  2. नीचे दी गई लाइनें जोड़कर, ad_helper.dart और google_mobile_ads.dart इंपोर्ट करें:
...

// TODO: Import ad_helper.dart
import 'package:admob_inline_ads_in_flutter/ad_helper.dart';

// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';

class BannerInlinePage extends StatefulWidget {
  ...
}
  1. _BannerInlinePageState क्लास में, बैनर विज्ञापन के लिए यहां दिए गए सदस्यों और तरीकों को जोड़ें.

ध्यान दें कि _kAdIndex से उस इंडेक्स का पता चलता है जहां बैनर विज्ञापन दिखाया जाएगा. इसका इस्तेमाल, _getDestinationItemIndex() तरीके से आइटम इंडेक्स का हिसाब लगाने के लिए किया जाता है.

banner_inline_page.dart

class _BannerInlinePageState extends State<BannerInlinePage> {

  // TODO: Add _kAdIndex
  static final _kAdIndex = 4;

  // TODO: Add a banner ad instance
  BannerAd? _ad;

  ...

  // TODO: Add _getDestinationItemIndex()
  int _getDestinationItemIndex(int rawIndex) {
    if (rawIndex >= _kAdIndex && _ad != null) {
      return rawIndex - 1;
    }
    return rawIndex;
  }

  ...
}
  1. initState() तरीके में, 320x50 बैनर (AdSize.banner) के लिए BannerAd बनाएं और लोड करें. ध्यान दें कि विज्ञापन लोड होने पर, यूज़र इंटरफ़ेस (यूआई) (setState()) को अपडेट करने के लिए, विज्ञापन इवेंट लिसनर कॉन्फ़िगर किया जाता है.

banner_inline_page.dart

@override
void initState() {
  super.initState();

  // TODO: Load a banner ad
  BannerAd(
    adUnitId: AdHelper.bannerAdUnitId,
    size: AdSize.banner,
    request: AdRequest(),
    listener: BannerAdListener(
      onAdLoaded: (ad) {
        setState(() {
          _ad = ad as BannerAd;
        });
      },
      onAdFailedToLoad: (ad, error) {
        // Releases an ad resource when it fails to load
        ad.dispose();
        print('Ad load failed (code=${error.code} message=${error.message})');
      },
    ),
  ).load();
}
  1. build() मेथड में बदलाव करके, बैनर विज्ञापन उपलब्ध होने पर उसे दिखाएं.
  2. बैनर विज्ञापन की एंट्री को गिनने के लिए itemCount, को अपडेट करें. साथ ही, विज्ञापन लोड होने पर विज्ञापन इंडेक्स (_kAdIndex) में बैनर विज्ञापन रेंडर करने के लिए itemBuilder, को अपडेट करें.
  3. कॉन्टेंट आइटम के लिए इंडेक्स वापस पाने के लिए, _getDestinationItemIndex() तरीके का इस्तेमाल करने के लिए कोड अपडेट करें.

banner_inline_page.dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    ...
    body: ListView.builder(
      // TODO: Adjust itemCount based on the ad load state
      itemCount: widget.entries.length + (_ad != null ? 1 : 0),
      itemBuilder: (context, index) {
        // TODO: Render a banner ad
        if (_ad != null && index == _kAdIndex) {
          return Container(
            width: _ad!.size.width.toDouble(),
            height: 72.0,
            alignment: Alignment.center,
            child: AdWidget(ad: _ad!),
          );
        } else {
          // TODO: Get adjusted item index from _getDestinationItemIndex()
          final item = widget.entries[_getDestinationItemIndex(index)];

          return ListTile(
            ...
          );
        }
      },
    ),
  );
}
  1. BannerAd ऑब्जेक्ट से जुड़े संसाधन को रिलीज़ करें. इसके लिए, dispose() कॉलबैक फ़ंक्शन में BannerAd.dispose() वाले तरीके को कॉल करें.

banner_inline_page.dart

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

  super.dispose();
}

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

a5f857a850539fe9.png c32af50872514224.png

8. नेटिव विज्ञापन जोड़ना

इस सेक्शन में, सूची के बीच में नेटिव विज्ञापन दिखाया जाता है. इसे इस स्क्रीनशॉट में दिखाया गया है.

f1671b0fa349ccf8.png

नेटिव विज्ञापन, उपयोगकर्ताओं को ऐसे यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट का इस्तेमाल करके दिखाए जाते हैं जो प्लैटफ़ॉर्म के लिए नेटिव होते हैं. उदाहरण के लिए, Android पर View या iOS पर UIView.

हालांकि, Flutter विजेट का इस्तेमाल करके सीधे तौर पर नेटिव यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट नहीं बनाए जा सकते. इसलिए, आपको हर प्लैटफ़ॉर्म के लिए NativeAdFactory लागू करना होगा. इसका इस्तेमाल, नेटिव विज्ञापन ऑब्जेक्ट (Android पर NativeAd और iOS पर GADNativeAd) से, प्लैटफ़ॉर्म के हिसाब से नेटिव विज्ञापन व्यू (Android पर NativeAdView और iOS पर GADNativeAdView) बनाने के लिए किया जाता है.

Android (Java) के लिए NativeAdFactory लागू करना

  1. android/build.gradle फ़ाइल (या android फ़ोल्डर में मौजूद कोई भी फ़ाइल) खोलें. इसके बाद, Android प्रोजेक्ट खोलने के लिए, Android Studio में बदलाव करने के लिए खोलें पर क्लिक करें.

623ad3d2282ccbf8.png

  1. अगर आपसे नया प्रोजेक्ट खोलने के लिए कोई विंडो चुनने को कहा जाता है, तो नई विंडो पर क्लिक करें. इससे Android प्रोजेक्ट पर काम करते समय, Flutter प्रोजेक्ट खुला रहेगा.

d188bb51cf7c2d08.png

नेटिव विज्ञापन का लेआउट बनाना

  1. Android प्रोजेक्ट खुला होने पर, Android Studio में प्रोजेक्ट पैन में मौजूद app पर राइट क्लिक करें. इसके बाद, कॉन्टेक्स्ट मेन्यू से New > Android Resource File को चुनें.

2b629ee277a68fd7.png

  1. नई संसाधन फ़ाइल डायलॉग में, फ़ाइल के नाम के तौर पर list_tile_native_ad.xml डालें.
  2. संसाधन के टाइप के तौर पर लेआउट को चुनें और com.google.android.gms.ads.nativead.NativeAdView को रूट एलिमेंट के तौर पर डालें.
  3. नई लेआउट फ़ाइल बनाने के लिए, ठीक है पर क्लिक करें.

575f126dd018bc0.png

  1. विज्ञापन लेआउट को इस तरह लागू करें. ध्यान दें कि लेआउट, उस प्लैटफ़ॉर्म के उपयोगकर्ता अनुभव के विज़ुअल डिज़ाइन से मेल खाना चाहिए जिसके लिए इसे बनाया गया है.

list_tile_native_ad.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.gms.ads.nativead.NativeAdView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#F19938"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:textSize="12sp" />

        <ImageView
            android:id="@+id/iv_list_tile_native_ad_icon"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:scaleType="fitXY"
            tools:background="#EDEDED" />

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_large"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:background="#F19938"
            android:gravity="center"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:visibility="invisible" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="80dp"
            android:layout_marginLeft="80dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_list_tile_native_ad_headline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#000000"
                android:textSize="16sp"
                tools:text="Headline" />

            <TextView
                android:id="@+id/tv_list_tile_native_ad_body"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#828282"
                android:textSize="14sp"
                tools:text="body" />

        </LinearLayout>

    </FrameLayout>

</com.google.android.gms.ads.nativead.NativeAdView>

ListTileNativeAdFactory क्लास बनाना

  1. प्रोजेक्ट पैनल में, com.codelab.flutter.admobinlineads पैकेज पर राइट क्लिक करें. इसके बाद, New > Java Class चुनें.

9f3f111dd207a9b4.png

  1. नाम के तौर पर ListTileNativeAdFactory डालें और सूची से क्लास चुनें.

47ff82d92676e26.png

  1. नई क्लास डायलॉग बॉक्स दिखने के बाद, सभी फ़ील्ड खाली छोड़ दें और ठीक है पर क्लिक करें.

आपको दिखेगा कि com.codelab.flutter.admobinlineads पैकेज में ListTileNativeAdFactory क्लास बन गई है.

e4ed232c358ffb19.png

  1. ListTileNativeAdFactory क्लास को इस तरह लागू करें. ध्यान दें कि क्लास, GoogleMobileAdsPlugin.NativeAdFactory इंटरफ़ेस में createNativeAd() तरीके को लागू करती है.

फ़ैक्ट्री क्लास, नेटिव विज्ञापन को रेंडर करने के लिए व्यू ऑब्जेक्ट बनाने की ज़िम्मेदारी निभाती है. कोड से पता चलता है कि फ़ैक्ट्री क्लास, UnifiedNativeAdView बनाता है और उसे NativeAd ऑब्जेक्ट से भरता है.

ListTileNativeAdFactory.java

// TODO: Implement ListTileNativeAdFactory class

package com.codelab.flutter.admobinlineads;

import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.Map;

import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin;

class ListTileNativeAdFactory implements GoogleMobileAdsPlugin.NativeAdFactory {

    private final Context context;

    ListTileNativeAdFactory(Context context) {
        this.context = context;
    }

    @Override
    public NativeAdView createNativeAd(
            NativeAd nativeAd, Map<String, Object> customOptions) {
        NativeAdView nativeAdView = (NativeAdView) LayoutInflater.from(context)
                .inflate(R.layout.list_tile_native_ad, null);

        TextView attributionViewSmall = nativeAdView
                .findViewById(R.id.tv_list_tile_native_ad_attribution_small);
        TextView attributionViewLarge = nativeAdView
                .findViewById(R.id.tv_list_tile_native_ad_attribution_large);

        ImageView iconView = nativeAdView.findViewById(R.id.iv_list_tile_native_ad_icon);
        NativeAd.Image icon = nativeAd.getIcon();
        if (icon != null) {
            attributionViewSmall.setVisibility(View.VISIBLE);
            attributionViewLarge.setVisibility(View.INVISIBLE);
            iconView.setImageDrawable(icon.getDrawable());
        } else {
            attributionViewSmall.setVisibility(View.INVISIBLE);
            attributionViewLarge.setVisibility(View.VISIBLE);
        }
        nativeAdView.setIconView(iconView);

        TextView headlineView = nativeAdView.findViewById(R.id.tv_list_tile_native_ad_headline);
        headlineView.setText(nativeAd.getHeadline());
        nativeAdView.setHeadlineView(headlineView);

        TextView bodyView = nativeAdView.findViewById(R.id.tv_list_tile_native_ad_body);
        bodyView.setText(nativeAd.getBody());
        bodyView.setVisibility(nativeAd.getBody() != null ? View.VISIBLE : View.INVISIBLE);
        nativeAdView.setBodyView(bodyView);

        nativeAdView.setNativeAd(nativeAd);

        return nativeAdView;
    }
}

ListTileNativeAdFactory क्लास को रजिस्टर करना

NativeAdFactory के किसी इंस्टेंस को GoogleMobileAdsPlugin में रजिस्टर करना ज़रूरी है. इसके बाद ही, उसे Flutter की ओर से इस्तेमाल किया जा सकता है.

  1. MainActivity.java फ़ाइल खोलें और configureFlutterEngine() और cleanUpFlutterEngine() तरीके को बदलें.
  2. configureFlutterEngine() तरीके में, ListTileNativeAdFactory क्लास को यूनीक स्ट्रिंग आईडी (listTile) के साथ रजिस्टर करें.

MainActivity.java

public class MainActivity extends FlutterActivity {

    @Override
    public void configureFlutterEngine(@NonNull FlutterEngine flutterEngine) {
        super.configureFlutterEngine(flutterEngine);

        // TODO: Register the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.registerNativeAdFactory(flutterEngine, "listTile",
                new ListTileNativeAdFactory(getContext()));
    }

    ...
}
  1. सफ़ाई की प्रोसेस के दौरान, हर NativeAdFactory इंस्टेंस को अनरजिस्टर किया जाना चाहिए. cleanUpFlutterEngine() तरीके में ListTileNativeAdFactory क्लास को अनरजिस्टर करें.

MainActivity.java

public class MainActivity extends FlutterActivity {

    ...

    @Override
    public void cleanUpFlutterEngine(@NonNull FlutterEngine flutterEngine) {
        super.cleanUpFlutterEngine(flutterEngine);

        // TODO: Unregister the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "listTile");
    }
}

अब Android पर नेटिव विज्ञापन दिखाने के लिए, ListTileNativeAdFactory क्लास का इस्तेमाल किया जा सकता है.

Android (Kotlin) के लिए NativeAdFactory लागू करना

  1. android/build.gradle फ़ाइल (या android फ़ोल्डर में मौजूद कोई भी फ़ाइल) खोलें. इसके बाद, Android प्रोजेक्ट खोलने के लिए, Android Studio में बदलाव करने के लिए खोलें पर क्लिक करें.

623ad3d2282ccbf8.png

  1. अगर आपसे नया प्रोजेक्ट खोलने के लिए कोई विंडो चुनने को कहा जाता है, तो नई विंडो पर क्लिक करें. इससे Android प्रोजेक्ट पर काम करते समय, Flutter प्रोजेक्ट खुला रहेगा.

d188bb51cf7c2d08.png

नेटिव विज्ञापन का लेआउट बनाना

  1. Android प्रोजेक्ट खुला होने पर, Android Studio में प्रोजेक्ट पैन में मौजूद app पर राइट क्लिक करें. इसके बाद, कॉन्टेक्स्ट मेन्यू से New > Android Resource File को चुनें.

2b629ee277a68fd7.png

  1. नई संसाधन फ़ाइल डायलॉग में, फ़ाइल के नाम के तौर पर list_tile_native_ad.xml डालें.
  2. संसाधन के टाइप के तौर पर लेआउट को चुनें और com.google.android.gms.ads.nativead.NativeAdView को रूट एलिमेंट के तौर पर डालें.
  3. नई लेआउट फ़ाइल बनाने के लिए, ठीक है पर क्लिक करें.

575f126dd018bc0.png

  1. विज्ञापन लेआउट को इस तरह लागू करें. ध्यान दें कि लेआउट, उस प्लैटफ़ॉर्म के उपयोगकर्ता अनुभव के विज़ुअल डिज़ाइन से मेल खाना चाहिए जिसके लिए इसे बनाया गया है.

list_tile_native_ad.xml

<?xml version="1.0" encoding="utf-8"?>
<com.google.android.gms.ads.nativead.NativeAdView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_small"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#F19938"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:textSize="12sp" />

        <ImageView
            android:id="@+id/iv_list_tile_native_ad_icon"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:scaleType="fitXY"
            tools:background="#EDEDED" />

        <TextView
            android:id="@+id/tv_list_tile_native_ad_attribution_large"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="16dp"
            android:layout_marginLeft="16dp"
            android:background="#F19938"
            android:gravity="center"
            android:text="Ad"
            android:textColor="#FFFFFF"
            android:visibility="invisible" />

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginStart="80dp"
            android:layout_marginLeft="80dp"
            android:layout_marginEnd="16dp"
            android:layout_marginRight="16dp"
            android:orientation="vertical">

            <TextView
                android:id="@+id/tv_list_tile_native_ad_headline"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#000000"
                android:textSize="16sp"
                tools:text="Headline" />

            <TextView
                android:id="@+id/tv_list_tile_native_ad_body"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:lines="1"
                android:maxLines="1"
                android:textColor="#828282"
                android:textSize="14sp"
                tools:text="body" />

        </LinearLayout>

    </FrameLayout>

</com.google.android.gms.ads.nativead.NativeAdView>

ListTileNativeAdFactory क्लास बनाना

  1. प्रोजेक्ट पैनल में, com.codelab.flutter.admobinlineads पैकेज पर राइट क्लिक करें. इसके बाद, New > Kotlin File/Class को चुनें.

7311744cb97cad75.png

  1. नाम के तौर पर ListTileNativeAdFactory डालें और सूची से क्लास चुनें.

25691151b5814867.png

  1. आपको दिखेगा कि com.codelab.flutter.admobinlineads पैकेज में ListTileNativeAdFactory क्लास बन गई है.
  2. ListTileNativeAdFactory क्लास को इस तरह लागू करें. ध्यान दें कि क्लास, GoogleMobileAdsPlugin.NativeAdFactory इंटरफ़ेस में createNativeAd() तरीके को लागू करती है.

फ़ैक्ट्री क्लास, नेटिव विज्ञापन को रेंडर करने के लिए व्यू ऑब्जेक्ट बनाने की ज़िम्मेदारी निभाती है. कोड से पता चलता है कि फ़ैक्ट्री क्लास, NativeAdView बनाता है और उसे NativeAd ऑब्जेक्ट से भरता है.

ListTileNativeAdFactory.kt

// TODO: Implement ListTileNativeAdFactory class

package com.codelab.flutter.admobinlineads

import android.content.Context
import android.view.LayoutInflater
import android.view.View
import android.widget.ImageView
import android.widget.TextView
import com.google.android.gms.ads.nativead.NativeAd
import com.google.android.gms.ads.nativead.NativeAdView
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin

class ListTileNativeAdFactory(val context: Context) : GoogleMobileAdsPlugin.NativeAdFactory {

    override fun createNativeAd(
            nativeAd: NativeAd,
            customOptions: MutableMap<String, Any>?
    ): NativeAdView {
        val nativeAdView = LayoutInflater.from(context)
                .inflate(R.layout.list_tile_native_ad, null) as NativeAdView

        with(nativeAdView) {
            val attributionViewSmall =
                    findViewById<TextView>(R.id.tv_list_tile_native_ad_attribution_small)
            val attributionViewLarge =
                    findViewById<TextView>(R.id.tv_list_tile_native_ad_attribution_large)

            val iconView = findViewById<ImageView>(R.id.iv_list_tile_native_ad_icon)
            val icon = nativeAd.icon
            if (icon != null) {
                attributionViewSmall.visibility = View.VISIBLE
                attributionViewLarge.visibility = View.INVISIBLE
                iconView.setImageDrawable(icon.drawable)
            } else {
                attributionViewSmall.visibility = View.INVISIBLE
                attributionViewLarge.visibility = View.VISIBLE
            }
            this.iconView = iconView

            val headlineView = findViewById<TextView>(R.id.tv_list_tile_native_ad_headline)
            headlineView.text = nativeAd.headline
            this.headlineView = headlineView

            val bodyView = findViewById<TextView>(R.id.tv_list_tile_native_ad_body)
            with(bodyView) {
                text = nativeAd.body
                visibility = if (nativeAd.body.isNotEmpty()) View.VISIBLE else View.INVISIBLE
            }
            this.bodyView = bodyView

            setNativeAd(nativeAd)
        }

        return nativeAdView
    }
}

ListTileNativeAdFactory क्लास को रजिस्टर करना

NativeAdFactory के किसी इंस्टेंस को GoogleMobileAdsPlugin में रजिस्टर करना ज़रूरी है. इसके बाद ही, उसे Flutter की ओर से इस्तेमाल किया जा सकता है.

  1. MainActivity.kt फ़ाइल खोलें और configureFlutterEngine() और cleanUpFlutterEngine() तरीके को बदलें.
  2. configureFlutterEngine() तरीके में, ListTileNativeAdFactory क्लास को यूनीक स्ट्रिंग आईडी (listTile) के साथ रजिस्टर करें.

MainActivity.kt

class MainActivity: FlutterActivity() {

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        // TODO: Register the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.registerNativeAdFactory(
                flutterEngine, "listTile", ListTileNativeAdFactory(context))
    }

    ...
}
  1. सफ़ाई की प्रोसेस के दौरान, हर NativeAdFactory इंस्टेंस को अनरजिस्टर किया जाना चाहिए. cleanUpFlutterEngine() तरीके में ListTileNativeAdFactory क्लास को अनरजिस्टर करें.

MainActivity.kt

class MainActivity: FlutterActivity() {
    ...

    override fun cleanUpFlutterEngine(flutterEngine: FlutterEngine) {
        super.cleanUpFlutterEngine(flutterEngine)

        // TODO: Unregister the ListTileNativeAdFactory
        GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "listTile")
    }
}

अब Android पर नेटिव विज्ञापन दिखाने के लिए, ListTileNativeAdFactory क्लास का इस्तेमाल किया जा सकता है.

iOS (Objective-C) के लिए NativeAdFactory लागू करना

ios/Podfile फ़ाइल (या ios फ़ोल्डर में मौजूद कोई भी फ़ाइल) खोलें. इसके बाद, iOS प्रोजेक्ट खोलने के लिए, Xcode में iOS मॉड्यूल खोलें पर क्लिक करें.

62aa12c10e6d671f.png

नेटिव विज्ञापन का लेआउट तैयार करना

नेटिव विज्ञापन ऐसेट को लेआउट करने के लिए, आपके पास कस्टम व्यू (*.xib) होना चाहिए. इस कोडलैब में, पहले से कॉन्फ़िगर किए गए व्यू का इस्तेमाल किया जाता है, ताकि आपको कम मेहनत करनी पड़े.

Xcode में iOS प्रोजेक्ट खोलने के बाद, पुष्टि करें कि ListTileNativeAdView.xib, Runner प्रोजेक्ट में मौजूद है.

a5f04a32f1868d4f.png

ListTileNativeAdFactory क्लास बनाना

  1. प्रोजेक्ट नेविगेटर में, Runner ग्रुप पर राइट क्लिक करें. इसके बाद, नई क्लास के लिए हेडर फ़ाइल बनाने के लिए, New File को चुनें.

6455aab9e9881ca.png

  1. टेंप्लेट डायलॉग में, हेडर फ़ाइल को चुनें और उसका नाम ListTileNativeAdFactory रखें.
  2. ListTileNativeAdFactory.h फ़ाइल बनाने के बाद, ListNativeAdFactory क्लास को इस तरह से तय करें:

ListTileNativeAdFactory.h

#ifndef ListTileNativeAdFactory_h
#define ListTileNativeAdFactory_h

// TODO: Import FLTGoogleMobileAdsPlugin.h
#import "FLTGoogleMobileAdsPlugin.h"

// TODO: Declare ListTileNativeAdFactory
@interface ListTileNativeAdFactory : NSObject<FLTNativeAdFactory>

@end


#endif /* ListTileNativeAdFactory_h */
  1. Runner ग्रुप में जाकर, New File को चुनें. इससे एक Objective-C फ़ाइल बन जाएगी.
  2. अगले डायलॉग में, फ़ाइल फ़ील्ड में ListTileNativeAdFactory डालें. इसके बाद, फ़ाइल टाइप के तौर पर खाली फ़ाइल चुनें.

2c9c998c48db3a0.png

  1. आगे बढ़ें पर क्लिक करने के बाद, आपसे वह फ़ोल्डर चुनने के लिए कहा जाएगा जहां नई फ़ाइल बनानी है. सभी सेटिंग को डिफ़ॉल्ट पर रहने दें और बनाएं पर क्लिक करें.

8635ffe502d1f4ab.png

  1. ListTileNativeFactory क्लास को इस तरह लागू करें. ध्यान दें कि क्लास, FLTNativeAdFactory प्रोटोकॉल में createNativeAd() तरीके को लागू करती है.

फ़ैक्ट्री क्लास, नेटिव विज्ञापन को रेंडर करने के लिए व्यू ऑब्जेक्ट बनाने की ज़िम्मेदारी निभाती है. कोड से पता चलता है कि फ़ैक्ट्री क्लास, GADNativeAdView बनाता है और उसे GADNativeAd ऑब्जेक्ट से भरता है.

ListTileNativeAdFactory.m

// TODO: Import ListTileNativeAdFactory.h
#import "ListTileNativeAdFactory.h"

// TODO: Implement ListTileNativeAdFactory
@implementation ListTileNativeAdFactory

- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                             customOptions:(NSDictionary *)customOptions {
  GADNativeAdView *nativeAdView =
    [[NSBundle mainBundle] loadNibNamed:@"ListTileNativeAdView" owner:nil options:nil].firstObject;

  ((UILabel *)nativeAdView.headlineView).text = nativeAd.headline;

  ((UILabel *)nativeAdView.bodyView).text = nativeAd.body;
  nativeAdView.bodyView.hidden = nativeAd.body ? NO : YES;

  ((UIImageView *)nativeAdView.iconView).image = nativeAd.icon.image;
  nativeAdView.iconView.hidden = nativeAd.icon ? NO : YES;

  nativeAdView.callToActionView.userInteractionEnabled = NO;

  nativeAdView.nativeAd = nativeAd;

  return nativeAdView;
}

@end

ListTileNativeAdFacotry क्लास रजिस्टर करना

FLTNativeAdFactory के किसी भी वर्शन को Flutter की तरफ़ से इस्तेमाल करने से पहले, उसे FLTGoogleMobileAdsPlugin में रजिस्टर करना होगा.

AppDelegate.m फ़ाइल खोलें. इसके बाद, [FLTGoogleMobileAdsPlugin registerNativeAdFactory] तरीके को कॉल करके, ListTileNativeAdFactory को यूनीक स्ट्रिंग आईडी (listTile) के साथ रजिस्टर करें.

AppDelegate.m

#import "AppDelegate.h"
#import "GeneratedPluginRegistrant.h"

// TODO: Import ListTileNativeAdFactory.h
#import "ListTileNativeAdFactory.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];

  // TODO: Register ListTileNativeAdFactory
  ListTileNativeAdFactory *listTileFactory = [[ListTileNativeAdFactory alloc] init];
  [FLTGoogleMobileAdsPlugin registerNativeAdFactory:self
                                        factoryId:@"listTile"
                                  nativeAdFactory:listTileFactory];

  // Override point for customization after application launch.
  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}

@end

अब iOS पर नेटिव विज्ञापन रेंडर करने के लिए, ListTileNativeAdFactory का इस्तेमाल किया जा सकता है.

iOS (Swift) के लिए NativeAdFactory लागू करना

ios/Podfile फ़ाइल (या ios फ़ोल्डर में मौजूद कोई भी फ़ाइल) खोलें. इसके बाद, iOS प्रोजेक्ट खोलने के लिए, Xcode में iOS मॉड्यूल खोलें पर क्लिक करें.

62aa12c10e6d671f.png

नेटिव विज्ञापन का लेआउट तैयार करना

नेटिव विज्ञापन ऐसेट को लेआउट करने के लिए, आपके पास कस्टम व्यू (*.xib) होना चाहिए. इस कोडलैब में, पहले से कॉन्फ़िगर किए गए व्यू का इस्तेमाल किया जाता है, ताकि आपको कम मेहनत करनी पड़े.

Xcode में iOS प्रोजेक्ट खोलने के बाद, पुष्टि करें कि ListTileNativeAdView.xib, Runner प्रोजेक्ट में मौजूद है.

a5f04a32f1868d4f.png

ListTileNativeAdFactory क्लास बनाना

  1. प्रोजेक्ट नेविगेटर में, Runner ग्रुप पर राइट क्लिक करें. इसके बाद, नई क्लास के लिए हेडर फ़ाइल बनाने के लिए, New File को चुनें.

9115c92543345ef1.png

  1. टेंप्लेट डायलॉग में, Swift फ़ाइल को चुनें और उसे ListTileNativeAdFactory नाम दें.
  2. ListTileNativeAdFactory.swift फ़ाइल बनाने के बाद, ListNativeAdFactory क्लास लागू करें.

ध्यान दें कि क्लास, FLTNativeAdFactory प्रोटोकॉल में createNativeAd() तरीके को लागू करती है.

फ़ैक्ट्री क्लास, नेटिव विज्ञापन को रेंडर करने के लिए व्यू ऑब्जेक्ट बनाने की ज़िम्मेदारी निभाती है. कोड से पता चलता है कि फ़ैक्ट्री क्लास, GADNativeAdView बनाता है और उसे GADNativeAd ऑब्जेक्ट से भरता है.

ListTileNativeAdFactory.swift

// TODO: Import google_mobile_ads
import google_mobile_ads

// TODO: Implement ListTileNativeAdFactory
class ListTileNativeAdFactory : FLTNativeAdFactory {

    func createNativeAd(_ nativeAd: GADNativeAd,
                        customOptions: [AnyHashable : Any]? = nil) -> GADNativeAdView? {
        let nibView = Bundle.main.loadNibNamed("ListTileNativeAdView", owner: nil, options: nil)!.first
        let nativeAdView = nibView as! GADNativeAdView

        (nativeAdView.headlineView as! UILabel).text = nativeAd.headline

        (nativeAdView.bodyView as! UILabel).text = nativeAd.body
        nativeAdView.bodyView!.isHidden = nativeAd.body == nil

        (nativeAdView.iconView as! UIImageView).image = nativeAd.icon?.image
        nativeAdView.iconView!.isHidden = nativeAd.icon == nil

        nativeAdView.callToActionView?.isUserInteractionEnabled = false

        nativeAdView.nativeAd = nativeAd

        return nativeAdView
    }
}

ListTileNativeAdFacotry क्लास रजिस्टर करना

FLTNativeAdFactory के किसी भी वर्शन को Flutter की तरफ़ से इस्तेमाल करने से पहले, उसे FLTGoogleMobileAdsPlugin में रजिस्टर करना होगा.

AppDelegate.m फ़ाइल खोलें. इसके बाद, FLTGoogleMobileAdsPlugin.registerNativeAdFactory() तरीके को कॉल करके, ListTileNativeAdFactory को यूनीक स्ट्रिंग आईडी (listTile) के साथ रजिस्टर करें.

AppDelegate.swift

import UIKit
import Flutter

// TODO: Import google_mobile_ads
import google_mobile_ads

@UIApplicationMain
@objc class AppDelegate: FlutterAppDelegate {
  override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
  ) -> Bool {
    GeneratedPluginRegistrant.register(with: self)

    // TODO: Register ListTileNativeAdFactory
    let listTileFactory = ListTileNativeAdFactory()
    FLTGoogleMobileAdsPlugin.registerNativeAdFactory(
        self, factoryId: "listTile", nativeAdFactory: listTileFactory)

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
  }
}

अब iOS पर नेटिव विज्ञापन रेंडर करने के लिए, ListTileNativeAdFactory का इस्तेमाल किया जा सकता है.

नेटिव विज्ञापन को Flutter विजेट के साथ इंटिग्रेट करना

  1. lib/native_inline_page.dart फ़ाइल खोलें. इसके बाद, यहां दी गई लाइनों को जोड़कर ad_helper.dart और google_mobile_ads.dart इंपोर्ट करें:

native_inline_page.dart

...

// TODO: Import ad_helper.dart
import 'package:admob_inline_ads_in_flutter/ad_helper.dart';

// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';

class NativeInlinePage extends StatefulWidget {
  ...
}
  1. _NativeInlinePageState क्लास में, नेटिव विज्ञापन के लिए यहां दिए गए सदस्यों और तरीकों को जोड़ें.

ध्यान दें कि _kAdIndex से उस इंडेक्स का पता चलता है जहां बैनर विज्ञापन दिखाया जाएगा. इसका इस्तेमाल, _getDestinationItemIndex() तरीके से आइटम इंडेक्स का हिसाब लगाने के लिए किया जाता है.

native_inline_page.dart

class _NativeInlinePageState extends State<NativeInlinePage> {

  // TODO: Add _kAdIndex
  static final _kAdIndex = 4;

  // TODO: Add a native ad instance
  NativeAd? _ad;

  ...

  // TODO: Add _getDestinationItemIndex()
  int _getDestinationItemIndex(int rawIndex) {
    if (rawIndex >= _kAdIndex && _ad != null) {
      return rawIndex - 1;
    }
    return rawIndex;
  }

  ...
}
  1. initState() तरीके में, NativeAd बनाएं और लोड करें. यह ListTileNativeAdFactory का इस्तेमाल करके, नेटिव विज्ञापन व्यू जनरेट करता है.

ध्यान दें कि प्लगिन में फ़ैक्ट्री को रजिस्टर करने के लिए इस्तेमाल किया गया फ़ैक्ट्री आईडी (listTile) ही इस्तेमाल किया जाता है.

native_inline_page.dart

@override
void initState() {
  super.initState();

  // TODO: Create a NativeAd instance
  _ad = NativeAd(
    adUnitId: AdHelper.nativeAdUnitId,
    factoryId: 'listTile',
    request: AdRequest(),
    listener: NativeAdListener(
      onAdLoaded: (ad) {
        setState(() {
          _ad = ad as NativeAd;
        });
      },
      onAdFailedToLoad: (ad, error) {
        // Releases an ad resource when it fails to load
        ad.dispose();
        print('Ad load failed (code=${error.code} message=${error.message})');       },
    ),
  );

  _ad.load();
}
  1. build() मेथड में बदलाव करके, बैनर विज्ञापन उपलब्ध होने पर उसे दिखाएं.
  2. बैनर विज्ञापन की एंट्री को गिनने के लिए itemCount, को अपडेट करें. साथ ही, विज्ञापन लोड होने पर विज्ञापन इंडेक्स (_kAdIndex) में बैनर विज्ञापन रेंडर करने के लिए, itemBuilder, को अपडेट करें.
  3. कॉन्टेंट आइटम के लिए इंडेक्स वापस पाने के लिए, _getDestinationItemIndex() तरीके का इस्तेमाल करने के लिए कोड अपडेट करें.

native_inline_page.dart

@override
Widget build(BuildContext context) {
  return Scaffold(
    ...
    body: ListView.builder(
      // TODO: Adjust itemCount based on the ad load state
      itemCount: widget.entries.length + (_ad != null ? 1 : 0),
      itemBuilder: (context, index) {
        // TODO: Render a banner ad
        if (_ad != null && index == _kAdIndex) {
          return Container(
            height: 72.0,
            alignment: Alignment.center,
            child: AdWidget(ad: _ad!),
          );
        } else {
          // TODO: Get adjusted item index from _getDestinationItemIndex()
          final item = widget.entries[_getDestinationItemIndex(index)];

          return ListTile(
            ...
          );
        }
      },
    ),
  );
}
  1. NativeAd ऑब्जेक्ट से जुड़े संसाधन को रिलीज़ करें. इसके लिए, dispose() कॉलबैक फ़ंक्शन में NativeAd.dispose() वाले तरीके को कॉल करें.

native_inline_page.dart

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

  super.dispose();
}

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

f1671b0fa349ccf8.png 5ead873222c800eb.png

9. सब हो गया!

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