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 ti aiuta a iniziare a utilizzare gli annunci banner adattivi ancorati. I banner adattivi ancorati ottimizzano le dimensioni dell'annuncio per ogni dispositivo utilizzando una larghezza dell'annuncio specificata.
Gli annunci banner ancorati adattivi sono annunci con proporzioni fisse e non annunci con dimensioni fisse. Le proporzioni sono simili a quelle di 320 x 50. Una volta specificata la larghezza massima disponibile, l'SDK Google Mobile Ads restituisce un annuncio con l'altezza ottimale per quella larghezza. L'altezza ottimale dell'annuncio rimane costante nelle diverse richieste di annunci e i contenuti che lo circondano rimangono invariati quando l'annuncio viene aggiornato.
Esegui sempre test con annunci di prova
Quando crei e testi le tue app, assicurati di utilizzare annunci di prova anziché annunci pubblicati in produzione. In caso contrario, il tuo account potrebbe essere sospeso.
Il modo più semplice per caricare gli annunci di prova è utilizzare il nostro ID unità pubblicitaria di prova dedicato per i banner:
/21775744923/example/adaptive-banner
Le unità pubblicitarie di test sono configurate per restituire annunci di test per ogni richiesta e puoi utilizzarle nelle tue app durante la codifica, i test e il debug. Assicurati solo di sostituirli con i tuoi ID unità pubblicitarie prima di pubblicare l'app.
Ottenere le dimensioni dell'annuncio
Per richiedere un annuncio banner con le dimensioni corrette:
Ottieni la larghezza dello schermo del dispositivo in pixel indipendenti dalla densità (dp) utilizzando
MediaQuery.of(context). Se non vuoi utilizzare la larghezza a schermo intero, puoi impostare la larghezza che preferisci.Utilizza il metodo statico appropriato della classe
AdSizeper ottenere un oggettoAdSize. Ad esempio, utilizzaAdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(int width)per ottenere le dimensioni dell'annuncio per l'orientamento corrente.
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.sizeOf(context).width.truncate());
Carica un annuncio
L'esempio seguente esegue l'inizializzazione di 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() async {
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.sizeOf(context).width.truncate());
_bannerAd = AdManagerBannerAd(
adUnitId: adUnitId,
request: const AdManagerAdRequest(),
size: size,
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();
}
}
Eventi degli annunci banner
Tramite AdManagerBannerAdListener, puoi ascoltare gli eventi del ciclo di vita, ad esempio quando viene caricato 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 = '/21775744923/example/adaptive-banner';
/// Loads a banner ad.
void loadAd() async {
// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(
MediaQuery.sizeOf(context).width.truncate());
_bannerAd = AdManagerBannerAd(
adUnitId: adUnitId,
request: const AdManagerAdRequest(),
size: size,
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();
}
}
Aggiornare un annuncio
Se hai configurato l'aggiornamento dell'unità pubblicitaria, non devi richiedere un altro annuncio quando non riesce a caricarsi. L'SDK Google Mobile Ads rispetta qualsiasi frequenza di aggiornamento specificata nell'interfaccia utente di Ad Manager. Se non hai attivato il aggiornamento, invia una nuova richiesta. Per ulteriori dettagli sull'aggiornamento delle unità pubblicitarie, ad esempio sull'impostazione di una frequenza di aggiornamento, consulta Frequenza di aggiornamento degli annunci nelle app mobile.
Mostrare un annuncio banner
Per visualizzare un AdManagerBannerAd 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 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 larghezza e altezza specificate. In caso contrario, il tuo annuncio potrebbe non essere visualizzato. Un AdManagerBannerAd
puoi essere inserito 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 per sapere quando chiamare dispose() è dopo la rimozione di AdWidget dall'albero dei widget o nel callback di AdManagerBannerAdListener.onAdFailedToLoad().
È tutto. La tua app è ora pronta per mostrare gli annunci banner.
Limitazione dello 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. 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 un rendimento ottimale su tutti i livelli dell'API Android.
Scopri di più su altri tipi di banner
Acquisisci familiarità con gli altri tipi di banner definiti in questa sezione per la tua applicazione Flutter.
Banner adattivi in linea
I banner adattivi in linea hanno un'altezza variabile e sono più grandi e più alti rispetto ai banner adattivi ancorati. Per le app che posizionano annunci banner in contenuti scorrevoli, è consigliabile utilizzare i banner adattivi in linea anziché gli annunci banner adattivi ancorati. Per maggiori dettagli, consulta la sezione sui banner adattabili in linea.
Banner comprimibili
Gli annunci banner comprimibili sono annunci banner inizialmente presentati come overlay più grandi, con un pulsante per comprimere l'annuncio in modo da ridurne le dimensioni. Valuta la possibilità di utilizzare questo banner per ottimizzare ulteriormente il rendimento. Per maggiori dettagli, consulta gli annunci banner comprimibili.