Banner

Gli annunci banner occupano uno spazio all'interno del layout di un'app, nella parte superiore o inferiore della sullo schermo del dispositivo. Rimangono sullo schermo mentre gli utenti interagiscono con l'app e possono aggiornarsi automaticamente dopo un certo periodo di tempo.

Questa guida illustra come integrare gli annunci banner di AdMob in un l'app Flutter. Oltre agli snippet di codice e alle istruzioni, include informazioni sul dimensionamento corretto dei 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 attivi. In caso contrario, l'account verrà sospeso.

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

ca-app-pub-3940256099942544/6300978111

ca-app-pub-3940256099942544/2934735716

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

Carica un annuncio

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

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

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/6300978111'
    : 'ca-app-pub-3940256099942544/2934735716';

  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: AdSize.banner,
      listener: BannerAdListener(
        // 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('BannerAd failed to load: $error');
          // Dispose the ad here to free resources.
          ad.dispose();
        },
      ),
    )..load();
  }
}

Dimensioni dei banner

La tabella seguente elenca le dimensioni standard dei banner.

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

final AdSize adSize = AdSize(300, 50);

Eventi annuncio banner

Utilizzando BannerAdListener, puoi ascoltare gli eventi del ciclo di vita, come ad esempio quando un annuncio viene caricato. Questo esempio implementa ciascun metodo e registra un messaggio alla console:

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

  // TODO: replace this test ad unit with your own ad unit.
  final adUnitId = Platform.isAndroid
    ? 'ca-app-pub-3940256099942544/6300978111'
    : 'ca-app-pub-3940256099942544/2934735716';


  /// Loads a banner ad.
  void loadAd() {
    _bannerAd = BannerAd(
      adUnitId: adUnitId,
      request: const AdRequest(),
      size: AdSize.banner,
      listener: BannerAdListener(
        // 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('BannerAd 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 BannerAd come widget, devi creare un'istanza AdWidget con un annuncio supportato dopo aver chiamato load(). Puoi creare il widget prima chiamata load(), ma è necessario chiamare load() prima di aggiungerlo al widget albero di Natale.

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 un'opzione e larghezza e altezza. In caso contrario, l'annuncio potrebbe non essere pubblicato. Un BannerAd può essere posizionato in un contenitore con una dimensione corrispondente all'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 quando chiamare dispose() è dopo che AdWidget è stato rimosso dal struttura dei widget o nella sezione BannerAdListener.onAdFailedToLoad() di Google.

È 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 potrebbero avere un rendimento non ottimale quando mostri annunci banner in linea nelle visualizzazioni a scorrimento. Consigliamo solo utilizzando questi tipi di banner su Android 10 o versioni successive. I banner con posizione fissa poiché i banner ancorati non subiscono modifiche e possono essere utilizzati per ottenere prestazioni ottimali per tutti i livelli API Android.

Esempio completo su GitHub

Banner