बैनर विज्ञापन, ऐप्लिकेशन के लेआउट में किसी जगह पर दिखते हैं. ये डिवाइस की स्क्रीन पर सबसे ऊपर या सबसे नीचे दिखते हैं. जब उपयोगकर्ता आपके ऐप्लिकेशन के साथ इंटरैक्ट करते हैं, तब स्क्रीन पर सबसे ऊपर या सबसे नीचे बैनर विज्ञापन दिखते रहते हैं. वहीं, ये कुछ समय बाद अपने-आप रीफ़्रेश हो सकते हैं.
इस गाइड में, ऐंकर किए गए अडैप्टिव बैनर विज्ञापनों के बारे में बताया गया है. ऐंकर किए गए अडैप्टिव बैनर, हर डिवाइस के लिए विज्ञापन के साइज़ को ऑप्टिमाइज़ करते हैं. इसके लिए, वे आपके तय किए गए विज्ञापन की चौड़ाई का इस्तेमाल करते हैं.
ऐंकर किए गए अडैप्टिव बैनर विज्ञापन, तय साइज़ वाले विज्ञापनों के बजाय, तय आसपेक्ट रेशियो (चौड़ाई-ऊंचाई का अनुपात) वाले विज्ञापन होते हैं. आस्पेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) 320x50 के जैसा है. उपलब्ध पूरी चौड़ाई तय करने के बाद, Google Mobile Ads SDK उस चौड़ाई के लिए सबसे सही ऊंचाई वाला विज्ञापन दिखाता है. विज्ञापन की सबसे सही ऊंचाई, अलग-अलग विज्ञापन अनुरोधों के लिए एक जैसी रहती है. साथ ही, विज्ञापन रीफ़्रेश होने पर, विज्ञापन के आस-पास मौजूद कॉन्टेंट अपनी जगह पर बना रहता है.
हमेशा टेस्ट विज्ञापनों का इस्तेमाल करके टेस्ट करें
अपने ऐप्लिकेशन बनाते और उनकी टेस्टिंग करते समय, पक्का करें कि आपने लाइव और प्रोडक्शन विज्ञापनों के बजाय, टेस्ट विज्ञापनों का इस्तेमाल किया हो. ऐसा न करने पर, आपका खाता निलंबित किया जा सकता है.
टेस्ट विज्ञापनों को आसानी से लोड करने के लिए, बैनर के लिए हमारे टेस्ट विज्ञापन यूनिट आईडी का इस्तेमाल करें:
Android
ca-app-pub-3940256099942544/9214589741
iOS
ca-app-pub-3940256099942544/2435281174
टेस्ट विज्ञापन यूनिट को इस तरह कॉन्फ़िगर किया जाता है कि हर अनुरोध के लिए टेस्ट विज्ञापन दिखाए जा सकें. साथ ही, कोडिंग, टेस्टिंग, और डीबग करने के दौरान, इनका इस्तेमाल अपने ऐप्लिकेशन में किया जा सकता है. हालांकि, ऐप्लिकेशन पब्लिश करने से पहले, उन्हें अपने विज्ञापन यूनिट आईडी से बदलना न भूलें.
विज्ञापन का साइज़ पाना
विज्ञापन के सही साइज़ के साथ बैनर विज्ञापन का अनुरोध करने के लिए, यह तरीका अपनाएं:
MediaQuery.of(context)का इस्तेमाल करके, डिवाइस की स्क्रीन की चौड़ाई को डेंसिटी-इंडिपेंडेंट पिक्सल (डीपी) में पाएं. अगर आपको पूरी स्क्रीन की चौड़ाई का इस्तेमाल नहीं करना है, तो अपनी पसंद के मुताबिक चौड़ाई सेट की जा सकती है.AdSizeऑब्जेक्ट पाने के लिए,AdSizeक्लास पर सही स्टैटिक तरीके का इस्तेमाल करें. उदाहरण के लिए, मौजूदा ओरिएंटेशन के लिए विज्ञापन का साइज़ पाने के लिए,AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)का इस्तेमाल करें.
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.sizeOf(context).width.truncate());
विज्ञापन लोड करना
यहां बैनर विज्ञापन को इंस्टैंशिएट करने का उदाहरण दिया गया है:
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/9214589741'
: 'ca-app-pub-3940256099942544/2435281174';
/// Loads a banner ad.
void loadAd() async {
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.sizeOf(context).width.truncate());
_bannerAd = BannerAd(
adUnitId: adUnitId,
request: const AdRequest(),
size: size,
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();
}
}
बैनर विज्ञापन इवेंट
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/9214589741'
: 'ca-app-pub-3940256099942544/2435281174';
/// Loads a banner ad.
void loadAd() async {
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.sizeOf(context).width.truncate());
_bannerAd = BannerAd(
adUnitId: adUnitId,
request: const AdRequest(),
size: size,
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();
}
}
विज्ञापन रीफ़्रेश करना
अगर आपने विज्ञापन यूनिट को रीफ़्रेश करने के लिए कॉन्फ़िगर किया है, तो विज्ञापन लोड न होने पर आपको किसी दूसरे विज्ञापन का अनुरोध करने की ज़रूरत नहीं है. Google Mobile Ads SDK, AdMob यूज़र इंटरफ़ेस (यूआई) में सेट की गई रीफ़्रेश दर का पालन करता है. अगर आपने रीफ़्रेश करने की सुविधा चालू नहीं की है, तो नया अनुरोध करें. विज्ञापन यूनिट के रीफ़्रेश होने के बारे में ज़्यादा जानकारी के लिए, जैसे कि रीफ़्रेश रेट सेट करना, यह लेख पढ़ें: बैनर विज्ञापनों के लिए, अपने-आप रीफ़्रेश होने की सुविधा का इस्तेमाल करना.
बैनर विज्ञापन दिखाना
BannerAd को विजेट के तौर पर दिखाने के लिए, आपको load() को कॉल करने के बाद, काम करने वाले विज्ञापन के साथ AdWidget को इंस्टैंशिएट करना होगा. load() को कॉल करने से पहले, विजेट बनाया जा सकता है. हालांकि, विजेट ट्री में विजेट जोड़ने से पहले, load() को कॉल करना ज़रूरी है.
AdWidget, Flutter के Widget क्लास से इनहेरिट होता है. इसका इस्तेमाल किसी अन्य विजेट की तरह किया जा सकता है. 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() को कॉल करने का सबसे सही तरीका यह है कि इसे विजेट ट्री से हटाने के बाद या BannerAdListener.onAdFailedToLoad() कॉलबैक में कॉल किया जाए.AdWidget
हो गया! आपका ऐप्लिकेशन अब बैनर विज्ञापन दिखाने के लिए तैयार है.
Android 9 और इससे पहले के वर्शन पर स्क्रोल करने की सीमा
हमें पता है कि Android 9 या इससे पहले के वर्शन पर काम करने वाले कुछ पुराने या कम पावरफुल डिवाइसों पर, स्क्रोल किए जा सकने वाले व्यू में इनलाइन बैनर विज्ञापन दिखाने पर, परफ़ॉर्मेंस अच्छी नहीं मिलती. हमारा सुझाव है कि Android 10 या उसके बाद वाले वर्शन पर, सिर्फ़ इस तरह के बैनर का इस्तेमाल करें. फ़िक्स्ड पोज़िशन वाले बैनर, जैसे कि ऐंकर्ड बैनर पर इसका कोई असर नहीं पड़ता. साथ ही, इनका इस्तेमाल Android के सभी एपीआई लेवल पर बेहतरीन परफ़ॉर्मेंस के साथ किया जा सकता है.
GitHub पर पूरा उदाहरण
इस पेज पर दिए गए बैनर इंटिग्रेशन का पूरा उदाहरण, banner_example में देखें.
अन्य तरह के बैनर के बारे में जानें
अपने Flutter ऐप्लिकेशन के लिए, इस सेक्शन में बताए गए अन्य तरह के बैनर के बारे में जानें.
इनलाइन अडैप्टिव बैनर
इनलाइन अडैप्टिव बैनर की लंबाई कम या ज़्यादा की जा सकती है. ये ऐंकर किए गए अडैप्टिव बैनर की तुलना में बड़े और लंबे होते हैं. स्क्रोल किए जा सकने वाले कॉन्टेंट में बैनर विज्ञापन दिखाने वाले ऐप्लिकेशन के लिए, ऐंकर किए गए अडैप्टिव बैनर विज्ञापनों के बजाय इनलाइन अडैप्टिव बैनर विज्ञापनों का इस्तेमाल करने का सुझाव दिया जाता है. ज़्यादा जानकारी के लिए, इनलाइन अडैप्टिव बैनर देखें.
छोटे हो जाने वाले बैनर विज्ञापन
छोटा किया जा सकने वाला बैनर विज्ञापन, बैनर विज्ञापन होते हैं. ये शुरुआत में बड़े ओवरले के तौर पर दिखते हैं. इनमें एक बटन होता है, जिसकी मदद से विज्ञापन को छोटे साइज़ में छोटा किया जा सकता है. अपनी परफ़ॉर्मेंस को और बेहतर बनाने के लिए, इस बैनर का इस्तेमाल करें. ज़्यादा जानकारी के लिए, छोटे हो जाने वाले बैनर विज्ञापन देखें.