बैनर

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

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

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

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

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

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

/21775744923/example/adaptive-banner

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

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

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

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>{
  AdManagerBannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/21775744923/example/adaptive-banner';

  /// 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 = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: size,
      listener: AdManagerBannerAdListener(
        // 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('AdManagerBannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
      ),
    )..load();
  }
}

बैनर विज्ञापन इवेंट

AdManagerBannerAdListener का इस्तेमाल करके, लाइफ़साइकल इवेंट को सुना जा सकता है. जैसे, जब कोई विज्ञापन लोड होता है. इस उदाहरण में, हर तरीके को लागू किया गया है और कंसोल में एक मैसेज को लॉग किया गया है:

class BannerExampleState extends State<BannerExample> {
  AdManagerBannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/21775744923/example/adaptive-banner';


  /// 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 = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: size,
      listener: AdManagerBannerAdListener(
        // 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('AdManagerBannerAd 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();
  }
}

बैनर विज्ञापन दिखाना

AdManagerBannerAd को विजेट के तौर पर दिखाने के लिए, आपको load() को कॉल करने के बाद, काम करने वाले विज्ञापन के साथ AdWidget को इंस्टैंशिएट करना होगा. load() को कॉल करने से पहले विजेट बनाया जा सकता है. हालांकि, विजेट ट्री में जोड़ने से पहले load() को कॉल करना ज़रूरी है.

AdWidget को Flutter की विजेट क्लास से इनहेरिट किया जाता है और इसका इस्तेमाल किसी भी दूसरे विजेट की तरह किया जा सकता है. iOS पर, पक्का करें कि आपने विजेट को एक तय चौड़ाई और ऊंचाई वाले विजेट में रखा हो. ऐसा नहीं करने पर, हो सकता है कि आपका विज्ञापन न दिखे. AdManagerBannerAd को ऐसे कंटेनर में रखा जा सकता है जिसका साइज़ विज्ञापन के साइज़ से मेल खाता हो:

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 को विजेट ट्री से हटाने के बाद या AdManagerBannerAdListener.onAdFailedToLoad() कॉलबैक में ऐसा किया जाए.

हो गया! आपका ऐप्लिकेशन अब बैनर विज्ञापन दिखाने के लिए तैयार है.

Android 9 और इससे पहले के वर्शन पर स्क्रोल करने की सीमा

हम जानते हैं कि Android 9 या उससे पहले के वर्शन पर चलने वाले कुछ पुराने या कम परफ़ॉर्म करने वाले डिवाइसों पर, स्क्रोलिंग व्यू में इनलाइन बैनर विज्ञापन दिखाने पर, परफ़ॉर्मेंस ठीक से काम न कर सकती. हमारा सुझाव है कि आप सिर्फ़ Android 10 या उसके बाद वाले वर्शन पर, इस तरह के बैनर इस्तेमाल करें. ऐंकर किए गए बैनर जैसे तय जगह पर दिखने वाले बैनर पर इसका कोई असर नहीं पड़ा है. साथ ही, इनका इस्तेमाल सभी Android एपीआई लेवल पर बेहतर परफ़ॉर्मेंस के साथ किया जा सकता है.

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

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

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

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

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

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