১. ভূমিকা
আপনি যা তৈরি করবেন
এই কোডল্যাবটি আপনাকে 'Awesome Drawing Quiz' নামক একটি অ্যাপে ব্যানার, ইন্টারস্টিশিয়াল এবং রিওয়ার্ডেড অ্যাড যোগ করার পদ্ধতি দেখাবে। এই গেমটিতে খেলোয়াড়দেরকে আঁকা ছবিটির নাম অনুমান করতে হয়।
|
|
এই কোডল্যাবটি করার সময় যদি আপনি কোনো সমস্যার (কোড বাগ, ব্যাকরণগত ভুল, অস্পষ্ট শব্দচয়ন) সম্মুখীন হন, তাহলে অনুগ্রহ করে কোডল্যাবের নিচের বাম কোণে থাকা 'Report a mistake ' লিঙ্কে ক্লিক করে সমস্যাটি জানান।
আপনি যা শিখবেন
- গুগল মোবাইল অ্যাডস অ্যাডমব প্লাগইনটি কীভাবে কনফিগার করবেন
- ফ্লাটার অ্যাপে ব্যানার, ইন্টারস্টিশিয়াল এবং রিওয়ার্ডেড বিজ্ঞাপন কীভাবে প্রয়োগ করবেন
আপনার যা যা লাগবে
- অ্যান্ড্রয়েড স্টুডিও ৪.১ বা তার পরবর্তী সংস্করণ
- Xcode 12 বা তার পরবর্তী সংস্করণ (iOS ডেভেলপমেন্টের জন্য)
AdMob নিয়ে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?
ফ্লাটার নিয়ে আপনার অভিজ্ঞতার স্তরকে আপনি কীভাবে মূল্যায়ন করবেন?
২. আপনার ফ্লাটার ডেভেলপমেন্ট পরিবেশ সেট আপ করুন।
এই ল্যাবটি সম্পন্ন করার জন্য আপনার দুটি সফটওয়্যার প্রয়োজন— ফ্লাটার এসডিকে এবং একটি এডিটর ।
আপনি এই ডিভাইসগুলোর যেকোনো একটি ব্যবহার করে কোডল্যাবটি চালাতে পারেন:
- আপনার কম্পিউটারের সাথে সংযুক্ত এবং ডেভেলপার মোডে সেট করা একটি ফিজিক্যাল অ্যান্ড্রয়েড বা আইওএস ডিভাইস।
- iOS সিমুলেটর (এর জন্য Xcode টুলস ইনস্টল করা প্রয়োজন)।
- অ্যান্ড্রয়েড এমুলেটর (অ্যান্ড্রয়েড স্টুডিওতে সেটআপ করা প্রয়োজন)।
- একটি ব্রাউজার (ডিবাগিংয়ের জন্য ক্রোম আবশ্যক)।
- একটি Windows , Linux , বা macOS ডেস্কটপ অ্যাপ্লিকেশন হিসেবে, আপনাকে অবশ্যই সেই প্ল্যাটফর্মে ডেভেলপ করতে হবে যেখানে আপনি এটি ডেপ্লয় করার পরিকল্পনা করছেন। সুতরাং, আপনি যদি একটি Windows ডেস্কটপ অ্যাপ ডেভেলপ করতে চান, তবে উপযুক্ত বিল্ড চেইন অ্যাক্সেস করার জন্য আপনাকে অবশ্যই Windows-এই ডেভেলপ করতে হবে। অপারেটিং সিস্টেম-ভিত্তিক কিছু নির্দিষ্ট আবশ্যকতা রয়েছে, যা docs.flutter.dev/desktop- এ বিস্তারিতভাবে আলোচনা করা হয়েছে।
কোডটি ডাউনলোড করুন
জিপ ফাইলটি ডাউনলোড করার পর, এর ভেতরের ফাইলগুলো এক্সট্র্যাক্ট করুন। আপনি admob-ads-in-flutter-master নামের একটি ফোল্ডার পাবেন।
বিকল্পভাবে, আপনি কমান্ড লাইন থেকে গিটহাব রিপোজিটরিটি ক্লোন করতে পারেন:
$ git clone https://github.com/googlecodelabs/admob-ads-in-flutter
রিপোজিটরিটিতে দুটি ফোল্ডার রয়েছে:
স্টার্টার — এই কোডল্যাবে আপনি যে প্রাথমিক কোডটি তৈরি করবেন। - সম্পূর্ণ — এই কোডল্যাবের কোড লেখা শেষ হয়েছে।
৩. AdMob অ্যাপ এবং বিজ্ঞাপন ইউনিটগুলো সেট আপ করুন।
ফ্লাটার একটি মাল্টি-প্ল্যাটফর্ম SDK হওয়ায়, AdMob-এ আপনাকে Android এবং iOS উভয়ের জন্যই একটি অ্যাপ ও অ্যাড ইউনিট যোগ করতে হবে।
অ্যান্ড্রয়েডের জন্য সেট আপ করুন
অ্যান্ড্রয়েডের জন্য সেট আপ করতে, আপনাকে একটি অ্যান্ড্রয়েড অ্যাপ যোগ করতে হবে এবং বিজ্ঞাপন ইউনিট তৈরি করতে হবে।
একটি অ্যান্ড্রয়েড অ্যাপ যোগ করুন
- AdMob কনসোলে , অ্যাপস মেনু থেকে অ্যাড অ্যাপ (ADD APP)- এ ক্লিক করুন।
- যখন আপনাকে জিজ্ঞাসা করা হবে , ‘আপনি কি আপনার অ্যাপটি গুগল প্লে বা অ্যাপ স্টোরে প্রকাশ করেছেন?’ , তখন ‘না’ ক্লিক করুন।
- অ্যাপের নামের ফিল্ডে
Awesome Drawing Quizলিখুন এবং প্ল্যাটফর্ম হিসেবে Android নির্বাচন করুন।
- এই কোডল্যাবটি সম্পন্ন করার জন্য ইউজার মেট্রিক্স চালু করা আবশ্যক নয়। তবে, আমরা আপনাকে এটি করার পরামর্শ দিই, কারণ এটি আপনাকে ব্যবহারকারীর আচরণ আরও বিস্তারিতভাবে বুঝতে সাহায্য করবে। প্রক্রিয়াটি সম্পন্ন করতে 'ADD'-এ ক্লিক করুন।
বিজ্ঞাপন ইউনিট তৈরি করুন
AdMob-এ বিজ্ঞাপন ইউনিট যোগ করা শুরু করতে:
- AdMob কনসোলের অ্যাপস মেনু থেকে Awesome Drawing Quiz নির্বাচন করুন।
- বিজ্ঞাপন ইউনিট মেনুতে ক্লিক করুন।
ব্যানার
|
|
ইন্টারস্টিশিয়াল
|
|
পুরস্কৃত
|
|
একটি নতুন বিজ্ঞাপন ইউনিটের বিজ্ঞাপন দেখানো শুরু করতে সাধারণত কয়েক ঘণ্টা সময় লাগে।
আপনি যদি বিজ্ঞাপনটির আচরণ তাৎক্ষণিকভাবে পরীক্ষা করতে চান, তাহলে Android অ্যাপ আইডি/অ্যাড ইউনিট আইডি এবং iOS অ্যাপ আইডি/অ্যাড ইউনিট আইডি টেবিলে তালিকাভুক্ত টেস্ট অ্যাপ আইডি এবং অ্যাড ইউনিট আইডিগুলো ব্যবহার করুন।
iOS এর জন্য সেট আপ করুন
iOS-এর জন্য সেট আপ করতে, আপনাকে একটি iOS অ্যাপ যোগ করতে হবে এবং বিজ্ঞাপন ইউনিট তৈরি করতে হবে।
একটি iOS অ্যাপ যোগ করুন
- AdMob কনসোলে , অ্যাপস মেনু থেকে অ্যাড অ্যাপ (ADD APP)- এ ক্লিক করুন।
- যখন আপনাকে জিজ্ঞাসা করা হবে , ‘আপনি কি আপনার অ্যাপটি গুগল প্লে বা অ্যাপ স্টোরে প্রকাশ করেছেন?’ , তখন ‘না’ ক্লিক করুন।
- অ্যাপের নামের ফিল্ডে
Awesome Drawing Quizলিখুন এবং প্ল্যাটফর্ম হিসেবে iOS নির্বাচন করুন।
- এই কোডল্যাবটি সম্পন্ন করার জন্য ইউজার মেট্রিক্স চালু করা আবশ্যক নয়। তবে, আমরা আপনাকে এটি করার পরামর্শ দিই, কারণ এটি আপনাকে ব্যবহারকারীর আচরণ আরও বিস্তারিতভাবে বুঝতে সাহায্য করবে। প্রক্রিয়াটি সম্পন্ন করতে 'ADD'-এ ক্লিক করুন।
বিজ্ঞাপন ইউনিট তৈরি করুন
বিজ্ঞাপন ইউনিট যোগ করতে:
- AdMob কনসোলের অ্যাপস মেনু থেকে Awesome Drawing Quiz অ্যাপটি নির্বাচন করুন।
- বিজ্ঞাপন ইউনিট মেনুতে ক্লিক করুন।
ব্যানার
|
|
ইন্টারস্টিশিয়াল
|
|
পুরস্কৃত
|
|
একটি নতুন বিজ্ঞাপন ইউনিটের বিজ্ঞাপন দেখানো শুরু করতে সাধারণত কয়েক ঘণ্টা সময় লাগে।
আপনি যদি বিজ্ঞাপনটির আচরণ তাৎক্ষণিকভাবে পরীক্ষা করতে চান, তাহলে নিচের সারণিতে তালিকাভুক্ত টেস্ট অ্যাপ আইডি এবং অ্যাড ইউনিট আইডিগুলো ব্যবহার করুন।
ঐচ্ছিক: পরীক্ষামূলক AdMob অ্যাপ এবং বিজ্ঞাপন ইউনিটগুলো ব্যবহার করুন।
যদি আপনি নিজে থেকে নতুন অ্যাপ্লিকেশন এবং অ্যাড ইউনিট তৈরি করার পরিবর্তে কোডল্যাবটি অনুসরণ করতে চান, তাহলে আপনি নিম্নলিখিত সারণিগুলিতে তালিকাভুক্ত টেস্ট অ্যাডমব অ্যাপ আইডি এবং অ্যাড ইউনিট আইডিগুলি ব্যবহার করতে পারেন।
অ্যান্ড্রয়েড অ্যাপ আইডি/বিজ্ঞাপন ইউনিট আইডি
আইটেম | অ্যাপ আইডি/বিজ্ঞাপন ইউনিট আইডি |
AdMob অ্যাপ আইডি | |
ব্যানার | |
ইন্টারস্টিশিয়াল | |
পুরস্কৃত | |
iOS অ্যাপ আইডি/বিজ্ঞাপন ইউনিট আইডি
আইটেম | অ্যাপ আইডি/বিজ্ঞাপন ইউনিট আইডি |
AdMob অ্যাপ আইডি | |
ব্যানার | |
ইন্টারস্টিশিয়াল | |
পুরস্কৃত | |
টেস্ট অ্যাড সম্পর্কে আরও তথ্যের জন্য, অ্যান্ড্রয়েড টেস্ট অ্যাড এবং আইওএস টেস্ট অ্যাড ডেভেলপার ডকুমেন্টেশন দেখুন।
৪. গুগল মোবাইল অ্যাডস ফ্লাটার প্লাগইনটি যোগ করুন
ফ্লাটার বিভিন্ন প্ল্যাটফর্ম-নির্দিষ্ট পরিষেবা ব্যবহারের সুযোগ দিতে প্লাগইন ব্যবহার করে। প্লাগইনগুলো আপনাকে প্রতিটি প্ল্যাটফর্মের পরিষেবা এবং এপিআই (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
...
environment:
# TODO: Update the minimum sdk version to 2.12.0 to support null safety.
sdk: ">=2.17.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
google_fonts: ^3.0.1
# TODO: Add google_mobile_ads as a dependency
google_mobile_ads: ^1.2.0
...
Awesome Drawing Quiz প্রোজেক্টে প্লাগইনটি ইনস্টল করতে Pub get- এ ক্লিক করুন।
AndroidManifest.xml (অ্যান্ড্রয়েড) আপডেট করুন
- অ্যান্ড্রয়েড স্টুডিওতে
android/app/src/main/AndroidManifest.xmlফাইলটি খুলুন। -
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) আপডেট করুন
- অ্যান্ড্রয়েড স্টুডিওতে
ios/Runner/Info.plistফাইলটি খুলুন। - আপনার 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 ) কে পূর্ববর্তী ধাপে তৈরি করা আইডিগুলো দিয়ে প্রতিস্থাপন করেছেন।
lib/ad_helper.dart
import 'dart:io';
class AdHelper {
static String get bannerAdUnitId {
if (Platform.isAndroid) {
return '<YOUR_ANDROID_BANNER_AD_UNIT_ID>';
} else if (Platform.isIOS) {
return '<YOUR_IOS_BANNER_AD_UNIT_ID>';
} else {
throw UnsupportedError('Unsupported platform');
}
}
static String get interstitialAdUnitId {
if (Platform.isAndroid) {
return '<YOUR_ANDROID_INTERSTITIAL_AD_UNIT_ID>';
} else if (Platform.isIOS) {
return '<YOUR_IOS_INTERSTITIAL_AD_UNIT_ID>';
} else {
throw UnsupportedError('Unsupported platform');
}
}
static String get rewardedAdUnitId {
if (Platform.isAndroid) {
return '<YOUR_ANDROID_REWARDED_AD_UNIT_ID>';
} else if (Platform.isIOS) {
return '<YOUR_IOS_REWARDED_AD_UNIT_ID>';
} else {
throw UnsupportedError('Unsupported platform');
}
}
}
আপনি যদি টেস্ট AdMob অ্যাপ আইডি এবং টেস্ট অ্যাড ইউনিট আইডিগুলো ব্যবহার করতে চান, তাহলে নিম্নলিখিত কোড স্নিপেটটি ব্যবহার করুন।
lib/ad_helper.dart
import 'dart:io';
class AdHelper {
static String get bannerAdUnitId {
if (Platform.isAndroid) {
return 'ca-app-pub-3940256099942544/6300978111';
} else if (Platform.isIOS) {
return 'ca-app-pub-3940256099942544/2934735716';
} else {
throw new UnsupportedError('Unsupported platform');
}
}
static String get interstitialAdUnitId {
if (Platform.isAndroid) {
return "ca-app-pub-3940256099942544/1033173712";
} else if (Platform.isIOS) {
return "ca-app-pub-3940256099942544/4411468910";
} else {
throw new UnsupportedError("Unsupported platform");
}
}
static String get rewardedAdUnitId {
if (Platform.isAndroid) {
return "ca-app-pub-3940256099942544/5224354917";
} else if (Platform.isIOS) {
return "ca-app-pub-3940256099942544/1712485313";
} else {
throw new UnsupportedError("Unsupported platform");
}
}
}
৬. গুগল মোবাইল অ্যাডস এসডিকে চালু করুন
বিজ্ঞাপন লোড করার আগে, আপনাকে গুগল মোবাইল অ্যাডস এসডিকে (SDK) ইনিশিয়ালাইজ করতে হবে। lib/home_route.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 HomeRoute extends StatelessWidget {
...
Future<InitializationStatus> _initGoogleMobileAds() {
// TODO: Initialize Google Mobile Ads SDK
return MobileAds.instance.initialize();
}
}
৭. একটি ব্যানার বিজ্ঞাপন যোগ করুন
এই অংশে, আপনি গেম স্ক্রিনের উপরে একটি ব্যানার বিজ্ঞাপন প্রদর্শন করেন, যেমনটি নিচের স্ক্রিনশটে দেখানো হয়েছে।
-
lib/game_route.dartফাইলটি খুলুন এবংad_manager.dartইম্পোর্ট করুন। - নিচের লাইনগুলো যোগ করে
ad_helper.dartএবংgoogle_mobile_ads.dartফাইল দুটি ইম্পোর্ট করুন:
lib/game_route.dart
...
// TODO: Import ad_helper.dart
import 'package:awesome_drawing_quiz/ad_helper.dart';
// TODO: Import google_mobile_ads.dart
import 'package:google_mobile_ads/google_mobile_ads.dart';
class GameRoute extends StatefulWidget {
...
}
-
_GameRouteStateক্লাসে একটি ব্যানার বিজ্ঞাপনের জন্য নিম্নলিখিত মেম্বারগুলো যোগ করুন।
lib/game_route.dart
class _GameRouteState extends State<GameRoute> implements QuizEventListener {
...
// TODO: Add _bannerAd
BannerAd? _bannerAd;
...
}
-
initState()মেথডে, 320x50 ব্যানারের (AdSize.banner) জন্য একটিBannerAdতৈরি ও লোড করুন। উল্লেখ্য যে, অ্যাড লোড হলে UI (setState()) আপডেট করার জন্য একটি অ্যাড ইভেন্ট লিসেনার কনফিগার করা আছে।
lib/game_route.dart
@override
void initState() {
...
// TODO: Load a banner ad
BannerAd(
adUnitId: AdHelper.bannerAdUnitId,
request: AdRequest(),
size: AdSize.banner,
listener: BannerAdListener(
onAdLoaded: (ad) {
setState(() {
_bannerAd = ad as BannerAd;
});
},
onAdFailedToLoad: (ad, err) {
print('Failed to load a banner ad: ${err.message}');
ad.dispose();
},
),
).load();
}
-
build()মেথডটি পরিবর্তন করুন, যাতে উপলব্ধ থাকলে একটি ব্যানার বিজ্ঞাপন প্রদর্শিত হয়।
lib/game_route.dart
@override
Widget build(BuildContext context) {
return Scaffold(
...
body: SafeArea(
child: Stack(
children: [
Center(
...
),
// TODO: Display a banner when ready
if (_bannerAd != null)
Align(
alignment: Alignment.topCenter,
child: Container(
width: _bannerAd!.size.width.toDouble(),
height: _bannerAd!.size.height.toDouble(),
child: AdWidget(ad: _bannerAd!),
),
),
],
),
),
...
);
}
-
dispose()কলব্যাক মেথডের মধ্যেBannerAd.dispose()মেথডটি কল করেBannerAdঅবজেক্টের সাথে যুক্ত রিসোর্সটি মুক্ত করুন।
lib/game_route.dart
@override
void dispose() {
// TODO: Dispose a BannerAd object
_bannerAd?.dispose();
...
super.dispose();
}
ব্যাস! প্রজেক্টটি রান করুন এবং একটি নতুন গেম শুরু করুন। একটি বিজ্ঞাপন লোড হওয়ার পর, আপনি স্ক্রিনের উপরে একটি ব্যানার বিজ্ঞাপন দেখতে পাবেন।
৮. একটি মধ্যবর্তী বিজ্ঞাপন যোগ করুন
এই অংশে, গেমটি (মোট ৫টি লেভেল) শেষ হওয়ার পর একটি অন্তর্বর্তীকালীন বিজ্ঞাপন দেখানো হয়।
-
lib/game_route.dartফাইলটি খুলুন -
_GameRouteStateক্লাসে একটি ইন্টারস্টিশিয়াল বিজ্ঞাপনের জন্য নিম্নলিখিত মেম্বার এবং মেথডগুলো যোগ করুন।
উল্লেখ্য যে, বিজ্ঞাপনটি প্রস্তুত কিনা তা পরীক্ষা করতে ( onAdLoaded() এবং onAdFailedToLoad() ) এবং বিজ্ঞাপনটি বন্ধ হলে অ্যাপের হোম স্ক্রিন প্রদর্শন করতে ( onAdDismissedFullScreenContent() ) একটি বিজ্ঞাপন ইভেন্ট লিসেনার কনফিগার করা আছে।
lib/game_route.dart
class _GameRouteState extends State<GameRoute> implements QuizEventListener {
...
// TODO: Add _interstitialAd
InterstitialAd? _interstitialAd;
// TODO: Implement _loadInterstitialAd()
void _loadInterstitialAd() {
InterstitialAd.load(
adUnitId: AdHelper.interstitialAdUnitId,
request: AdRequest(),
adLoadCallback: InterstitialAdLoadCallback(
onAdLoaded: (ad) {
ad.fullScreenContentCallback = FullScreenContentCallback(
onAdDismissedFullScreenContent: (ad) {
_moveToHome();
},
);
setState(() {
_interstitialAd = ad;
});
},
onAdFailedToLoad: (err) {
print('Failed to load an interstitial ad: ${err.message}');
},
),
);
}
...
}
- এই কোডল্যাবে, একজন ব্যবহারকারী ৫টি লেভেল সম্পন্ন করার পর একটি ইন্টারস্টিশিয়াল বিজ্ঞাপন দেখানো হয়। অপ্রয়োজনীয় বিজ্ঞাপনের অনুরোধ কমানোর জন্য, ব্যবহারকারী যখন লেভেল ৩-এ পৌঁছাবে তখন বিজ্ঞাপনের অনুরোধ করুন।
onNewLevel() মেথডে নিম্নলিখিত লাইনগুলো যোগ করুন।
lib/game_route.dart
@override
void onNewLevel(int level, Drawing drawing, String clue) {
...
// TODO: Load an Interstitial Ad
if (level >= 3 && _interstitialAd == null) {
_loadInterstitialAd();
}
}
- খেলা শেষ হলে, খেলার স্কোরের ডায়ালগ বক্সটি প্রদর্শিত হয়। ব্যবহারকারী যখন ডায়ালগ বক্সটি বন্ধ করেন, তখন তাকে Awesome Drawing Quiz- এর হোম স্ক্রিনে নিয়ে যাওয়া হয়।
যেহেতু স্ক্রিন পরিবর্তনের মাঝে ইন্টারস্টিশিয়াল বিজ্ঞাপন দেখানো উচিত, তাই ব্যবহারকারী যখন ক্লোজ বাটনে ক্লিক করেন, তখন আমরা ইন্টারস্টিশিয়াল বিজ্ঞাপনটি দেখাই।
onGameOver() মেথডটি নিম্নরূপভাবে পরিবর্তন করুন।
lib/game_route.dart
@override
void onGameOver(int correctAnswers) {
showDialog(
context: _scaffoldKey.currentContext,
builder: (context) {
return AlertDialog(
title: Text('Game over!'),
content: Text('Score: $correctAnswers/5'),
actions: [
FlatButton(
child: Text('close'.toUpperCase()),
onPressed: () {
// TODO: Display an Interstitial Ad
if (_interstitialAd != null) {
_interstitialAd?.show();
} else {
_moveToHome();
}
},
),
],
);
},
);
}
-
dispose()কলব্যাক মেথডের মধ্যেInterstitialAd.dispose()মেথডটি কল করার মাধ্যমেInterstitialAdঅবজেক্টের সাথে যুক্ত রিসোর্সটি মুক্ত করুন।
lib/game_route.dart
@override
void dispose() {
...
// TODO: Dispose an InterstitialAd object
_interstitialAd?.dispose();
...
super.dispose();
}
ব্যাস! প্রজেক্টটি চালান এবং গেমটি সম্পূর্ণ করুন। যদি কোনো ইন্টারস্টিশিয়াল বিজ্ঞাপন লোড হয়, তাহলে স্কোর ডায়ালগ থেকে ক্লোজ (CLOSE) বোতামে ক্লিক করলে আপনি একটি ইন্টারস্টিশিয়াল বিজ্ঞাপন দেখতে পাবেন।
৯. একটি পুরস্কারযুক্ত বিজ্ঞাপন যোগ করুন
এই বিভাগে, আপনি একটি পুরস্কারযুক্ত বিজ্ঞাপন যোগ করেন যা ব্যবহারকারীকে পুরস্কার হিসেবে একটি অতিরিক্ত ইঙ্গিত দেয়।
-
lib/game_route.dartফাইলটি খুলুন -
_GameRouteStateক্লাসে, একটি রিওয়ার্ডেড অ্যাডের জন্য মেম্বার যোগ করুন এবং_loadRewardedAd()মেথডটি ইমপ্লিমেন্ট করুন। মনে রাখবেন, অ্যাডটি বন্ধ হয়ে গেলে (onAdDismissedFullScreenContent) এটি আরেকটি রিওয়ার্ডেড অ্যাড লোড করে, যাতে অ্যাডটি যত তাড়াতাড়ি সম্ভব ক্যাশ করা যায়।
lib/game_route.dart
class _GameRouteState extends State<GameRoute> implements QuizEventListener {
...
// TODO: Add _rewardedAd
RewardedAd? _rewardedAd;
// TODO: Implement _loadRewardedAd()
void _loadRewardedAd() {
RewardedAd.load(
adUnitId: AdHelper.rewardedAdUnitId,
request: AdRequest(),
rewardedAdLoadCallback: RewardedAdLoadCallback(
onAdLoaded: (ad) {
ad.fullScreenContentCallback = FullScreenContentCallback(
onAdDismissedFullScreenContent: (ad) {
setState(() {
ad.dispose();
_rewardedAd = null;
});
_loadRewardedAd();
},
);
setState(() {
_rewardedAd = ad;
});
},
onAdFailedToLoad: (err) {
print('Failed to load a rewarded ad: ${err.message}');
},
),
);
}
...
}
- গেম শুরু হওয়ার সময় রিওয়ার্ডেড অ্যাডের অনুরোধ করতে
initState()মেথড থেকে_loadRewardedAd()কল করুন।
lib/game_route.dart
class _GameRouteState extends State<GameRoute> implements QuizEventListener {
...
@override
void initState() {
...
// COMPLETE: Load a Rewarded Ad
_loadRewardedAd();
}
...
}
- ভাসমান অ্যাকশন বোতামে ক্লিক করে ব্যবহারকারীদের একটি পুরস্কারযুক্ত বিজ্ঞাপন দেখার অনুমতি দিন। বোতামটি কেবল তখনই দেখা যাবে, যখন ব্যবহারকারী বর্তমান লেভেলে কোনো ইঙ্গিত ব্যবহার করেননি এবং একটি পুরস্কারযুক্ত বিজ্ঞাপন লোড হয়েছে।
ফ্লোটিং অ্যাকশন বাটনটি প্রদর্শন করার জন্য _buildFloatingActionButton() মেথডটি নিম্নরূপভাবে পরিবর্তন করুন। মনে রাখবেন যে null রিটার্ন করলে বাটনটি স্ক্রিন থেকে অদৃশ্য হয়ে যাবে।
মনে রাখবেন যে, একটি রিওয়ার্ডেড অ্যাডের ক্ষেত্রে onUserEarnedReward হলো সবচেয়ে গুরুত্বপূর্ণ অ্যাড ইভেন্ট। যখন কোনো ব্যবহারকারী পুরস্কার পাওয়ার যোগ্য হন (উদাহরণস্বরূপ, একটি ভিডিও দেখা শেষ করলে), তখন এটি ট্রিগার হয়।
এই কোডল্যাবে, কলব্যাক থেকে QuizManager.instance.useHint() মেথডটি কল করা হয়, যা হিন্ট স্ট্রিং-এর আরও একটি অক্ষর প্রকাশ করে। অ্যাপটি onAdClosed কলব্যাকে একটি রিওয়ার্ডেড বিজ্ঞাপন রিলোড করে, যাতে বিজ্ঞাপনটি যত তাড়াতাড়ি সম্ভব প্রস্তুত থাকে।
lib/game_route.dart
Widget? _buildFloatingActionButton() {
// TODO: Return a FloatingActionButton if a rewarded ad is available
return (!QuizManager.instance.isHintUsed && _rewardedAd != null)
? FloatingActionButton.extended(
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: Text('Need a hint?'),
content: Text('Watch an Ad to get a hint!'),
actions: [
TextButton(
child: Text('cancel'.toUpperCase()),
onPressed: () {
Navigator.pop(context);
},
),
TextButton(
child: Text('ok'.toUpperCase()),
onPressed: () {
Navigator.pop(context);
_rewardedAd?.show(
onUserEarnedReward: (_, reward) {
QuizManager.instance.useHint();
},
);
},
),
],
);
},
);
},
label: Text('Hint'),
icon: Icon(Icons.card_giftcard),
)
: null;
}
-
dispose()কলব্যাক মেথডের মধ্যেRewardedAd.dispose()মেথডটি কল করেRewardedAdঅবজেক্টের সাথে যুক্ত রিসোর্সটি মুক্ত করুন।
lib/game_route.dart
@override
void dispose() {
...
// TODO: Dispose a RewardedAd object
_rewardedAd?.dispose();
...
super.dispose();
}
ব্যাস! প্রজেক্টটি রান করুন এবং গেমটি খেলুন। একটি পুরস্কারযুক্ত বিজ্ঞাপন লোড হলে, আপনি স্ক্রিনের নীচে একটি ইঙ্গিত বোতাম দেখতে পাবেন। অতিরিক্ত ইঙ্গিত পেতে ইঙ্গিত বোতামটিতে ক্লিক করুন।
১০. সব হয়ে গেছে!
আপনি কোডল্যাবটি সম্পন্ন করেছেন। এই কোডল্যাবের সম্পূর্ণ কোডটি আপনি এখানে খুঁজে পাবেন। সম্পূর্ণ ফোল্ডার।
কিভাবে ব্যানার এবং নেটিভ ইনলাইন বিজ্ঞাপন প্রয়োগ করতে হয় তা শিখতে, "Adding an AdMob banner and native inline ads to a Flutter app" কোডল্যাবটি দেখুন।
আরও জানতে, অন্যান্য ফ্লাটার কোডল্যাবগুলো দেখুন।