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

1. परिचय

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

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

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

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

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

• Google Mobile Ads Flutter प्लगिन को कॉन्फ़िगर करने का तरीका
• 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 पर जानकारी दी गई है.

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

सोर्स कोड डाउनलोड करें GitHub पर डेटा स्टोर करने की जगह देखें

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

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

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

डेटा स्टोर करने की जगह में तीन फ़ोल्डर होते हैं:

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

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

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

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

Android के लिए सेट अप करें

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

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

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

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

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

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

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

बैनर

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

नेटिव

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

ज़रूरी जानकारी: अपने ऐप्लिकेशन बनाते और उनकी जांच करते समय पक्का करें कि आप लाइव, प्रोडक्शन विज्ञापनों के बजाय टेस्ट विज्ञापनों का इस्तेमाल करें. ऐसा न करने पर, आपका खाता निलंबित किया जा सकता है. Mobile Ads SDK के टेस्ट विज्ञापन कैसे काम करते हैं, इस बारे में ज़्यादा जानने के लिए टेस्ट विज्ञापन देखें.

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

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

iOS के लिए सेट अप करें

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

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

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

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

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

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

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

बैनर

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

नेटिव

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

ज़रूरी जानकारी: अपने ऐप्लिकेशन बनाते और उनकी जांच करते समय पक्का करें कि आप लाइव, प्रोडक्शन विज्ञापनों के बजाय टेस्ट विज्ञापनों का इस्तेमाल करें. ऐसा न करने पर, आपका खाता निलंबित किया जा सकता है. Mobile Ads SDK के टेस्ट विज्ञापन कैसे काम करते हैं, इस बारे में ज़्यादा जानने के लिए टेस्ट विज्ञापन देखें.

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

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

ज़रूरी नहीं: 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 मोबाइल विज्ञापन 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 पर क्लिक करें.

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

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

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. बैनर विज्ञापन जोड़ें

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

1. lib/banner_inline_page.dart फ़ाइल खोलें.
2. ad_helper.dart और google_mobile_ads.dart को इंपोर्ट करने के लिए, ये लाइनें जोड़ें:

banner_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 BannerInlinePage extends StatefulWidget {
  ...
}

3. _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;
  }

  ...
}

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

5. बैनर विज्ञापन उपलब्ध होने पर, उसे दिखाने के लिए build() तरीके में बदलाव करें.
6. बैनर विज्ञापन एंट्री की गिनती करने के लिए itemCount, को अपडेट करें. साथ ही, विज्ञापन लोड होने पर विज्ञापन इंडेक्स (_kAdIndex) पर बैनर विज्ञापन रेंडर करने के लिए, itemBuilder, को अपडेट करें.
7. कॉन्टेंट आइटम का इंडेक्स पाने के लिए, _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(
            ...
          );
        }
      },
    ),
  );
}

8. dispose() कॉलबैक वाले तरीके में BannerAd.dispose() तरीके को कॉल करके, BannerAd ऑब्जेक्ट से जुड़े संसाधन को रिलीज़ करें.

banner_inline_page.dart

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

  super.dispose();
}

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

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

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

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

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

Android (Java) के लिए NativeAdफ़ैक्ट्री लागू करें

ध्यान दें: अगर आपके प्रोजेक्ट में Java के बजाय Kotlin का इस्तेमाल किया जाता है, तो नीचे दिए गए Android के लिए NativeAdFamily लागू करें (Kotlin) सेक्शन पर जाएं.

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

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

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

1. Android प्रोजेक्ट खोलने के बाद, Android Studio के प्रोजेक्ट पैनल से ऐप्लिकेशन पर राइट क्लिक करें. इसके बाद, नया > Android संसाधन फ़ाइल का इस्तेमाल करें.

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

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

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>

ListTileNativeAdFamily क्लास बनाना

1. प्रोजेक्ट पैनल में, com.codelab.flutter.admobinlineads पैकेज पर राइट क्लिक करें और नया > Java क्लास.

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

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

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

4. 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;
    }
}

ListTileNativeAdFlag क्लास को रजिस्टर करें

NativeAdFactory के एक इंस्टेंस को Flutter साइड से इस्तेमाल करने से पहले GoogleMobileAdsPlugin पर रजिस्टर करना ज़रूरी है.

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

    ...
}

3. क्लीनअप की प्रोसेस के दौरान, हर 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 के लिए NativeAd हमें लागू करना (Kotlin)

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

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

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

1. Android प्रोजेक्ट खोलने के बाद, Android Studio के प्रोजेक्ट पैनल से ऐप्लिकेशन पर राइट क्लिक करें. इसके बाद, नया > Android संसाधन फ़ाइल का इस्तेमाल करें.

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

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

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>

ListTileNativeAdFamily क्लास बनाना

1. प्रोजेक्ट पैनल में, com.codelab.flutter.admobinlineads पैकेज पर राइट क्लिक करें और नया > Kotlin फ़ाइल/क्लास.

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

3. आपको दिखेगा कि ListTileNativeAdFactory क्लास com.codelab.flutter.admobinlineads पैकेज में बनाई गई है.
4. 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
    }
}

ListTileNativeAdFlag क्लास को रजिस्टर करें

NativeAdFactory के एक इंस्टेंस को Flutter साइड से इस्तेमाल करने से पहले GoogleMobileAdsPlugin पर रजिस्टर करना ज़रूरी है.

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))
    }

    ...
}

3. क्लीनअप की प्रोसेस के दौरान, हर 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) के लिए NativeAd हमें लागू करना

ध्यान दें: अगर आपके प्रोजेक्ट में Objective-C के बजाय Swift का इस्तेमाल किया गया है, तो नीचे दिए गए iOS (Swift) के लिए NativeAdFamily लागू करें सेक्शन पर जाएं.

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

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

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

ध्यान दें: नेटिव विज्ञापनों के लिए कस्टम व्यू बनाने के बारे में ज़्यादा जानकारी के लिए, डेवलपर दस्तावेज़ में कोड का उदाहरण सेक्शन देखें.

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

ListTileNativeAdFamily क्लास बनाना

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

2. टेंप्लेट डायलॉग में, हेडर फ़ाइल चुनें और उसे ListTileNativeAdFactory नाम दें.
3. 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. रनर ग्रुप से नई फ़ाइल चुनकर, Objective-C फ़ाइल बनाएं.
2. अगले डायलॉग बॉक्स में, फ़ाइल फ़ील्ड में ListTileNativeAdFactory डालें और फ़ाइल टाइप के तौर पर खाली फ़ाइल चुनें.

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

4. 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 को लागू करने के तरीके को FLTGoogleMobileAdsPlugin पर रजिस्टर करना ज़रूरी है. इसके बाद ही, Flutter साइड से इस्तेमाल किया जा सकता है.

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) के लिए NativeAdफ़ैक्ट्री लागू करें

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

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

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

ध्यान दें: नेटिव विज्ञापनों के लिए कस्टम व्यू बनाने के बारे में ज़्यादा जानकारी के लिए, डेवलपर दस्तावेज़ में कोड का उदाहरण सेक्शन देखें.

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

ListTileNativeAdFamily क्लास बनाना

4. प्रोजेक्ट नेविगेटर में जाकर, रनर ग्रुप पर राइट क्लिक करें और नई क्लास की हेडर फ़ाइल बनाने के लिए, नई फ़ाइल चुनें.

5. टेंप्लेट डायलॉग में, Swift File चुनें और इसे ListTileNativeAdFactory नाम दें.
6. 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 को लागू करने के तरीके को FLTGoogleMobileAdsPlugin पर रजिस्टर करना ज़रूरी है. इसके बाद ही, Flutter साइड से इस्तेमाल किया जा सकता है.

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 {
  ...
}

2. _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;
  }

  ...
}

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

ध्यान दें कि प्लगिन में फ़ैक्ट्री को रजिस्टर करने के लिए इस्तेमाल किए गए फ़ैक्ट्री आईडी (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();
}

4. बैनर विज्ञापन उपलब्ध होने पर, उसे दिखाने के लिए build() तरीके में बदलाव करें.
5. बैनर विज्ञापन एंट्री की गिनती करने के लिए itemCount, को अपडेट करें. साथ ही, विज्ञापन लोड होने पर विज्ञापन इंडेक्स (_kAdIndex) पर बैनर विज्ञापन रेंडर करने के लिए, itemBuilder, को अपडेट करें.
6. कॉन्टेंट आइटम का इंडेक्स पाने के लिए, _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(
            ...
          );
        }
      },
    ),
  );
}

7. dispose() कॉलबैक वाले तरीके में NativeAd.dispose() तरीके को कॉल करके, NativeAd ऑब्जेक्ट से जुड़े संसाधन को रिलीज़ करें.

native_inline_page.dart

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

  super.dispose();
}

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

9. सब हो गया!

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