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:
/21775744923/example/adaptive-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 = '/21775744923/example/adaptive-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/D |
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, 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 = '/21775744923/example/adaptive-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()
o la richiamata.
È 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.