Banner

Gli annunci banner occupano uno spazio all'interno del layout di un'app, nella parte superiore o inferiore dello schermo del dispositivo. Rimangono sullo schermo durante l'interazione degli utenti con l'app e possono aggiornarsi automaticamente dopo un determinato periodo di tempo.

Questa guida illustra come integrare gli annunci banner da Ad Manager in un'app Flutter. Oltre a snippet di codice e istruzioni, include anche informazioni su come dimensionare correttamente i banner.

Effettua sempre test con annunci di prova

Quando crei e testi le tue app, assicurati di utilizzare annunci di prova anziché annunci di produzione pubblicati. In caso contrario, l'account verrà sospeso.

Il modo più semplice per caricare annunci di prova è utilizzare il nostro ID unità pubblicitaria di prova dedicato per i banner:

  • /6499/example/banner

Le unità pubblicitarie di prova sono configurate in modo da restituire annunci di prova per ogni richiesta e puoi utilizzarle nelle tue app durante la programmazione, i test e il debug. Assicurati solo di sostituirli con i tuoi ID unità pubblicitaria prima di pubblicare l'app.

Carica un annuncio

L'esempio seguente crea un'istanza per un annuncio banner:

class BannerExampleState extends State<BannerExample> {
  AdManagerBannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/6499/example/banner';

  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: AdSize.banner,
      listener: AdManagerBannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('AdManagerBannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
      ),
    )..load();
  }
}

La tabella seguente elenca le dimensioni standard dei banner.

Dimensioni in dp (LxA) Descrizione Costante dimensione annuncio
320 x 50 Banner standard banner
320 x 100 Banner grande largeBanner
320x250 Rettangolo medio mediumRectangle
468 x 60 Banner a grandezza originale fullBanner
728 x 90 Classifica leaderboard
Larghezza x altezza adattiva fornita Banner adattivo N/A

Per definire le dimensioni del banner personalizzate, imposta il valore AdSize che preferisci:

final AdSize adSize = AdSize(300, 50);

Utilizzando AdManagerBannerAdListener, puoi ascoltare gli eventi del ciclo di vita, ad esempio il caricamento di un annuncio. Questo esempio implementa ogni metodo e registra un messaggio nella console:

class BannerExampleState extends State<BannerExample> {
  AdManagerBannerAd? _bannerAd;
  bool _isLoaded = false;

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = '/6499/example/banner';


  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = AdManagerBannerAd(
      adUnitId: adUnitId,
      request: const AdManagerAdRequest(),
      size: AdSize.banner,
      listener: AdManagerBannerAdListener(
        // Called when an ad is successfully received.
        onAdLoaded: (ad) {
          debugPrint('$ad loaded.');
          setState(() {
            _isLoaded = true;
          });
        },
        // Called when an ad request failed.
        onAdFailedToLoad: (ad, err) {
          debugPrint('AdManagerBannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
        // Called when an ad opens an overlay that covers the screen.
        onAdOpened: (Ad ad) {},
        // Called when an ad removes an overlay that covers the screen.
        onAdClosed: (Ad ad) {},
        // Called when an impression occurs on the ad.
        onAdImpression: (Ad ad) {},
      ),
    )..load();
  }
}

Mostrare un annuncio banner

Per visualizzare AdManagerBannerAd come widget, devi creare un'istanza AdWidget con un annuncio supportato dopo aver chiamato load(). Puoi creare il widget prima di chiamare load(), ma è necessario chiamare load() prima di aggiungerlo alla struttura ad albero dei widget.

AdWidget eredita dalla classe Widget di Flutter e può essere utilizzato come qualsiasi altro widget. Su iOS, assicurati di posizionare il widget in un widget con larghezza e altezza specificate. In caso contrario, l'annuncio potrebbe non essere pubblicato. Un AdManagerBannerAd può essere inserito in un contenitore con una dimensione corrispondente a quella dell'annuncio:

...
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!),
      ),
    ),
  )
}
...

Un annuncio deve essere eliminato quando non è più necessario accedervi. La best practice per chiamare dispose() è dopo la rimozione di AdWidget dalla struttura dei widget o nel callback AdManagerBannerAdListener.onAdFailedToLoad().

È tutto. L'app è ora pronta per mostrare annunci banner.

Limitazioni allo scorrimento su Android 9 e versioni precedenti

Siamo consapevoli che alcuni dispositivi meno recenti o meno potenti con Android 9 o versioni precedenti potrebbero avere prestazioni non ottimali quando vengono mostrati annunci banner in linea nelle visualizzazioni a scorrimento. Ti consigliamo di utilizzare questi tipi di banner solo su Android 10 o versioni successive. I banner con posizione fissa, come i banner ancorati, non sono interessati e possono essere utilizzati con prestazioni ottimali su tutti i livelli API Android.