बैनर

बैनर विज्ञापन, ऐप्लिकेशन के लेआउट में डिवाइस की स्क्रीन के ऊपर या नीचे एक जगह ले लेते हैं. जब उपयोगकर्ता ऐप्लिकेशन का इस्तेमाल करते हैं, तब ये स्क्रीन पर दिखते रहते हैं. साथ ही, तय समय के बाद ये ऐप्लिकेशन अपने-आप रीफ़्रेश हो जाते हैं.

इस गाइड में, 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 API लेवल पर, सबसे अच्छी परफ़ॉर्मेंस के साथ इस्तेमाल किया जा सकता है.

GitHub पर पूरा उदाहरण

बैनर