बैनर विज्ञापन ऐप्लिकेशन के लेआउट में, डिवाइस की स्क्रीन पर सबसे ऊपर या सबसे नीचे एक जगह घेरते हैं. जब उपयोगकर्ता ऐप्लिकेशन के साथ इंटरैक्ट कर रहे होते हैं, तब वे स्क्रीन पर बने रहते हैं और एक तय समय के बाद वे अपने-आप रीफ़्रेश हो जाते हैं.
इस गाइड में, AdMob के बैनर विज्ञापनों को Flutter ऐप्लिकेशन में इंटिग्रेट करने का तरीका बताया गया है. कोड स्निपेट और निर्देशों के अलावा, इसमें बैनर को सही तरीके से साइज़ देने के बारे में भी जानकारी दी गई है.
हमेशा टेस्ट विज्ञापनों से टेस्ट करें
अपने ऐप्लिकेशन बनाते और उनकी जांच करते समय पक्का करें कि आप लाइव, प्रोडक्शन विज्ञापनों के बजाय टेस्ट विज्ञापनों का इस्तेमाल करें. ऐसा न करने पर, आपका खाता निलंबित किया जा सकता है.
टेस्ट विज्ञापन लोड करने का सबसे आसान तरीका, बैनर के लिए हमारे खास टेस्ट विज्ञापन यूनिट आईडी का इस्तेमाल करना है:
Android
ca-app-pub-3940256099942544/6300978111
iOS
ca-app-pub-3940256099942544/2934735716
टेस्ट विज्ञापन यूनिट को हर अनुरोध के लिए टेस्ट विज्ञापन दिखाने के लिए कॉन्फ़िगर किया गया है. कोडिंग, टेस्टिंग, और डीबग करने के दौरान, इन्हें अपने ऐप्लिकेशन में इस्तेमाल किया जा सकता है. अपना ऐप्लिकेशन पब्लिश करने से पहले, यह पक्का कर लें कि आपने उनकी जगह अपने विज्ञापन यूनिट आईडी डाल दिए हों.
विज्ञापन लोड करें
नीचे दिया गया उदाहरण बैनर विज्ञापन को इंस्टैंशिएट करता है:
class BannerExampleState extends State<BannerExample> {
BannerAd? _bannerAd;
bool _isLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final adUnitId = Platform.isAndroid
? 'ca-app-pub-3940256099942544/6300978111'
: 'ca-app-pub-3940256099942544/2934735716';
/// Loads a banner ad.
void loadAd() {
_bannerAd = BannerAd(
adUnitId: adUnitId,
request: const AdRequest(),
size: AdSize.banner,
listener: BannerAdListener(
// Called when an ad is successfully received.
onAdLoaded: (ad) {
debugPrint('$ad loaded.');
setState(() {
_isLoaded = true;
});
},
// Called when an ad request failed.
onAdFailedToLoad: (ad, err) {
debugPrint('BannerAd failed to load: $error');
// Dispose the ad here to free resources.
ad.dispose();
},
),
)..load();
}
}
बैनर आकार
नीचे दी गई टेबल में, बैनर के स्टैंडर्ड साइज़ दिए गए हैं.
| dp में साइज़ (WxH) | जानकारी | AdSize स्थिरांक |
|---|---|---|
| 320x50 | स्टैंडर्ड बैनर | banner
|
| 320x100 | बड़ा बैनर | largeBanner
|
| 320x250 | मध्यम आयत | mediumRectangle
|
| 468x60 | फ़ुल-साइज़ बैनर | fullBanner
|
| 728x90 | लीडरबोर्ड | leaderboard
|
| दी गई चौड़ाई x ज़रूरत के हिसाब से ऊंचाई | अडैप्टिव बैनर | लागू नहीं |
बैनर का कस्टम साइज़ तय करने के लिए, अपनी पसंद के हिसाब से AdSize सेट करें:
final AdSize adSize = AdSize(300, 50);
बैनर विज्ञापन इवेंट
BannerAdListener का इस्तेमाल करके, लाइफ़साइकल इवेंट को सुना जा सकता है, जैसे कि कोई विज्ञापन लोड होना. यह उदाहरण हर तरीके को लागू करता है और कंसोल में मैसेज लॉग करता है:
class BannerExampleState extends State<BannerExample> {
BannerAd? _bannerAd;
bool _isLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final adUnitId = Platform.isAndroid
? 'ca-app-pub-3940256099942544/6300978111'
: 'ca-app-pub-3940256099942544/2934735716';
/// Loads a banner ad.
void loadAd() {
_bannerAd = BannerAd(
adUnitId: adUnitId,
request: const AdRequest(),
size: AdSize.banner,
listener: BannerAdListener(
// Called when an ad is successfully received.
onAdLoaded: (ad) {
debugPrint('$ad loaded.');
setState(() {
_isLoaded = true;
});
},
// Called when an ad request failed.
onAdFailedToLoad: (ad, err) {
debugPrint('BannerAd failed to load: $error');
// Dispose the ad here to free resources.
ad.dispose();
},
// Called when an ad opens an overlay that covers the screen.
onAdOpened: (Ad ad) {},
// Called when an ad removes an overlay that covers the screen.
onAdClosed: (Ad ad) {},
// Called when an impression occurs on the ad.
onAdImpression: (Ad ad) {},
),
)..load();
}
}
बैनर विज्ञापन दिखाएं
BannerAd को विजेट के तौर पर दिखाने के लिए, आपको load() को कॉल करने के बाद, काम करने वाले विज्ञापन के साथ AdWidget इंस्टैंशिएट करना होगा. load() को कॉल करने से पहले, विजेट बनाया जा सकता है. हालांकि, विजेट ट्री में जोड़ने से पहले load() को कॉल करना ज़रूरी है.
AdWidget को Flutter की विजेट क्लास से इनहेरिट किया जाता है और इसका इस्तेमाल किसी भी दूसरे विजेट की तरह किया जा सकता है. iOS पर, पक्का करें कि आपने विजेट को एक तय चौड़ाई और ऊंचाई वाले विजेट में रखा हो. ऐसा नहीं करने पर, हो सकता है कि आपका विज्ञापन न दिखे. BannerAd को विज्ञापन से मैच करने वाले कंटेनर में रखा जा सकता है:
...
if (_bannerAd != null) {
Align(
alignment: Alignment.bottomCenter,
child: SafeArea(
child: SizedBox(
width: _bannerAd!.size.width.toDouble(),
height: _bannerAd!.size.height.toDouble(),
child: AdWidget(ad: _bannerAd!),
),
),
)
}
...
जब किसी विज्ञापन की ज़रूरत न हो, तब उसे हटा देना चाहिए. dispose() को कॉल करने का सबसे सही तरीका, विजेट ट्री से AdWidget को हटाने या BannerAdListener.onAdFailedToLoad() कॉलबैक में है.
हो गया! अब आपका ऐप्लिकेशन, बैनर विज्ञापन दिखाने के लिए तैयार है.
Android 9 और इससे पहले के वर्शन पर स्क्रोल करने की सीमा
हम जानते हैं कि Android 9 या इससे पहले के वर्शन पर चलने वाले कुछ पुराने या कम क्षमता वाले डिवाइसों की परफ़ॉर्मेंस पर खराब असर पड़ सकता है. ऐसा स्क्रोलिंग व्यू में इनलाइन बैनर विज्ञापन दिखाते समय किया जाता है. हमारा सुझाव है कि आप सिर्फ़ Android 10 या उसके बाद के वर्शन पर इस तरह के बैनर का इस्तेमाल करें. ऐंकर किए गए बैनर जैसे फ़िक्स की गई जगह वाले बैनर पर इसका कोई असर नहीं पड़ता. साथ ही, Android एपीआई के सभी लेवल पर, इन बैनर विज्ञापनों को सबसे अच्छी परफ़ॉर्मेंस के साथ इस्तेमाल किया जा सकता है.