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 determinato periodo di tempo.

Questa guida illustra come integrare gli annunci banner di Ad Manager 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 banner:

  • /6499/example/banner

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

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, come ad esempio quando un annuncio viene caricato. Questo esempio implementa ciascun metodo e registra un messaggio alla 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 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. AdManagerBannerAd 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 AdManagerBannerAdListener.onAdFailedToLoad() di Google.

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

Limitazioni allo scorrimento su Android 9 e versioni precedenti

Siamo consapevoli del fatto 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.