รีไซเคิลโฆษณาแบนเนอร์ในฟีดที่เลื่อนได้

ในรายการแบบเลื่อนยาวหรือแบบเลื่อนไม่สิ้นสุด เช่น ฟีดข่าวหรือฟีดโซเชียล การสร้างแบนเนอร์สำหรับตำแหน่งของทุกรายการอาจทำให้การใช้หน่วยความจำสูง และ UI ทำงานช้า เพื่อปรับปรุงประสิทธิภาพ ให้ใช้การรีไซเคิลแบนเนอร์เพื่อ รักษาแคชขนาดเล็กแบบคงที่ของอินสแตนซ์ 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 = {};
inline_adaptive_banner_snippets.dart

เลือกขนาดแคช

ตั้งค่าแคชให้มีขนาดใหญ่กว่าจำนวนโฆษณาสูงสุดที่สามารถปรากฏบนหน้าจอ พร้อมกัน หากแคชน้อยกว่าขนาดดังกล่าว โฆษณาที่เลือกสำหรับการ รีไซเคิลมักจะยังคงมองเห็นได้ และแอปจะจัดสรรโฆษณาเพิ่มเติม แทนที่จะนำโฆษณากลับมาใช้ซ้ำ

หากต้องการเลือกขนาด ให้ทำดังนี้

1. ประเมินจำนวนโฆษณาที่พอดีกับหน้าจอพร้อมกันโดยการหารความสูงของวิวพอร์ต ด้วยความสูงของช่วงเวลาโฆษณา 1 รายการ
2. เพิ่มพื้นที่สำหรับโฆษณาที่ยังคงแยกออกในระหว่างการเลื่อนอย่างรวดเร็ว
3. หากเห็นว่าโฆษณาที่เลือกเพื่อรีไซเคิลยังคงอยู่บนหน้าจอ ให้เพิ่มขนาดแคช

ตัวอย่างในหน้านี้แสดงโฆษณาทุกๆ 6 แถวและใช้แคช 8 รายการ ตัวอย่างนี้จะเว้นที่ว่างสำหรับโฆษณาไม่กี่รายการที่มองเห็นได้บนหน้าจอพร้อมกัน

ตรวจสอบว่าโฆษณาอยู่บนหน้าจอหรือไม่

Google Mobile Ads Flutter Plugin คลาสทั้งหมดที่แสดงมุมมองแพลตฟอร์มจะใช้คลาส AdWithView และมีตัวรับค่า isMounted ก่อนที่จะกำหนดโฆษณาที่แคชไว้ให้กับตำแหน่งในรายการอีกครั้ง ให้ตรวจสอบisMounted Getter เพื่อยืนยันว่าโฆษณาได้เลื่อนออกนอกหน้าจอและนำกลับมาใช้ซ้ำได้อย่างปลอดภัย

ดึงและรีไซเคิลโฆษณาแบนเนอร์

เมื่อรายการขอแบนเนอร์สำหรับตำแหน่งที่ระบุ ให้ทำดังนี้

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;
  }
}
inline_adaptive_banner_snippets.dart

ดูตัวอย่างทั้งหมดได้ที่Google Mobile Ads Flutter Pluginตัวอย่าง