Mendaur ulang iklan banner di feed yang dapat di-scroll

Dalam daftar scroll panjang atau tak terbatas, seperti feed berita atau feed media sosial, membuat iklan banner untuk setiap posisi item dapat menyebabkan konsumsi memori yang tinggi dan jeda UI. Untuk meningkatkan performa, gunakan daur ulang banner untuk mempertahankan cache berukuran kecil dan tetap dari instance BannerAd dan menggunakan kembali iklan di luar layar saat pengguna men-scroll.

Halaman ini membahas cara menentukan ukuran cache iklan, memeriksa apakah instance BannerAd berada di luar layar, dan menetapkan ulang iklan yang di-cache ke posisi daftar.

Gambar berikut menunjukkan cara iklan banner di luar layar kembali ke cache dan digunakan kembali di posisi daftar saat pengguna men-scroll:

Prasyarat

Sebelum Anda melanjutkan, gunakan banner adaptif inline untuk banner yang dapat di-scroll.

Melacak posisi daftar yang ditetapkan

Saat pengguna men-scroll, daur ulang banner akan menyimpan sejumlah kecil instance BannerAd dalam memori dan memindahkan instance ini di antara posisi daftar.

Untuk mengetahui iklan mana yang akan digunakan kembali, lacak posisi daftar yang ditempati setiap iklan dalam cache.

Pertahankan status berikut di widget Anda:

• Cache berukuran tetap dari instance BannerAd. Ukuran yang Anda tetapkan untuk cache adalah jumlah maksimum iklan yang disimpan dalam memori sekaligus.
• Interval iklan yang menentukan frekuensi iklan muncul dalam daftar.
• Class posisi Map yang mengaitkan setiap instance BannerAd dengan posisi daftar yang ditempati instance. Saat Anda mendaur ulang iklan, perbarui entri di class Map ini agar mengarah ke posisi terbaru.
• Class ukuran Map yang menyimpan objek AdSize yang diselesaikan platform untuk setiap iklan yang dimuat. Setelah iklan dimuat, tinggi banner adaptif inline diketahui.

Contoh berikut melacak posisi daftar yang ditetapkan untuk setiap iklan dalam cache:

// 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

Pilih ukuran cache

Buat cache lebih besar daripada jumlah maksimum iklan yang dapat muncul di layar pada saat yang sama. Jika cache lebih kecil dari ukuran tersebut, iklan yang dipilih untuk didaur ulang sering kali masih terlihat, dan aplikasi Anda mengalokasikan iklan tambahan alih-alih menggunakan kembali iklan.

Untuk memilih ukuran, lakukan hal berikut:

1. Perkirakan jumlah iklan yang muat di layar sekaligus dengan membagi tinggi area pandang dengan tinggi satu interval iklan.
2. Menambahkan ruang untuk iklan yang masih terlepas selama scroll cepat.
3. Jika Anda melihat bahwa iklan yang dipilih untuk didaur ulang masih ada di layar, tingkatkan ukuran cache.

Contoh di halaman ini menampilkan iklan setiap enam baris dan menggunakan cache delapan. Contoh ini menyisakan ruang untuk beberapa iklan yang terlihat di layar sekaligus.

Memeriksa apakah iklan ada di layar

Semua class Google Mobile Ads Flutter Plugin yang merender tampilan platform menerapkan class AdWithView dan menyediakan getter isMounted. Sebelum menetapkan ulang iklan yang di-cache ke posisi daftar, periksa getter isMounted untuk mengonfirmasi bahwa iklan telah di-scroll ke luar layar dan aman untuk digunakan kembali.

Mengambil dan mendaur ulang iklan banner

Saat daftar meminta banner untuk posisi tertentu, lakukan hal berikut:

1. Menggunakan kembali iklan yang sudah ditetapkan ke posisi tersebut, jika ada.
2. Jika cache tidak penuh, minta iklan.
3. Jika cache penuh, pilih iklan yang di-cache dan verifikasi bahwa getter isMounted adalah nilai false sebelum menetapkan ulang iklan.
4. Panggil metode dispose() di setiap iklan dalam cache saat widget dihapus dari hierarki widget.

Contoh berikut mengambil dan mendaur ulang iklan banner:

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

Untuk contoh lengkapnya, lihat contoh Google Mobile Ads Flutter Plugin.