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

Durante la creazione e il test delle 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 per i 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, ad esempio 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 di chiamare load(), ma load() deve essere chiamato prima di aggiungerlo all'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 un'opzione e larghezza e altezza. In caso contrario, il tuo annuncio potrebbe non essere visualizzato. 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 sapere quando chiamare dispose() è dopo la rimozione di AdWidget dall'albero dei widget o nel callback di BannerAdListener.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 un rendimento non ottimale quando vengono visualizzati annunci banner in linea nelle visualizzazioni con scorrimento. Consigliamo solo utilizzando questi tipi di banner su Android 10 o versioni successive. I banner con posizione fissa, come i banner ancorati, non sono interessati e possono essere utilizzati con un rendimento ottimale su tutti i livelli dell'API Android.

Esempio completo su GitHub

Banner