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

1. ভূমিকা

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

আপনি কি নির্মাণ করবেন

এই কোডল্যাব Flutter-এর জন্য Google মোবাইল বিজ্ঞাপন প্লাগইন ব্যবহার করে একটি Flutter অ্যাপে একটি AdMob ইনলাইন ব্যানার এবং AdMob নেটিভ ইনলাইন বিজ্ঞাপন বাস্তবায়নের মাধ্যমে আপনাকে গাইড করে।

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

আপনি কি শিখবেন

  • কিভাবে Google Mobile Ads Flutter প্লাগইন কনফিগার করবেন
  • একটি ফ্লাটার অ্যাপে কীভাবে একটি ইনলাইন ব্যানার এবং পুরস্কৃত বিজ্ঞাপনগুলি প্রয়োগ করবেন৷

আপনি কি প্রয়োজন হবে

  • অ্যান্ড্রয়েড স্টুডিও 4.1 বা তার পরে
  • Xcode 12 বা তার পরে (iOS বিকাশের জন্য)

AdMob-এর সাথে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে রেট করবেন?

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

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

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

2. আপনার ফ্লটার ডেভেলপমেন্ট এনভায়রনমেন্ট সেট আপ করুন

এই ল্যাবটি সম্পূর্ণ করার জন্য আপনার দুটি টুকরো সফ্টওয়্যার প্রয়োজন - ফ্লাটার SDK এবং একটি সম্পাদক ৷

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

  • আপনার কম্পিউটারের সাথে সংযুক্ত এবং বিকাশকারী মোডে সেট করা একটি শারীরিক Android বা iOS ডিভাইস৷
  • আইওএস সিমুলেটর (এক্সকোড সরঞ্জাম ইনস্টল করা প্রয়োজন)।
  • অ্যান্ড্রয়েড এমুলেটর (অ্যান্ড্রয়েড স্টুডিওতে সেটআপ প্রয়োজন)।
  • একটি ব্রাউজার (ডিবাগিংয়ের জন্য Chrome প্রয়োজন)।
  • একটি Windows , Linux , বা macOS ডেস্কটপ অ্যাপ্লিকেশন হিসাবে। আপনি যে প্ল্যাটফর্মে স্থাপন করার পরিকল্পনা করছেন সেখানে আপনাকে অবশ্যই বিকাশ করতে হবে। সুতরাং, আপনি যদি একটি উইন্ডোজ ডেস্কটপ অ্যাপ বিকাশ করতে চান, তাহলে যথাযথ বিল্ড চেইন অ্যাক্সেস করতে আপনাকে অবশ্যই উইন্ডোজে বিকাশ করতে হবে। অপারেটিং সিস্টেম-নির্দিষ্ট প্রয়োজনীয়তা রয়েছে যা 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 starter: স্টার্টিং কোড যা আপনি এই কোডল্যাবে তৈরি করবেন।
  • android_studio_folder.png সম্পূর্ণ: এই কোডল্যাবের জন্য সম্পূর্ণ কোড। (নেটিভ কোডের জন্য জাভা এবং অবজেক্টিভ-সি)
  • android_studio_folder.png complete_kotlin_swift: এই কোডল্যাবের জন্য সম্পূর্ণ কোড। (নেটিভ কোডের জন্য কোটলিন এবং সুইফট)

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

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

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

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

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

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

d51828db0e2e4f6c.png

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

b918bf44362813a9.png

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

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

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

ব্যানার

  1. অ্যাড ইউনিটে ক্লিক করুন।
  2. বিন্যাস হিসাবে ব্যানার নির্বাচন করুন।
  3. বিজ্ঞাপন ইউনিট নামের ক্ষেত্রে android-inline-banner লিখুন।
  4. প্রক্রিয়াটি সম্পূর্ণ করতে বিজ্ঞাপন ইউনিট তৈরি করুন ক্লিক করুন।

নেটিভ

  1. অ্যাড ইউনিটে ক্লিক করুন।
  2. বিন্যাস হিসাবে নেটিভ অ্যাডভান্সড নির্বাচন করুন।
  3. বিজ্ঞাপন ইউনিট নামের ক্ষেত্রে android-inline-native লিখুন।
  4. প্রক্রিয়াটি সম্পূর্ণ করতে বিজ্ঞাপন ইউনিট তৈরি করুন ক্লিক করুন।

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

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

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

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

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

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

a4c963c9aa09519.png

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

b918bf44362813a9.png

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

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

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

ব্যানার

  1. অ্যাড ইউনিটে ক্লিক করুন।
  2. বিন্যাস হিসাবে ব্যানার নির্বাচন করুন।
  3. বিজ্ঞাপন ইউনিট নামের ক্ষেত্রে ios-inline-banner লিখুন।
  4. প্রক্রিয়াটি সম্পূর্ণ করতে বিজ্ঞাপন ইউনিট তৈরি করুন ক্লিক করুন।

নেটিভ

  1. অ্যাড ইউনিটে ক্লিক করুন।
  2. বিন্যাস হিসাবে নেটিভ অ্যাডভান্সড নির্বাচন করুন।
  3. বিজ্ঞাপন ইউনিট নামের ক্ষেত্রে ios-inline-native লিখুন।
  4. প্রক্রিয়াটি সম্পূর্ণ করতে বিজ্ঞাপন ইউনিট তৈরি করুন ক্লিক করুন।

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

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

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

আপনি নিজে থেকে একটি নতুন অ্যাপ্লিকেশন এবং বিজ্ঞাপন ইউনিট তৈরি করার পরিবর্তে কোডল্যাব অনুসরণ করতে চাইলে, আপনি নিম্নলিখিত টেবিলে তালিকাভুক্ত 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

পরীক্ষার বিজ্ঞাপনগুলি সম্পর্কে আরও তথ্যের জন্য, Android পরীক্ষার বিজ্ঞাপন এবং iOS পরীক্ষার বিজ্ঞাপন বিকাশকারী ডকুমেন্টেশন দেখুন৷

4. Google মোবাইল বিজ্ঞাপন ফ্লাটার প্লাগইন যোগ করুন

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

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

যেহেতু Flutter একটি মাল্টি-প্ল্যাটফর্ম SDK, google_mobile_ads প্লাগইন iOS এবং Android উভয়ের জন্যই প্রযোজ্য। সুতরাং, আপনি যদি আপনার Flutter অ্যাপে প্লাগইন যোগ করেন, তাহলে এটি AdMob ইনলাইন বিজ্ঞাপন অ্যাপের Android এবং iOS উভয় সংস্করণেই ব্যবহার করা হবে।

নির্ভরতা হিসাবে Google মোবাইল বিজ্ঞাপন প্লাগইন যোগ করুন

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/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>
...

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 মোবাইল বিজ্ঞাপন SDK শুরু করুন৷

বিজ্ঞাপন লোড করার আগে, আপনাকে Google মোবাইল বিজ্ঞাপন 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. একটি ব্যানার বিজ্ঞাপন যোগ করুন

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

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 ব্যানারের জন্য একটি BannerAd তৈরি করুন এবং লোড করুন ( AdSize.banner )। মনে রাখবেন যে একটি বিজ্ঞাপন ইভেন্ট শ্রোতা যখন একটি বিজ্ঞাপন লোড হয় তখন UI ( 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, একটি ব্যানার বিজ্ঞাপন এন্ট্রি গণনা করতে, এবং itemBuilder, বিজ্ঞাপনটি লোড হওয়ার সময় বিজ্ঞাপন সূচকে একটি ব্যানার বিজ্ঞাপন রেন্ডার করুন ( _kAdIndex )৷
  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.pngc32af50872514224.png

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

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

f1671b0fa349ccf8.png

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

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

Android (জাভা) এর জন্য NativeAdFactory প্রয়োগ করুন

  1. android/build.gradle ফাইলটি খুলুন (অথবা অ্যান্ড্রয়েড ফোল্ডারের অধীনে যেকোন ফাইল), এবং একটি অ্যান্ড্রয়েড প্রকল্প খুলতে অ্যান্ড্রয়েড স্টুডিওতে সম্পাদনার জন্য খুলুন ক্লিক করুন।

623ad3d2282ccbf8.png

  1. যদি আপনাকে একটি নতুন প্রকল্প খোলার জন্য একটি উইন্ডো নির্বাচন করতে বলা হয়, আপনি যখন Android প্রকল্পে কাজ করছেন তখন ফ্লাটার প্রকল্পটি খোলা রাখতে নতুন উইন্ডোতে ক্লিক করুন৷

d188bb51cf7c2d08.png

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

  1. অ্যান্ড্রয়েড প্রোজেক্ট খোলার সাথে, অ্যান্ড্রয়েড স্টুডিওতে প্রোজেক্ট ফলক থেকে অ্যাপটিতে ডান-ক্লিক করুন এবং প্রসঙ্গ মেনু থেকে নতুন > অ্যান্ড্রয়েড রিসোর্স ফাইল নির্বাচন করুন।

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. নতুন ক্লাস ডায়ালগ প্রদর্শিত হওয়ার পরে, সবকিছু খালি ছেড়ে দিন এবং ঠিক আছে ক্লিক করুন।

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

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 এ রেজিস্টার করা উচিত আগে এটি ফ্লটার সাইড থেকে ব্যবহার করা যেতে পারে।

  1. MainActivity.java ফাইলটি খুলুন এবং configureFlutterEngine() পদ্ধতি এবং cleanUpFlutterEngine() পদ্ধতিটি ওভাররাইড করুন।
  2. configureFlutterEngine() পদ্ধতিতে একটি অনন্য স্ট্রিং আইডি ( listTile ) সহ ListTileNativeAdFactory ক্লাস নিবন্ধন করুন।

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 ফাইলটি খুলুন (অথবা অ্যান্ড্রয়েড ফোল্ডারের অধীনে যেকোন ফাইল), এবং একটি অ্যান্ড্রয়েড প্রকল্প খুলতে অ্যান্ড্রয়েড স্টুডিওতে সম্পাদনার জন্য খুলুন ক্লিক করুন।

623ad3d2282ccbf8.png

  1. যদি আপনাকে একটি নতুন প্রকল্প খোলার জন্য একটি উইন্ডো নির্বাচন করতে বলা হয়, আপনি যখন Android প্রকল্পে কাজ করছেন তখন ফ্লাটার প্রকল্পটি খোলা রাখতে নতুন উইন্ডোতে ক্লিক করুন৷

d188bb51cf7c2d08.png

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

  1. অ্যান্ড্রয়েড প্রোজেক্ট খোলার সাথে, অ্যান্ড্রয়েড স্টুডিওতে প্রোজেক্ট ফলক থেকে অ্যাপটিতে ডান-ক্লিক করুন এবং প্রসঙ্গ মেনু থেকে নতুন > অ্যান্ড্রয়েড রিসোর্স ফাইল নির্বাচন করুন।

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. আপনি দেখতে পাবেন যে ListTileNativeAdFactory ক্লাসটি com.codelab.flutter.admobinlineads প্যাকেজে তৈরি করা হয়েছে।
  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 এ রেজিস্টার করা উচিত আগে এটি ফ্লটার সাইড থেকে ব্যবহার করা যেতে পারে।

  1. MainActivity.kt ফাইলটি খুলুন এবং configureFlutterEngine() পদ্ধতি এবং cleanUpFlutterEngine() পদ্ধতিটি ওভাররাইড করুন।
  2. configureFlutterEngine() পদ্ধতিতে একটি অনন্য স্ট্রিং আইডি ( listTile ) সহ ListTileNativeAdFactory ক্লাস নিবন্ধন করুন।

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 এর জন্য NativeAdFactory প্রয়োগ করুন (উদ্দেশ্য-সি)

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

62aa12c10e6d671f.png

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

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

Xcode-এ খোলা iOS প্রকল্পের সাথে, নিশ্চিত করুন যে ListTileNativeAdView.xib রানার প্রকল্পে বিদ্যমান।

a5f04a32f1868d4f.png

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

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

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. রানার গ্রুপ থেকে নতুন ফাইল নির্বাচন করে একটি উদ্দেশ্য-সি ফাইল তৈরি করুন।
  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 এর বাস্তবায়ন FLTGoogleMobileAdsPlugin এ নিবন্ধিত হওয়া উচিত আগে এটি Flutter দিক থেকে ব্যবহার করা যেতে পারে।

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

62aa12c10e6d671f.png

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

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

Xcode-এ খোলা iOS প্রকল্পের সাথে, নিশ্চিত করুন যে ListTileNativeAdView.xib রানার প্রকল্পে বিদ্যমান।

a5f04a32f1868d4f.png

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

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

9115c92543345ef1.png

  1. টেমপ্লেট ডায়ালগে, সুইফ্ট ফাইলটি নির্বাচন করুন এবং এটির নাম দিন 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 এর বাস্তবায়ন FLTGoogleMobileAdsPlugin এ নিবন্ধিত হওয়া উচিত আগে এটি Flutter দিক থেকে ব্যবহার করা যেতে পারে।

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 ব্যবহার করতে প্রস্তুত৷

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

  1. lib/native_inline_page.dart ফাইল খুলুন। তারপর, নিম্নলিখিত লাইন যোগ করে 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 NativeInlinePage extends StatefulWidget {
  ...
}
  1. _NativeInlinePageState ক্লাসে, একটি নেটিভ বিজ্ঞাপনের জন্য নিম্নলিখিত সদস্য এবং পদ্ধতি যোগ করুন।

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

নেটিভ_ইনলাইন_পেজ.ডার্ট

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 ) ব্যবহার করা হয়।

নেটিভ_ইনলাইন_পেজ.ডার্ট

@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, একটি ব্যানার বিজ্ঞাপন এন্ট্রি গণনা করতে, এবং itemBuilder, বিজ্ঞাপনটি লোড হলে বিজ্ঞাপন সূচকে একটি ব্যানার বিজ্ঞাপন রেন্ডার করুন ( _kAdIndex )৷
  3. কন্টেন্ট আইটেমের জন্য একটি সূচক পুনরুদ্ধার করতে _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(
            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. dispose() কলব্যাক পদ্ধতিতে NativeAd.dispose() পদ্ধতিতে কল করে NativeAd অবজেক্টের সাথে যুক্ত সংস্থানটি ছেড়ে দিন।

নেটিভ_ইনলাইন_পেজ.ডার্ট

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

  super.dispose();
}

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

f1671b0fa349ccf8.png5ead873222c800eb.png

9. সব সম্পন্ন!

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