Gli annunci banner occupano uno spazio nel layout di un'app, nella parte superiore o inferiore della schermata 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 mostra come integrare gli annunci banner di AdMob in un'app Flutter. Oltre agli snippet di codice e alle istruzioni, include anche informazioni sul dimensionamento corretto dei banner.
Esegui 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 potrebbe essere sospeso.
Il modo più semplice per caricare gli annunci di prova è utilizzare il nostro ID unità pubblicitaria di test dedicato per i banner:
Android
ca-app-pub-3940256099942544/6300978111
iOS
ca-app-pub-3940256099942544/2934735716
Le unità pubblicitarie di test sono configurate in modo da restituire annunci di prova per ogni richiesta e puoi utilizzarle liberamente nelle tue app durante la programmazione, i test e il debug. Assicurati di sostituirli con i tuoi ID unità pubblicitaria prima di pubblicare l'app.
Carica un annuncio
Il seguente esempio crea l'istanza di 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
Nella tabella seguente sono elencate le dimensioni dei banner standard.
| Dimensioni in dp (LxA) | Descrizione | Costante AdSize |
|---|---|---|
| 320x50 | Banner standard | banner
|
| 320 x 100 | Banner grande | largeBanner
|
| 320x250 | Rettangolo medio | mediumRectangle
|
| 468 x 60 | Banner grandezza originale | fullBanner
|
| 728 x 90 | Classifica | leaderboard
|
| Larghezza fornita x Altezza adattiva | Banner adattivo | N/A |
Per definire una dimensione personalizzata per i banner, imposta il tuo AdSize preferito:
final AdSize adSize = AdSize(300, 50);
Eventi annuncio banner
Tramite BannerAdListener, puoi ascoltare gli eventi del ciclo di vita, ad esempio il momento in cui viene caricato un annuncio. Questo esempio implementa ogni metodo e registra un messaggio nella 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();
}
}
Mostra un annuncio banner
Per visualizzare un BannerAd come widget, devi creare un'istanza di 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 alla struttura del 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 una larghezza e un'altezza specificate. In caso contrario, l'annuncio potrebbe non essere visualizzato. Un BannerAd può essere
posizionato in un contenitore con dimensioni corrispondenti a quelle 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 relativa a quando chiamare dispose() è dopo la rimozione di AdWidget dalla struttura dei widget o nel callback BannerAdListener.onAdFailedToLoad().
È tutto. La tua app è ora pronta per la pubblicazione degli annunci banner.
Limitazione di 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 gli annunci banner in linea vengono visualizzati all'interno di visualizzazioni scorrevoli. Consigliamo di utilizzare questi tipi di banner solo su Android 10 o versioni successive. I banner con posizione fissa, ad esempio quelli ancorati, non sono interessati e possono essere utilizzati con prestazioni ottimali su tutti i livelli API Android.