बैनर विज्ञापन सेट अप करना

प्लैटफ़ॉर्म चुनें: Android iOS Unity Flutter Android (लेगसी)

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

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

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

हमेशा टेस्ट विज्ञापनों का इस्तेमाल करके टेस्ट करना

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

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

/21775744923/example/adaptive-banner

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

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

बड़े अडैप्टिव बैनर, बड़े फ़ॉर्मैट में उपलब्ध होते हैं. इन्हें स्क्रोल न किए जा सकने वाले लेआउट के लिए डिज़ाइन किया गया है. स्टैंडर्ड ऐंकर किए गए अडैप्टिव बैनर की तुलना में, इन बैनर की ऊंचाई ज़्यादा हो सकती है. यह स्क्रीन की ऊंचाई का 20% तक हो सकती है. हालांकि, यह 50 से 150 डीपी के बीच होनी चाहिए. यह बढ़ा हुआ स्पेस, वीडियो कॉन्टेंट के लिए ऑप्टिमाइज़ किया गया है.

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

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

2. AdSize ऑब्जेक्ट पाने के लिए, AdSize क्लास पर सही स्टैटिक तरीके का इस्तेमाल करें. उदाहरण के लिए, मौजूदा स्क्रीन की दिशा के लिए विज्ञापन का साइज़ पाने के लिए, AdSize.getLargeAnchoredAdaptiveBannerAdSize(int width) का इस्तेमाल करें.

// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(
  MediaQuery.sizeOf(context).width.truncate(),
);
banner_ad_snippets.dart

विज्ञापन लोड करना

यहां बैनर विज्ञापन लोड करने का उदाहरण दिया गया है:

void _loadAdManagerBannerAd() async {
  // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
  final size = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(
    MediaQuery.sizeOf(context).width.truncate(),
  );

  if (size == null) {
    // Unable to get width of anchored banner.
    return;
  }

  unawaited(
    BannerAd(
      adUnitId: "_adUnitId",
      request: const AdManagerAdRequest(),
      size: size,
      listener: BannerAdListener(
        onAdLoaded: (ad) {
          // Called when an ad is successfully received.
          debugPrint('Ad was loaded.');
          setState(() {
            _bannerAd = ad as BannerAd;
          });
        },
        onAdFailedToLoad: (ad, err) {
          // Called when an ad request failed.
          debugPrint('Ad failed to load with error: $err');
          ad.dispose();
        },
      ),
    ).load(),
  );
}
banner_ad_snippets.dart

_adUnitId को अपनी विज्ञापन यूनिट के आईडी से बदलें.

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

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

onAdOpened: (Ad ad) {
  // Called when an ad opens an overlay that covers the screen.
  debugPrint('Ad was opened.');
},
onAdClosed: (Ad ad) {
  // Called when an ad removes an overlay that covers the screen.
  debugPrint('Ad was closed.');
},
onAdImpression: (Ad ad) {
  // Called when an impression occurs on the ad.
  debugPrint('Ad recorded an impression.');
},
onAdClicked: (Ad ad) {
  // Called when a click event occurs on the ad.
  debugPrint('Ad was clicked.');
},
onAdWillDismissScreen: (Ad ad) {
  // iOS only. Called before dismissing a full screen view.
  debugPrint('Ad will be dismissed.');
},
banner_ad_snippets.dart

विज्ञापन रीफ़्रेश करना

अगर आपने विज्ञापन यूनिट को रीफ़्रेश करने के लिए कॉन्फ़िगर किया है, तो विज्ञापन लोड न होने पर आपको किसी दूसरे विज्ञापन का अनुरोध करने की ज़रूरत नहीं है. Google Mobile Ads Flutter Plugin, Ad Manager के यूज़र इंटरफ़ेस (यूआई) में तय की गई रीफ़्रेश दर का पालन करता है. अगर आपने रीफ़्रेश करने की सुविधा चालू नहीं की है, तो नया अनुरोध करें. विज्ञापन यूनिट रीफ़्रेश करने के बारे में ज़्यादा जानने के लिए, जैसे कि रीफ़्रेश दर सेट करना, यह लेख पढ़ें: मोबाइल ऐप्लिकेशन में दिखने वाले विज्ञापनों के लिए रीफ़्रेश दर.

ध्यान दें: Ad Manager के यूज़र इंटरफ़ेस (यूआई) में रीफ़्रेश रेट सेट करते समय, विज्ञापन अपने-आप सिर्फ़ तब रीफ़्रेश होता है, जब बैनर स्क्रीन पर दिखता हो.

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

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

AdWidget, Flutter की Widget क्लास से इनहेरिट होता है. इसका इस्तेमाल किसी भी दूसरे विजेट की तरह किया जा सकता है. 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!),
      ),
    ),
  ),
banner_ad_snippets.dart

जब विज्ञापन की ज़रूरत न हो, तो उसे डिस्पोज़ करना ज़रूरी है. dispose() को कॉल करने का सबसे सही तरीका यह है कि AdWidget को विजेट ट्री से हटाए जाने के बाद या AdManagerBannerAdListener.onAdFailedToLoad() कॉलबैक में इसे कॉल किया जाए.

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

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

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

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

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

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

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

छोटे हो जाने वाले बैनर विज्ञापन

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