একটি Flutter অ্যাপে একটি AdMob ব্যানার এবং নেটিভ ইনলাইন বিজ্ঞাপন যোগ করা

১. ভূমিকা

এই কোডল্যাবে, আপনি একটি ফ্লাটার অ্যাপে একটি AdMob ব্যানার এবং একটি AdMob নেটিভ ইনলাইন বিজ্ঞাপন বাস্তবায়ন করবেন।

আপনি যা তৈরি করবেন

এই কোডল্যাবটি আপনাকে ফ্লাটারের জন্য গুগল মোবাইল অ্যাডস প্লাগইন ব্যবহার করে একটি ফ্লাটার অ্যাপে অ্যাডমব ইনলাইন ব্যানার এবং অ্যাডমব নেটিভ ইনলাইন বিজ্ঞাপন প্রয়োগ করার পদ্ধতি ধাপে ধাপে দেখাবে।

এই কোডল্যাবটি করার সময় যদি আপনার কোনো সমস্যা (কোড বাগ, ব্যাকরণগত ভুল, অস্পষ্ট শব্দচয়ন ইত্যাদি) হয়, তাহলে কোডল্যাবের নিচের বাম কোণে থাকা 'Report a mistake' লিঙ্কটি ব্যবহার করে সমস্যাটি জানান।

আপনি যা শিখবেন

• গুগল মোবাইল অ্যাডস ফ্লাটার প্লাগইন কীভাবে কনফিগার করবেন
• ফ্লাটার অ্যাপে কীভাবে ইনলাইন ব্যানার এবং রিওয়ার্ডেড অ্যাড প্রয়োগ করবেন

তোমার যা লাগবে

• অ্যান্ড্রয়েড স্টুডিও ৪.১ বা তার পরবর্তী সংস্করণ
• Xcode 12 বা তার পরবর্তী সংস্করণ (iOS ডেভেলপমেন্টের জন্য)

AdMob নিয়ে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?

শিক্ষানবিশ মধ্যবর্তী দক্ষ

ফ্লাটার নিয়ে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?

শিক্ষানবিশ মধ্যবর্তী দক্ষ

২. আপনার ফ্লাটার ডেভেলপমেন্ট পরিবেশ সেট আপ করুন।

এই ল্যাবটি সম্পন্ন করার জন্য আপনার দুটি সফটওয়্যার প্রয়োজন— ফ্লাটার এসডিকে এবং একটি এডিটর ।

আপনি এই ডিভাইসগুলোর যেকোনো একটি ব্যবহার করে কোডল্যাবটি চালাতে পারেন:

• আপনার কম্পিউটারের সাথে সংযুক্ত এবং ডেভেলপার মোডে সেট করা একটি ফিজিক্যাল অ্যান্ড্রয়েড বা আইওএস ডিভাইস।
• iOS সিমুলেটর (এর জন্য Xcode টুলস ইনস্টল করা প্রয়োজন)।
• অ্যান্ড্রয়েড এমুলেটর (অ্যান্ড্রয়েড স্টুডিওতে সেটআপ করা প্রয়োজন)।
• একটি ব্রাউজার (ডিবাগিংয়ের জন্য ক্রোম আবশ্যক)।
• একটি Windows , Linux , বা macOS ডেস্কটপ অ্যাপ্লিকেশন হিসেবে, আপনাকে অবশ্যই সেই প্ল্যাটফর্মে ডেভেলপ করতে হবে যেখানে আপনি এটি ডেপ্লয় করার পরিকল্পনা করছেন। সুতরাং, আপনি যদি একটি Windows ডেস্কটপ অ্যাপ ডেভেলপ করতে চান, তবে উপযুক্ত বিল্ড চেইন অ্যাক্সেস করার জন্য আপনাকে অবশ্যই Windows-এই ডেভেলপ করতে হবে। অপারেটিং সিস্টেম-ভিত্তিক কিছু নির্দিষ্ট আবশ্যকতা রয়েছে, যা docs.flutter.dev/desktop- এ বিস্তারিতভাবে আলোচনা করা হয়েছে।

কোডটি ডাউনলোড করুন

সোর্স কোড ডাউনলোড করুন গিটহাবে রিপোজিটরি দেখুন

জিপ ফাইলটি ডাউনলোড করার পর, এর ভেতরের ফাইলগুলো এক্সট্র্যাক্ট করুন। আপনি admob-inline-ads-in-flutter-main নামের একটি ফোল্ডার পাবেন।

বিকল্পভাবে, আপনি কমান্ড লাইন থেকে গিটহাব রিপোজিটরিটি ক্লোন করতে পারেন:

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

রিপোজিটরিটিতে তিনটি ফোল্ডার রয়েছে:

• স্টার্টার: এই কোডল্যাবে আপনি যে প্রাথমিক কোডটি তৈরি করবেন।
• সম্পূর্ণ: এই কোডল্যাবের জন্য কোড সম্পন্ন হয়েছে। (নেটিভ কোডের জন্য জাভা ও অবজেক্টিভ-সি)
• complete_kotlin_swift: এই কোডল্যাবের জন্য কোড সম্পূর্ণ হয়েছে। (নেটিভ কোডের জন্য কোটলিন ও সুইফট ব্যবহার করা হয়েছে)

৩. AdMob অ্যাপ এবং বিজ্ঞাপন ইউনিট সেট আপ করুন

ফ্লাটার একটি মাল্টি-প্ল্যাটফর্ম SDK হওয়ায়, AdMob-এ আপনাকে Android এবং iOS উভয়ের জন্যই একটি অ্যাপ ও অ্যাড ইউনিট যোগ করতে হবে।

দ্রষ্টব্য: আপনি যদি নিজে থেকে নতুন অ্যাপ্লিকেশন এবং অ্যাড ইউনিট তৈরি করার পরিবর্তে কোডল্যাবটি অনুসরণ করতে চান, তাহলে "Use the test AdMob app and ad units" বিভাগে যান।

অ্যান্ড্রয়েডের জন্য সেট আপ করুন

অ্যান্ড্রয়েডের জন্য সেট আপ করতে, আপনাকে একটি অ্যান্ড্রয়েড অ্যাপ যোগ করতে হবে এবং বিজ্ঞাপন ইউনিট তৈরি করতে হবে।

একটি অ্যান্ড্রয়েড অ্যাপ যোগ করুন

1. AdMob কনসোলে , অ্যাপস মেনু থেকে অ্যাড অ্যাপ (ADD APP)- এ ক্লিক করুন।
2. যখন আপনাকে জিজ্ঞাসা করা হবে , ‘আপনি কি আপনার অ্যাপটি গুগল প্লে বা অ্যাপ স্টোরে প্রকাশ করেছেন?’ , তখন ‘না’ ক্লিক করুন।
3. অ্যাপের নামের ফিল্ডে AdMob inline ads লিখুন এবং প্ল্যাটফর্ম হিসেবে Android নির্বাচন করুন।

4. এই কোডল্যাবটি সম্পন্ন করার জন্য ইউজার মেট্রিক্স চালু করা আবশ্যক নয়। তবে, আমরা আপনাকে এটি করার পরামর্শ দিই, কারণ এটি আপনাকে ব্যবহারকারীর আচরণ আরও বিস্তারিতভাবে বুঝতে সাহায্য করবে। প্রক্রিয়াটি সম্পন্ন করতে 'ADD'-এ ক্লিক করুন।

বিজ্ঞাপন ইউনিট তৈরি করুন

বিজ্ঞাপন ইউনিট যোগ করতে:

1. AdMob কনসোলের অ্যাপস মেনু থেকে AdMob ইনলাইন বিজ্ঞাপন অ্যাপটি নির্বাচন করুন।
2. বিজ্ঞাপন ইউনিট মেনুতে ক্লিক করুন।

ব্যানার

অ্যাড ইউনিট-এ ক্লিক করুন। ফরম্যাট হিসেবে ব্যানার নির্বাচন করুন। Ad unit name ফিল্ডে android-inline-banner লিখুন। প্রক্রিয়াটি সম্পন্ন করতে CREATE AD UNIT-এ ক্লিক করুন।

স্থানীয়

অ্যাড ইউনিট-এ ক্লিক করুন। ফরম্যাট হিসেবে নেটিভ অ্যাডভান্সড নির্বাচন করুন। Ad unit name ফিল্ডে android-inline-native লিখুন। প্রক্রিয়াটি সম্পন্ন করতে CREATE AD UNIT-এ ক্লিক করুন।

গুরুত্বপূর্ণ: আপনার অ্যাপ তৈরি এবং পরীক্ষা করার সময়, লাইভ বা প্রোডাকশন অ্যাডের পরিবর্তে টেস্ট অ্যাড ব্যবহার করুন । এটি করতে ব্যর্থ হলে আপনার অ্যাকাউন্ট সাসপেন্ড হতে পারে। মোবাইল অ্যাডস এসডিকে-এর টেস্ট অ্যাডগুলো কীভাবে কাজ করে সে সম্পর্কে আরও তথ্যের জন্য, টেস্ট অ্যাডস দেখুন।

একটি নতুন বিজ্ঞাপন ইউনিটের বিজ্ঞাপন দেখানো শুরু করতে সাধারণত কয়েক ঘণ্টা সময় লাগে।

আপনি যদি বিজ্ঞাপনটির আচরণ তাৎক্ষণিকভাবে পরীক্ষা করতে চান, তাহলে Android অ্যাপ আইডি/অ্যাড ইউনিট আইডি এবং iOS অ্যাপ আইডি/অ্যাড ইউনিট আইডি টেবিলে তালিকাভুক্ত টেস্ট অ্যাপ আইডি এবং অ্যাড ইউনিট আইডিগুলো ব্যবহার করুন।

iOS এর জন্য সেট আপ করুন

iOS-এর জন্য সেট আপ করতে, আপনাকে একটি iOS অ্যাপ যোগ করতে হবে এবং বিজ্ঞাপন ইউনিট তৈরি করতে হবে।

একটি iOS অ্যাপ যোগ করুন

1. AdMob কনসোলে , অ্যাপস মেনু থেকে অ্যাড অ্যাপ (ADD APP)- এ ক্লিক করুন।
2. যখন আপনাকে জিজ্ঞাসা করা হবে , ‘আপনি কি আপনার অ্যাপটি গুগল প্লে বা অ্যাপ স্টোরে প্রকাশ করেছেন?’ , তখন ‘না’ ক্লিক করুন।
3. অ্যাপের নামের ফিল্ডে AdMob inline ads লিখুন এবং প্ল্যাটফর্ম হিসেবে iOS নির্বাচন করুন।

4. এই কোডল্যাবটি সম্পন্ন করার জন্য ইউজার মেট্রিক্স চালু করা আবশ্যক নয়। তবে, আমরা আপনাকে এটি করার পরামর্শ দিই, কারণ এটি আপনাকে ব্যবহারকারীর আচরণ আরও বিস্তারিতভাবে বুঝতে সাহায্য করবে। প্রক্রিয়াটি সম্পন্ন করতে 'ADD'-এ ক্লিক করুন।

বিজ্ঞাপন ইউনিট তৈরি করুন

বিজ্ঞাপন ইউনিট যোগ করতে:

1. AdMob কনসোলের অ্যাপস মেনু থেকে AdMob ইনলাইন বিজ্ঞাপন অ্যাপটি নির্বাচন করুন।
2. বিজ্ঞাপন ইউনিট মেনুতে ক্লিক করুন।

ব্যানার

অ্যাড ইউনিট-এ ক্লিক করুন। ফরম্যাট হিসেবে ব্যানার নির্বাচন করুন। Ad unit name ফিল্ডে ios-inline-banner লিখুন। প্রক্রিয়াটি সম্পন্ন করতে CREATE AD UNIT-এ ক্লিক করুন।

স্থানীয়

অ্যাড ইউনিট-এ ক্লিক করুন। ফরম্যাট হিসেবে নেটিভ অ্যাডভান্সড নির্বাচন করুন। Ad unit name ফিল্ডে ios-inline-native লিখুন। প্রক্রিয়াটি সম্পন্ন করতে CREATE AD UNIT-এ ক্লিক করুন।

গুরুত্বপূর্ণ: আপনার অ্যাপ তৈরি এবং পরীক্ষা করার সময়, লাইভ বা প্রোডাকশন অ্যাডের পরিবর্তে টেস্ট অ্যাড ব্যবহার করুন । এটি করতে ব্যর্থ হলে আপনার অ্যাকাউন্ট সাসপেন্ড হতে পারে। মোবাইল অ্যাডস এসডিকে-এর টেস্ট অ্যাডগুলো কীভাবে কাজ করে সে সম্পর্কে আরও তথ্যের জন্য, টেস্ট অ্যাডস দেখুন।

একটি নতুন বিজ্ঞাপন ইউনিটের বিজ্ঞাপন দেখানো শুরু করতে সাধারণত কয়েক ঘণ্টা সময় লাগে।

আপনি যদি বিজ্ঞাপনটির আচরণ তাৎক্ষণিকভাবে পরীক্ষা করতে চান, তাহলে নিচের সারণিতে তালিকাভুক্ত টেস্ট অ্যাপ আইডি এবং অ্যাড ইউনিট আইডিগুলো ব্যবহার করুন।

ঐচ্ছিক: পরীক্ষামূলক AdMob অ্যাপ এবং বিজ্ঞাপন ইউনিটগুলো ব্যবহার করুন।

যদি আপনি নিজে থেকে নতুন অ্যাপ্লিকেশন এবং অ্যাড ইউনিট তৈরি করার পরিবর্তে কোডল্যাবটি অনুসরণ করতে চান, তাহলে আপনি নিম্নলিখিত সারণিগুলিতে তালিকাভুক্ত টেস্ট অ্যাডমব অ্যাপ আইডি এবং অ্যাড ইউনিট আইডিগুলি ব্যবহার করতে পারেন।

অ্যান্ড্রয়েড অ্যাপ আইডি/বিজ্ঞাপন ইউনিট আইডি

আইটেম	অ্যাপ আইডি/বিজ্ঞাপন ইউনিট আইডি
AdMob অ্যাপ আইডি	ca-app-pub-3940256099942544~3347511713
ব্যানার	ca-app-pub-3940256099942544/6300978111
স্থানীয়	ca-app-pub-3940256099942544/2247696110

iOS অ্যাপ আইডি/বিজ্ঞাপন ইউনিট আইডি

আইটেম	অ্যাপ আইডি/বিজ্ঞাপন ইউনিট আইডি
AdMob অ্যাপ আইডি	ca-app-pub-3940256099942544~1458002511
ব্যানার	ca-app-pub-3940256099942544/2934735716
স্থানীয়	ca-app-pub-3940256099942544/3986624511

টেস্ট অ্যাড সম্পর্কে আরও তথ্যের জন্য, অ্যান্ড্রয়েড টেস্ট অ্যাড এবং আইওএস টেস্ট অ্যাড ডেভেলপার ডকুমেন্টেশন দেখুন।

৪. গুগল মোবাইল অ্যাডস ফ্লাটার প্লাগইনটি যোগ করুন

ফ্লাটার বিভিন্ন প্ল্যাটফর্ম-নির্দিষ্ট পরিষেবা ব্যবহারের সুযোগ দিতে প্লাগইন ব্যবহার করে। প্লাগইনগুলো আপনাকে প্রতিটি প্ল্যাটফর্মের পরিষেবা এবং এপিআই (API) অ্যাক্সেস করতে সক্ষম করে।

google_mobile_ads প্লাগইনটি AdMob API ব্যবহার করে ব্যানার, ইন্টারস্টিশিয়াল, রিওয়ার্ডেড এবং নেটিভ বিজ্ঞাপন লোড ও প্রদর্শন করা সমর্থন করে।

যেহেতু ফ্লাটার একটি মাল্টি-প্ল্যাটফর্ম SDK, তাই google_mobile_ads প্লাগইনটি iOS এবং Android উভয়ের জন্যই প্রযোজ্য। সুতরাং, আপনি যদি আপনার ফ্লাটার অ্যাপে প্লাগইনটি যোগ করেন, তবে এটি 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 (অ্যান্ড্রয়েড) আপডেট করুন

1. অ্যান্ড্রয়েড স্টুডিওতে 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. অ্যান্ড্রয়েড স্টুডিওতে 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>
...

৫. বিজ্ঞাপনের জন্য একটি হেল্পার ক্লাস যোগ করুন

lib ডিরেক্টরির অধীনে ad_helper.dart নামে একটি নতুন ফাইল তৈরি করুন। এরপর, AdHelper ক্লাসটি ইমপ্লিমেন্ট করুন, যা অ্যান্ড্রয়েড এবং আইওএস-এর জন্য একটি 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");
  }
}

৬. গুগল মোবাইল অ্যাডস এসডিকে চালু করুন

বিজ্ঞাপন লোড করার আগে, আপনাকে গুগল মোবাইল অ্যাডস এসডিকে (SDK) ইনিশিয়ালাইজ করতে হবে। lib/home_page.dart ফাইলটি খুলুন এবং হোম পেজ লোড হওয়ার আগে এসডিকে ইনিশিয়ালাইজ করার জন্য _initGoogleMobileAds() ফাংশনটি পরিবর্তন করুন।

মনে রাখবেন, SDK ইনিশিয়ালাইজেশন সম্পন্ন হওয়ার পর তার ফলাফল পেতে হলে আপনাকে _initGoogleMobileAds() মেথডের রিটার্ন টাইপ Future<dynamic> থেকে Future<InitializationStatus> এ পরিবর্তন করতে হবে।

হোম_পেজ.ডার্ট

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

import 'package:flutter/material.dart';

...

class HomePage extends StatelessWidget {

  ...

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

৭. একটি ব্যানার বিজ্ঞাপন যোগ করুন

এই অংশে, আপনি তালিকার মাঝখানে একটি ব্যানার বিজ্ঞাপন প্রদর্শন করেন, যেমনটি নিচের স্ক্রিনশটে দেখানো হয়েছে।

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

3. _BannerInlinePageState ক্লাসে একটি ব্যানার বিজ্ঞাপনের জন্য নিম্নলিখিত মেম্বার এবং মেথডগুলো যোগ করুন।

উল্লেখ্য যে, _kAdIndex নির্দেশ করে সেই ইন্ডেক্স যেখানে একটি ব্যানার বিজ্ঞাপন প্রদর্শিত হবে, এবং এটি _getDestinationItemIndex() মেথড থেকে আইটেম ইন্ডেক্স গণনা করতে ব্যবহৃত হয়।

ব্যানার_ইনলাইন_পৃষ্ঠা.ডার্ট

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 তৈরি ও লোড করুন। উল্লেখ্য যে, অ্যাড লোড হলে UI ( setState() ) আপডেট করার জন্য একটি অ্যাড ইভেন্ট লিসেনার কনফিগার করা আছে।

ব্যানার_ইনলাইন_পৃষ্ঠা.ডার্ট

@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() মেথডটি ব্যবহার করতে কোডটি আপডেট করুন।

ব্যানার_ইনলাইন_পৃষ্ঠা.ডার্ট

@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 অবজেক্টের সাথে যুক্ত রিসোর্সটি মুক্ত করুন।

ব্যানার_ইনলাইন_পৃষ্ঠা.ডার্ট

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

  super.dispose();
}

ব্যাস! প্রজেক্টটি রান করুন এবং হোম পেজ থেকে ব্যানার ইনলাইন অ্যাড বাটনটিতে ক্লিক করুন। একটি বিজ্ঞাপন লোড হয়ে গেলে, আপনি তালিকার মাঝখানে একটি ব্যানার বিজ্ঞাপন দেখতে পাবেন।

৮. একটি নেটিভ বিজ্ঞাপন যোগ করুন

এই অংশে, আপনি তালিকার মাঝখানে একটি নেটিভ বিজ্ঞাপন প্রদর্শন করেন, যেমনটি নিচের স্ক্রিনশটে দেখানো হয়েছে।

নেটিভ বিজ্ঞাপনগুলি ব্যবহারকারীদের কাছে প্ল্যাটফর্মের নিজস্ব UI উপাদান ব্যবহার করে উপস্থাপন করা হয় (উদাহরণস্বরূপ, অ্যান্ড্রয়েডে View বা iOS-এ UIView )।

তবে, ফ্লাটার উইজেট ব্যবহার করে সরাসরি নেটিভ UI কম্পোনেন্ট তৈরি করা সম্ভব নয়। তাই, প্রতিটি প্ল্যাটফর্মের জন্য একটি NativeAdFactory ইমপ্লিমেন্ট করতে হয়, যা একটি নেটিভ অ্যাড অবজেক্ট (অ্যান্ড্রয়েডে NativeAdView এবং iOS-এ GADNativeAdView ) থেকে প্ল্যাটফর্ম-নির্দিষ্ট নেটিভ অ্যাড ভিউ (অ্যান্ড্রয়েডে NativeAd এবং iOS-এ GADNativeAd ) তৈরি করতে ব্যবহৃত হয়।

অ্যান্ড্রয়েডের জন্য NativeAdFactory বাস্তবায়ন করুন (জাভা)

দ্রষ্টব্য: আপনার প্রজেক্টে জাভার পরিবর্তে কোটলিন ব্যবহার করা হলে, নিচের ' ইমপ্লিমেন্ট নেটিভঅ্যাডফ্যাক্টরি ফর অ্যান্ড্রয়েড (কোটলিন)' সেকশনটিতে যান।

1. একটি অ্যান্ড্রয়েড প্রজেক্ট খোলার জন্য, android/build.gradle ফাইলটি (অথবা android ফোল্ডারের অধীনে থাকা যেকোনো ফাইল) খুলুন এবং Android Studio-তে 'Open for Editing'-এ ক্লিক করুন।

2. নতুন প্রজেক্ট খোলার জন্য যদি আপনাকে কোনো উইন্ডো বেছে নিতে বলা হয়, তাহলে ‘New Window’-তে ক্লিক করুন, যাতে অ্যান্ড্রয়েড প্রজেক্টে কাজ করার সময় ফ্লাটার প্রজেক্টটি খোলা থাকে।

একটি নেটিভ বিজ্ঞাপন লেআউট তৈরি করুন

1. অ্যান্ড্রয়েড প্রজেক্টটি খোলার পর, অ্যান্ড্রয়েড স্টুডিওর প্রজেক্ট প্যানে থেকে অ্যাপটির উপর রাইট-ক্লিক করুন এবং কনটেক্সট মেনু থেকে New > Android Resource File নির্বাচন করুন।

2. নতুন রিসোর্স ফাইল ডায়ালগ বক্সে, ফাইলের নাম হিসেবে list_tile_native_ad.xml লিখুন।
3. রিসোর্স টাইপ হিসেবে লেআউট নির্বাচন করুন এবং রুট এলিমেন্ট হিসেবে com.google.android.gms.ads.nativead.NativeAdView লিখুন।
4. নতুন লেআউট ফাইল তৈরি করতে OK-তে ক্লিক করুন।

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>

ListTileNativeAdFactory ক্লাসটি তৈরি করুন

1. প্রজেক্ট প্যানে, com.codelab.flutter.admobonlineads প্যাকেজটির উপর রাইট-ক্লিক করুন এবং New > Java Class নির্বাচন করুন।

2. নাম হিসেবে ListTileNativeAdFactory লিখুন এবং তালিকা থেকে Class নির্বাচন করুন।

3. নতুন ক্লাস ডায়ালগ বক্সটি এলে, সবকিছু খালি রেখে ওকে (OK) ক্লিক করুন।

আপনি দেখতে পাবেন যে com.codelab.flutter.admobinlineads প্যাকেজে ListTileNativeAdFactory ক্লাসটি তৈরি করা হয়েছে।

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

ListTileNativeAdFactory ক্লাসটি রেজিস্টার করুন

ফ্লাটার থেকে ব্যবহার করার আগে NativeAdFactory এর একটি ইনস্ট্যান্সকে 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");
    }
}

এখন আপনি অ্যান্ড্রয়েডে নেটিভ বিজ্ঞাপন রেন্ডার করতে ListTileNativeAdFactory ক্লাসটি ব্যবহার করার জন্য প্রস্তুত।

অ্যান্ড্রয়েডের জন্য NativeAdFactory বাস্তবায়ন করুন (কোটলিন)

1. একটি অ্যান্ড্রয়েড প্রজেক্ট খোলার জন্য, android/build.gradle ফাইলটি (অথবা android ফোল্ডারের অধীনে থাকা যেকোনো ফাইল) খুলুন এবং Android Studio-তে 'Open for Editing'-এ ক্লিক করুন।

2. নতুন প্রজেক্ট খোলার জন্য যদি আপনাকে কোনো উইন্ডো বেছে নিতে বলা হয়, তাহলে ‘New Window’-তে ক্লিক করুন, যাতে অ্যান্ড্রয়েড প্রজেক্টে কাজ করার সময় ফ্লাটার প্রজেক্টটি খোলা থাকে।

একটি নেটিভ বিজ্ঞাপন লেআউট তৈরি করুন

1. অ্যান্ড্রয়েড প্রজেক্টটি খোলার পর, অ্যান্ড্রয়েড স্টুডিওর প্রজেক্ট প্যানে থেকে অ্যাপটির উপর রাইট-ক্লিক করুন এবং কনটেক্সট মেনু থেকে New > Android Resource File নির্বাচন করুন।

2. নতুন রিসোর্স ফাইল ডায়ালগ বক্সে, ফাইলের নাম হিসেবে list_tile_native_ad.xml লিখুন।
3. রিসোর্স টাইপ হিসেবে লেআউট নির্বাচন করুন এবং রুট এলিমেন্ট হিসেবে com.google.android.gms.ads.nativead.NativeAdView লিখুন।
4. নতুন লেআউট ফাইল তৈরি করতে OK-তে ক্লিক করুন।

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>

ListTileNativeAdFactory ক্লাসটি তৈরি করুন

1. প্রজেক্ট প্যানে, com.codelab.flutter.admobonlineads প্যাকেজটির উপর রাইট-ক্লিক করুন এবং New > Kotlin File/Class নির্বাচন করুন।

2. নাম হিসেবে ListTileNativeAdFactory লিখুন এবং তালিকা থেকে Class নির্বাচন করুন।

3. আপনি দেখতে পাবেন যে com.codelab.flutter.admobinlineads প্যাকেজে ListTileNativeAdFactory ক্লাসটি তৈরি করা হয়েছে।
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
    }
}

ListTileNativeAdFactory ক্লাসটি রেজিস্টার করুন

ফ্লাটার থেকে ব্যবহার করার আগে NativeAdFactory এর একটি ইনস্ট্যান্সকে 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")
    }
}

এখন আপনি অ্যান্ড্রয়েডে নেটিভ বিজ্ঞাপন রেন্ডার করতে ListTileNativeAdFactory ক্লাসটি ব্যবহার করার জন্য প্রস্তুত।

iOS-এর জন্য NativeAdFactory বাস্তবায়ন করুন (অবজেক্টিভ-সি)

দ্রষ্টব্য: আপনার প্রজেক্টে Objective-C-এর পরিবর্তে Swift ব্যবহার করা হলে, নিচের Implement NativeAdFactory for iOS (Swift) সেকশনটিতে যান।

একটি iOS প্রজেক্ট খোলার জন্য, Xcode-এ ios/Podfile ফাইলটি (অথবা ios ফোল্ডারের অধীনে থাকা যেকোনো ফাইল) খুলুন এবং Open iOS module-এ ক্লিক করুন।

একটি নেটিভ বিজ্ঞাপন লেআউট প্রস্তুত করুন

নেটিভ অ্যাড অ্যাসেটগুলো বিন্যস্ত করার জন্য আপনার একটি কাস্টম ভিউ ( *.xib ) প্রয়োজন হবে। এই কোডল্যাবে, আপনার পরিশ্রম কমানোর জন্য পূর্ব-কনফিগার করা ভিউটি ব্যবহার করা হয়েছে।

দ্রষ্টব্য: নেটিভ বিজ্ঞাপনের জন্য কাস্টম ভিউ তৈরি করার বিষয়ে আরও বিস্তারিত জানতে ডেভেলপার ডকুমেন্টেশনের কোড উদাহরণ বিভাগটি দেখুন।

Xcode-এ iOS প্রজেক্টটি খুলে নিশ্চিত করুন যে Runner প্রজেক্টে ListTileNativeAdView.xib ফাইলটি বিদ্যমান আছে।

ListTileNativeAdFactory ক্লাসটি তৈরি করুন

1. প্রজেক্ট নেভিগেটর থেকে, রানার গ্রুপের উপর রাইট-ক্লিক করুন এবং নতুন ক্লাসের জন্য একটি হেডার ফাইল তৈরি করতে নিউ ফাইল (New File) নির্বাচন করুন।

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. Runner গ্রুপ থেকে New File নির্বাচন করে একটি Objective-C ফাইল তৈরি করুন।
2. পরবর্তী ডায়ালগ বক্সে, File ফিল্ডে ListTileNativeAdFactory লিখুন এবং ফাইলের ধরন হিসেবে Empty File নির্বাচন করুন।

3. Next-এ ক্লিক করার পর, নতুন ফাইলটি তৈরির জন্য একটি ফোল্ডার বেছে নিতে বলা হবে। সবকিছু অপরিবর্তিত রেখে Create-এ ক্লিক করুন।

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 এ রেজিস্টার করতে হবে।

AppDelegate.m ফাইলটি খুলুন এবং [FLTGoogleMobileAdsPlugin registerNativeAdFactory] মেথডটি কল করে একটি অনন্য স্ট্রিং আইডি ( listTile ) দিয়ে ListTileNativeAdFactory টি রেজিস্টার করুন।

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 প্রজেক্ট খোলার জন্য, Xcode-এ ios/Podfile ফাইলটি (অথবা ios ফোল্ডারের অধীনে থাকা যেকোনো ফাইল) খুলুন এবং Open iOS module-এ ক্লিক করুন।

একটি নেটিভ বিজ্ঞাপন লেআউট প্রস্তুত করুন

নেটিভ অ্যাড অ্যাসেটগুলো বিন্যস্ত করার জন্য আপনার একটি কাস্টম ভিউ ( *.xib ) প্রয়োজন হবে। এই কোডল্যাবে, আপনার পরিশ্রম কমানোর জন্য পূর্ব-কনফিগার করা ভিউটি ব্যবহার করা হয়েছে।

দ্রষ্টব্য: নেটিভ বিজ্ঞাপনের জন্য কাস্টম ভিউ তৈরি করার বিষয়ে আরও বিস্তারিত জানতে ডেভেলপার ডকুমেন্টেশনের কোড উদাহরণ বিভাগটি দেখুন।

Xcode-এ iOS প্রজেক্টটি খুলে নিশ্চিত করুন যে Runner প্রজেক্টে ListTileNativeAdView.xib ফাইলটি বিদ্যমান আছে।

ListTileNativeAdFactory ক্লাসটি তৈরি করুন

4. প্রজেক্ট নেভিগেটর থেকে, রানার গ্রুপের উপর রাইট-ক্লিক করুন এবং নতুন ক্লাসের জন্য একটি হেডার ফাইল তৈরি করতে নিউ ফাইল (New File) নির্বাচন করুন।

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 এ রেজিস্টার করতে হবে।

AppDelegate.m ফাইলটি খুলুন এবং FLTGoogleMobileAdsPlugin.registerNativeAdFactory() মেথডটি কল করে একটি অনন্য স্ট্রিং আইডি ( listTile ) দিয়ে ListTileNativeAdFactory টি রেজিস্টার করুন।

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 ব্যবহার করার জন্য প্রস্তুত।

ফ্লাটার উইজেটের সাথে নেটিভ বিজ্ঞাপন একীভূত করুন

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

ব্যাস! প্রজেক্টটি রান করুন এবং হোম পেজ থেকে নেটিভ ইনলাইন অ্যাড বাটনটিতে ক্লিক করুন। একটি বিজ্ঞাপন লোড হওয়ার পর, আপনি তালিকার মাঝখানে একটি নেটিভ বিজ্ঞাপন দেখতে পাবেন।

৯. সব হয়ে গেছে!

আপনি কোডল্যাবটি সম্পন্ন করেছেন। এই কোডল্যাবের সম্পূর্ণ কোডটি আপনি এখানে খুঁজে পাবেন। সম্পূর্ণ অথবা complete_kotlin_swift ফোল্ডার।