Configurare gli annunci banner

Seleziona la piattaforma: Android iOS Unity Flutter Android (legacy)

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 aiuterà 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 da te.

Gli annunci banner adattivi ancorati sono annunci con proporzioni fisse anziché di dimensioni fisse. Le proporzioni sono simili a 320 x 50. Una volta specificata la larghezza intera disponibile, Google Mobile Ads Flutter Plugin 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 circondano l'annuncio rimangono invariati quando l'annuncio viene aggiornato.

Esegui sempre i test con gli annunci di prova

Durante la creazione e il test delle tue app, assicurati di utilizzare annunci di prova anziché annunci di prodotto. In caso contrario, il tuo account potrebbe essere sospeso.

Il modo più semplice per caricare annunci di prova è utilizzare il nostro ID unità pubblicitaria di test dedicato per i banner:

Android

ca-app-pub-3940256099942544/9214589741

iOS

ca-app-pub-3940256099942544/2435281174

Le unità pubblicitarie di test sono configurate per restituire annunci di test per ogni richiesta e puoi utilizzarle liberamente nelle tue app durante la programmazione, il test e il debug. Assicurati di sostituirli con i tuoi ID unità pubblicitaria prima di pubblicare l'app.

Ottieni le dimensioni dell'annuncio

I banner adattivi di grandi dimensioni offrono un formato più grande progettato per layout senza scorrimento. Rispetto ai banner adattivi ancorati standard, questi banner consentono un'altezza massima maggiore (fino al 20% dell'altezza dello schermo, tra 50 e 150 dp). Questo spazio più ampio è ottimizzato per i contenuti video.

Per richiedere un annuncio banner con le dimensioni corrette, segui questi passaggi:

  1. Ottieni la larghezza dello schermo del dispositivo in pixel indipendenti dalla densità (dp) utilizzando MediaQuery.of(context). Se non vuoi utilizzare l'intera larghezza dello schermo, puoi impostare una larghezza personalizzata.

  2. Utilizza il metodo statico appropriato nella classe AdSize per ottenere un oggetto AdSize. Ad esempio, utilizza AdSize.getLargeAnchoredAdaptiveBannerAdSize(int width) per ottenere le dimensioni dell'annuncio per l'orientamento corrente.

// Get an AnchoredAdaptiveBannerAdSize before loading the ad.
final size = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(
  MediaQuery.sizeOf(context).width.truncate(),
);

Carica un annuncio

L'esempio seguente carica un annuncio banner:

void _loadAd() async {
  // Get an AnchoredAdaptiveBannerAdSize before loading the ad.
  final size = await AdSize.getLargeAnchoredAdaptiveBannerAdSize(
    MediaQuery.sizeOf(context).width.truncate(),
  );

  if (size == null) {
    // Unable to get width of anchored banner.
    return;
  }

  unawaited(
    BannerAd(
      adUnitId: "_adUnitId",
      request: const AdRequest(),
      size: size,
      listener: BannerAdListener(
        onAdLoaded: (ad) {
          // Called when an ad is successfully received.
          debugPrint('Ad was loaded.');
          setState(() {
            _bannerAd = ad as BannerAd;
          });
        },
        onAdFailedToLoad: (ad, err) {
          // Called when an ad request failed.
          debugPrint('Ad failed to load with error: $err');
          ad.dispose();
        },
      ),
    ).load(),
  );
}

Sostituisci _adUnitId con l'ID della tua unità pubblicitaria.

Tramite l'utilizzo di BannerAdListener, 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:

onAdOpened: (Ad ad) {
  // Called when an ad opens an overlay that covers the screen.
  debugPrint('Ad was opened.');
},
onAdClosed: (Ad ad) {
  // Called when an ad removes an overlay that covers the screen.
  debugPrint('Ad was closed.');
},
onAdImpression: (Ad ad) {
  // Called when an impression occurs on the ad.
  debugPrint('Ad recorded an impression.');
},
onAdClicked: (Ad ad) {
  // Called when a click event occurs on the ad.
  debugPrint('Ad was clicked.');
},
onAdWillDismissScreen: (Ad ad) {
  // iOS only. Called before dismissing a full screen view.
  debugPrint('Ad will be dismissed.');
},

Aggiorna un annuncio

Se hai configurato l'unità pubblicitaria per l'aggiornamento, non è necessario richiedere un altro annuncio quando l'annuncio non viene caricato. Google Mobile Ads Flutter Plugin rispetta qualsiasi frequenza di aggiornamento specificata nell'interfaccia utente di AdMob. Se non hai attivato l'aggiornamento, invia una nuova richiesta. Per maggiori dettagli sull'aggiornamento delle unità pubblicitarie, ad esempio l'impostazione di una frequenza di aggiornamento, consulta Utilizza l'aggiornamento automatico per gli annunci banner.

Visualizza un annuncio banner

Per visualizzare un BannerAd come widget, devi creare un'istanza di un 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, l'annuncio potrebbe non essere visualizzato. Un BannerAd può essere inserito in un contenitore con dimensioni corrispondenti 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 stabilire quando chiamare dispose() è dopo la rimozione di AdWidget dall'albero dei widget o nel callback BannerAdListener.onAdFailedToLoad().

È tutto. La tua app è ora pronta per mostrare 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 prestazioni non ottimali durante la visualizzazione di annunci banner incorporati all'interno di 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 un rendimento ottimale su tutti i livelli API Android.

Esempio completo su GitHub

Per visualizzare l'esempio completo, consulta la demo dell'API.

Scopri di più su altri tipi di banner

Acquisisci familiarità con 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. I banner adattivi in linea sono consigliati rispetto agli annunci banner adattivi ancorati per le app che inseriscono annunci banner in contenuti scorrevoli. Per maggiori dettagli, consulta la sezione sui banner adattivi in linea.

Banner comprimibili

Gli annunci banner comprimibili sono annunci banner che inizialmente vengono presentati come un overlay più grande, con un pulsante per comprimere l'annuncio in dimensioni più piccole. Valuta la possibilità di utilizzare questo banner per ottimizzare ulteriormente il rendimento. Per maggiori dettagli, consulta la sezione sugli annunci banner comprimibili.