स्क्रोल किए जा सकने वाले फ़ीड में बैनर विज्ञापनों को रीसाइकल करना

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

इस पेज पर, विज्ञापन कैश मेमोरी का साइज़ तय करने, यह देखने कि क्या BannerAd इंस्टेंस स्क्रीन से बाहर है, और कैश मेमोरी में सेव किए गए विज्ञापनों को सूची में फिर से असाइन करने के बारे में बताया गया है.

नीचे दी गई इमेज में दिखाया गया है कि स्क्रीन से बाहर मौजूद बैनर विज्ञापन, कैश मेमोरी में कैसे वापस आता है. साथ ही, उपयोगकर्ता के स्क्रोल करने पर, सूची में मौजूद किसी जगह पर उसका फिर से इस्तेमाल कैसे किया जाता है:

डायग्राम में दिखाया गया है कि बैनर विज्ञापन, स्क्रीन से स्क्रोल होकर विज्ञापन कैश मेमोरी में चला जाता है. इसके बाद, इसे स्क्रीन पर दिखने वाले फ़ीड में सबसे नीचे फिर से इस्तेमाल किया जाता है.

ज़रूरी शर्तें

आगे बढ़ने से पहले, स्क्रॉल करने वाले बैनर के लिए इनलाइन अडैप्टिव का इस्तेमाल करें.

सूची में असाइन की गई स्थितियों को ट्रैक करना

जब आपका उपयोगकर्ता स्क्रोल करता है, तब बैनर रीसाइक्लिंग की सुविधा, मेमोरी में BannerAd इंस्टेंस की सीमित संख्या को सेव रखती है. साथ ही, इन इंस्टेंस को सूची में अलग-अलग जगहों पर ले जाती है.

यह जानने के लिए कि किस विज्ञापन का दोबारा इस्तेमाल करना है, ट्रैक करें कि कैश मेमोरी में मौजूद हर विज्ञापन, सूची में किस जगह पर है.

अपने विजेट में यह स्थिति बनाए रखें:

  • BannerAd इंस्टेंस की तय साइज़ वाली कैश मेमोरी. आपने कैश मेमोरी का जो साइज़ सेट किया है वह एक बार में मेमोरी में सेव किए जाने वाले विज्ञापनों की ज़्यादा से ज़्यादा संख्या है.
  • विज्ञापन दिखाने का इंटरवल, जिससे यह तय होता है कि सूची में विज्ञापन कितनी बार दिखेगा.
  • एक पोज़िशन Map क्लास, जो हर BannerAd इंस्टेंस को उस सूची की पोज़िशन से जोड़ती है जहां इंस्टेंस मौजूद है. किसी विज्ञापन को रीसाइकल करते समय, इस Map क्लास में एंट्री को अपडेट करें, ताकि वह विज्ञापन की नई जगह पर रीडायरेक्ट हो.
  • यह एक साइज़ Map क्लास है. यह लोड किए गए हर विज्ञापन के लिए, प्लैटफ़ॉर्म से हल किया गया AdSize ऑब्जेक्ट सेव करती है. विज्ञापन लोड होने के बाद, इनलाइन अडैप्टिव बैनर की ऊंचाई का पता चलता है.

यहां दिए गए उदाहरण में, कैश मेमोरी में मौजूद हर विज्ञापन के लिए, असाइन की गई सूची की पोज़िशन को ट्रैक किया जाता है:

// Maximum number of banner ad instances kept in the cache.
static const int _cacheSize = 8;

// Spacing between banner ads. For example, index 0, 6, 12, and so on
// display ads.
static const int _adInterval = 6;

// The cache of allocated BannerAd instances.
final List<BannerAd> _banners = [];

// Maps each BannerAd instance to its currently assigned list item position.
final Map<BannerAd, int> _bannerPositions = {};

// Stores the platform-resolved size of each loaded banner ad.
final Map<BannerAd, AdSize> _bannerSizes = {};

कैश मेमोरी का साइज़ चुनें

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

साइज़ चुनने के लिए, यह तरीका अपनाएं:

  1. एक बार में स्क्रीन पर कितने विज्ञापन दिख सकते हैं, इसका अनुमान लगाने के लिए व्यूपोर्ट की ऊंचाई को विज्ञापन के एक इंटरवल की ऊंचाई से भाग दें.
  2. तेज़ी से स्क्रोल करने के दौरान, अलग हो रहे विज्ञापनों के लिए जगह जोड़ें.
  3. अगर आपको दिखता है कि रीसाइकल करने के लिए चुने गए विज्ञापन अब भी स्क्रीन पर दिख रहे हैं, तो कैश मेमोरी का साइज़ बढ़ाएं.

इस पेज पर दिए गए उदाहरण में, हर छह लाइनों के बाद एक विज्ञापन दिखाया गया है. साथ ही, इसमें आठ लाइनों की कैश मेमोरी का इस्तेमाल किया गया है. इस उदाहरण में, स्क्रीन पर एक साथ दिखने वाले कुछ विज्ञापनों के लिए जगह छोड़ी गई है.

यह जांच करना कि कोई विज्ञापन स्क्रीन पर दिख रहा है या नहीं

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

बैनर विज्ञापन को फिर से पाना और उसे रीसाइकल करना

जब सूची में किसी जगह के लिए बैनर का अनुरोध किया जाता है, तो यह तरीका अपनाएं:

  1. अगर उस जगह पर पहले से कोई विज्ञापन मौजूद है, तो उसका फिर से इस्तेमाल करें.
  2. अगर कैश मेमोरी पूरी नहीं है, तो विज्ञापन का अनुरोध करें.
  3. अगर कैश मेमोरी पूरी है, तो कैश किया गया कोई विज्ञापन चुनें. इसके बाद, पुष्टि करें कि विज्ञापन को फिर से असाइन करने से पहले, isMounted गेटर की वैल्यू false है.
  4. जब विजेट को विजेट ट्री से हटाया जाता है, तब कैश मेमोरी में मौजूद हर विज्ञापन पर dispose() वाले तरीके को कॉल करें.

यहां दिए गए उदाहरण में, बैनर विज्ञापन को फिर से पाने और उसे रीसाइकल करने का तरीका बताया गया है:

BannerAd _getRecycledBannerAd(BuildContext context, int bannerPosition) {
  // 1. If an ad is already mapped to this position, reuse it.
  final BannerAd? existingBanner = _bannerPositions.entries
      .firstWhereOrNull((entry) => entry.value == bannerPosition)
      ?.key;
  if (existingBanner != null) {
    return existingBanner;
  }

  // 2. If the cache is not full, allocate a new ad instance.
  if (_banners.length < _cacheSize) {
    final BannerAd newBanner = _createBannerAd(context);
    _banners.add(newBanner);
    _bannerPositions[newBanner] = bannerPosition;
    return newBanner;
  }

  // 3. Select an existing ad from the cache using modulo arithmetic.
  final BannerAd targetBanner = _banners[bannerPosition % _cacheSize];

  // 4. Verify the ad is detached from the screen before recycling.
  if (targetBanner.isMounted) {
    // If still on screen during fast scrolls, allocate a temporary instance.
    return _createBannerAd(context);
  } else {
    // Safe to reuse: reassign to the new position.
    _bannerPositions[targetBanner] = bannerPosition;
    return targetBanner;
  }
}

पूरे उदाहरण के लिए, Google Mobile Ads Flutter Plugin उदाहरण देखें.