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(); } }
Dimensioni dei banner
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);
Eventi annuncio banner
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.