Riciclare gli annunci banner nei feed scorrevoli

Nelle liste a scorrimento continuo o infinito, come i feed di notizie o i feed social, la creazione di un annuncio banner per ogni posizione dell'elemento può comportare un elevato consumo di memoria e un ritardo dell'interfaccia utente. Per migliorare le prestazioni, utilizza il riciclo dei banner per mantenere una cache di dimensioni ridotte e fisse di istanze BannerAd e riutilizzare gli annunci fuori schermo mentre l'utente scorre.

Questa pagina illustra come dimensionare una cache degli annunci, verificare se un'istanza di BannerAd è fuori dallo schermo e riassegnare gli annunci memorizzati nella cache alle posizioni dell'elenco.

L'immagine seguente mostra come un annuncio banner fuori schermo torna nella cache e viene riutilizzato in una posizione di elenco mentre l'utente scorre la pagina:

Prerequisiti

Prima di continuare, utilizza i banner adattivi in linea per i banner scorrevoli.

Monitorare le posizioni assegnate negli elenchi

Man mano che l'utente scorre, il riciclo dei banner mantiene in memoria un numero limitato di istanze di BannerAd e le sposta tra le posizioni dell'elenco.

Per sapere quale annuncio riutilizzare, monitora la posizione nell'elenco occupata da ogni annuncio nella cache.

Mantieni il seguente stato nel widget:

• Una cache di dimensioni fisse di BannerAd istanze. La dimensione impostata per la cache è il numero massimo di annunci memorizzati contemporaneamente.
• Un intervallo di annunci che determina la frequenza con cui un annuncio viene visualizzato nell'elenco.
• Una classe di posizione Map che associa ogni istanza BannerAd alla posizione nell'elenco occupata dall'istanza. Quando ricicli un annuncio, aggiorna la voce in questa classe Map in modo che punti all'ultima posizione.
• Una classe Map size che memorizza l'oggetto AdSize risolto dalla piattaforma per ogni annuncio caricato. Dopo il caricamento dell'annuncio, le altezze dei banner adattivi in linea sono note.

L'esempio seguente monitora le posizioni dell'elenco assegnate per ogni annuncio nella 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

Scegliere una dimensione della cache

Aumenta le dimensioni della cache in modo che siano superiori al numero massimo di annunci che possono essere visualizzati sullo schermo contemporaneamente. Se la cache è più piccola di questa dimensione, l'annuncio selezionato per il riciclo è spesso ancora visibile e la tua app alloca annunci aggiuntivi anziché riutilizzare gli annunci.

Per scegliere una dimensione:

1. Per stimare quanti annunci possono essere visualizzati contemporaneamente sullo schermo, dividi l'altezza dell'area visibile per l'altezza di un intervallo pubblicitario.
2. Aggiungi spazio per gli annunci che si stanno ancora staccando durante lo scorrimento rapido.
3. Se vedi che gli annunci selezionati per il riciclo sono ancora sullo schermo, aumenta la dimensione della cache.

L'esempio in questa pagina mostra un annuncio ogni sei righe e utilizza una cache di otto. Questo esempio lascia spazio ai pochi annunci visibili sullo schermo contemporaneamente.

Controllare se un annuncio è sullo schermo

Tutte le classi Google Mobile Ads Flutter Plugin che eseguono il rendering delle visualizzazioni della piattaforma implementano la classe AdWithView e forniscono un getter isMounted. Prima di riassegnare un annuncio memorizzato nella cache a una posizione dell'elenco, controlla il getter isMounted per verificare che l'annuncio sia uscito dallo schermo e possa essere riutilizzato in sicurezza.

Recuperare e riciclare un annuncio banner

Quando l'elenco richiede un banner per una determinata posizione, procedi nel seguente modo:

1. Riutilizza l'annuncio già assegnato a quella posizione, se esistente.
2. Se la cache non è piena, richiedi un annuncio.
3. Se la cache è piena, seleziona un annuncio memorizzato nella cache e verifica che il getter isMounted sia il valore false prima di riassegnare l'annuncio.
4. Chiama il metodo dispose() su ogni annuncio nella cache quando il widget viene rimosso dall'albero dei widget.

L'esempio seguente recupera e ricicla un annuncio 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

Per l'esempio completo, consulta l'esempio di Google Mobile Ads Flutter Plugin.