बैनर

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

इस गाइड की मदद से, ऐंकर किए गए अडैप्टिव बैनर विज्ञापन बनाने का तरीका जानें. ऐंकर किए गए अडैप्टिव बैनर, आपके तय किए गए विज्ञापन की चौड़ाई का इस्तेमाल करके, हर डिवाइस के लिए विज्ञापन का साइज़ ऑप्टिमाइज़ करते हैं.

ऐंकर किए गए अडैप्टिव बैनर विज्ञापन, तय साइज़ के बजाय, तय आसपेक्ट रेशियो वाले विज्ञापन होते हैं. आसपेक्ट रेशियो, 320x50 जैसा है. उपलब्ध पूरी चौड़ाई तय करने के बाद, Google Mobile Ads SDK टूल, उस चौड़ाई के लिए सबसे सही ऊंचाई वाला विज्ञापन दिखाता है. विज्ञापन की सबसे सही ऊंचाई, अलग-अलग विज्ञापन अनुरोधों में एक जैसी रहती है. साथ ही, विज्ञापन रीफ़्रेश होने पर, विज्ञापन के आस-पास का कॉन्टेंट अपनी जगह पर बना रहता है.

हमेशा टेस्ट विज्ञापनों की मदद से जांच करें

अपने ऐप्लिकेशन बनाते और टेस्ट करते समय, लाइव और प्रोडक्शन विज्ञापनों के बजाय, टेस्ट विज्ञापनों का इस्तेमाल करें. ऐसा न करने पर, आपके खाते को निलंबित किया जा सकता है.

टेस्ट विज्ञापन लोड करने का सबसे आसान तरीका, बैनर के लिए बनी हमारी खास टेस्ट विज्ञापन यूनिट आईडी का इस्तेमाल करना है:

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

टेस्ट विज्ञापन यूनिट को हर अनुरोध के लिए टेस्ट विज्ञापन दिखाने के लिए कॉन्फ़िगर किया जाता है. साथ ही, कोडिंग, टेस्टिंग, और डीबग करने के दौरान, अपने ऐप्लिकेशन में इनका इस्तेमाल किया जा सकता है. बस यह पक्का करें कि ऐप्लिकेशन को पब्लिश करने से पहले, उन्हें अपने विज्ञापन यूनिट आईडी से बदल दिया जाए.

विज्ञापन का साइज़ पाना

सही साइज़ के बैनर विज्ञापन का अनुरोध करने के लिए, यह तरीका अपनाएं:

  1. MediaQuery.of(context) का इस्तेमाल करके, डिवाइस की स्क्रीन की चौड़ाई को डेंसिटी-इंडिपेंडेंट पिक्सल (dp) में पाएं. अगर आपको फ़ुल स्क्रीन की चौड़ाई का इस्तेमाल नहीं करना है, तो अपनी पसंद के मुताबिक चौड़ाई सेट की जा सकती है.

  2. 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 की विजेट क्लास से इनहेरिट करता है और इसका इस्तेमाल किसी भी अन्य विजेट की तरह किया जा सकता है. 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 एपीआई लेवल पर बेहतर परफ़ॉर्मेंस के साथ किया जा सकता है.

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

इस पेज पर बताए गए बैनर इंटिग्रेशन का पूरा उदाहरण, banner_example में देखें.

अन्य तरह के बैनर के बारे में जानें

अपने Flutter ऐप्लिकेशन के लिए, इस सेक्शन में बताए गए अन्य तरह के बैनर के बारे में जानें.

इनलाइन अडैप्टिव बैनर

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

छोटे किए जा सकने वाले बैनर

छोटे किए जा सकने वाले बैनर विज्ञापन, बैनर विज्ञापन होते हैं. शुरुआत में, इन्हें बड़े ओवरले के तौर पर दिखाया जाता है. साथ ही, इनमें विज्ञापन को छोटे साइज़ में करने के लिए बटन भी होता है. अपनी परफ़ॉर्मेंस को और ऑप्टिमाइज़ करने के लिए, इस बैनर का इस्तेमाल करें. ज़्यादा जानकारी के लिए, छोटे हो जाने वाले बैनर विज्ञापन देखें.