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

प्लैटफ़ॉर्म चुनें: Android नई सुविधा Android iOS Unity Flutter

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

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

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

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

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

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

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

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

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

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

  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(),
);

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

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

void _loadAd() 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;
  }

  BannerAd(
    adUnitId: "_adUnitId",
    request: const AdRequest(),
    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();
}

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

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

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 an 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.");
},

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

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

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

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

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

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

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

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

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

बैनर के अन्य टाइप के बारे में जानें

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

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

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

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

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