I banner adattivi sono la nuova generazione di annunci adattabili che massimizzano il rendimento ottimizzando le dimensioni degli annunci per ciascun dispositivo. Migliorare i banner a dimensioni fisse, che supportavano solo altezze fisse, i banner adattivi consentono agli sviluppatori di specificare la larghezza dell'annuncio e di utilizzarla per determinare le dimensioni ottimali degli annunci.
Per scegliere la dimensione migliore per l'annuncio, i banner adattivi in linea utilizzano altezze massime invece di altezze fisse. Ciò si traduce in opportunità per migliorare il rendimento.
Quando utilizzare i banner adattivi in linea
I banner adattivi in linea sono banner più grandi e più alti rispetto ai banner adattivi ancorati. Hanno un'altezza variabile e possono essere alte quanto lo schermo del dispositivo.
Sono destinati a essere inseriti in contenuti scorrevoli, ad esempio:
Prerequisiti
- Segui le istruzioni della Guida introduttiva su come importare il plug-in Flutter annunci per dispositivi mobili.
Prima di iniziare
Quando implementi i banner adattivi nella tua app, tieni presente quanto segue:
Assicurati di utilizzare la versione più recente dell'SDK Google Mobile Ads e, se usi la mediazione, le versioni più recenti degli adattatori di mediazione.
Le dimensioni dei banner adattivi incorporati sono progettate per funzionare al meglio quando viene utilizzata l'intera larghezza disponibile. Nella maggior parte dei casi, si tratterà dell'intera larghezza dello schermo del dispositivo in uso. Assicurati di prendere in considerazione le aree sicure applicabili.
Potresti dover aggiornare o creare nuovi elementi pubblicitari per supportare le dimensioni adattive. Scopri di più.
I metodi per ottenere le dimensioni dell'annuncio sono
AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width)AdSize.getLandscapeInlineAdaptiveBannerAdSize(int width)AdSize.getPortraitInlineAdaptiveBannerAdSize(int width)AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight)
Quando utilizzi le API dei banner adattivi incorporati, l'SDK Google Mobile Ads restituisce un
AdSizecon la larghezza specificata e un flag in linea. L'altezza può essere pari a zero omaxHeight, a seconda dell'API utilizzata. L'altezza effettiva dell'annuncio viene resa disponibile al momento della restituzione.Un banner adattivo incorporato è progettato per essere inserito in contenuti scorrevoli. Il banner può avere l'altezza dello schermo del dispositivo o essere limitato da un'altezza massima, a seconda dell'API.
Implementazione
Per implementare un semplice banner adattivo in linea, procedi nel seguente modo.
- Ottieni le dimensioni di un annuncio banner adattivo incorporato. Le dimensioni ottenute saranno utilizzate
per richiedere il banner adattivo. Per ottenere le dimensioni dell'annuncio adattivo, assicurati di:
- Imposta la larghezza del dispositivo in uso in pixel indipendenti dalla densità oppure imposta una larghezza personalizzata se non vuoi utilizzare l'intera larghezza dello schermo.
Puoi utilizzare
MediaQuery.of(context)per ottenere la larghezza dello schermo. - Utilizza i metodi statici appropriati per la classe delle dimensioni degli annunci, ad esempio
AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(int width)per ottenere un oggettoAdSizeadattivo incorporato per l'orientamento corrente. - Se vuoi limitare l'altezza del banner, puoi utilizzare il metodo statico
AdSize.getInlineAdaptiveBannerAdSize(int width, int maxHeight).
- Imposta la larghezza del dispositivo in uso in pixel indipendenti dalla densità oppure imposta una larghezza personalizzata se non vuoi utilizzare l'intera larghezza dello schermo.
Puoi utilizzare
- Crea un oggetto
AdManagerBannerAdcon l'ID unità pubblicitaria, le dimensioni dell'annuncio adattivo e un oggetto richiesta di annuncio. - Carica l'annuncio.
- Nel callback
onAdLoaded, utilizzaAdManagerBannerAd.getPlatformAdSize()per ottenere le dimensioni aggiornate dell'annuncio della piattaforma e aggiornare l'altezza del contenitoreAdWidget.
Esempio di codice
Di seguito è riportato un widget di esempio che carica un banner adattivo in linea che si adatta alla larghezza dello schermo, tenendo conto dei riquadri:
import 'package:flutter/material.dart';
import 'package:google_mobile_ads/google_mobile_ads.dart';
/// This example demonstrates inline adaptive banner ads.
///
/// Loads and shows an inline adaptive banner ad in a scrolling view,
/// and reloads the ad when the orientation changes.
class InlineAdaptiveExample extends StatefulWidget {
@override
_InlineAdaptiveExampleState createState() => _InlineAdaptiveExampleState();
}
class _InlineAdaptiveExampleState extends State<InlineAdaptiveExample> {
static const _insets = 16.0;
AdManagerBannerAd? _inlineAdaptiveAd;
bool _isLoaded = false;
AdSize? _adSize;
late Orientation _currentOrientation;
double get _adWidth => MediaQuery.of(context).size.width - (2 * _insets);
@override
void didChangeDependencies() {
super.didChangeDependencies();
_currentOrientation = MediaQuery.of(context).orientation;
_loadAd();
}
void _loadAd() async {
await _inlineAdaptiveAd?.dispose();
setState(() {
_inlineAdaptiveAd = null;
_isLoaded = false;
});
// Get an inline adaptive size for the current orientation.
AdSize size = AdSize.getCurrentOrientationInlineAdaptiveBannerAdSize(
_adWidth.truncate());
_inlineAdaptiveAd = AdManagerBannerAd(
// TODO: replace with your own ad unit.
adUnitId: '<your-ad-unit>',
size: size,
request: AdManagerAdRequest(),
listener: AdManagerBannerAdListener(
onAdLoaded: (Ad ad) async {
print('Inline adaptive banner loaded: ${ad.responseInfo}');
// After the ad is loaded, get the platform ad size and use it to
// update the height of the container. This is necessary because the
// height can change after the ad is loaded.
AdManagerBannerAd bannerAd = (ad as AdManagerBannerAd);
final AdSize? size = await bannerAd.getPlatformAdSize();
if (size == null) {
print('Error: getPlatformAdSize() returned null for $bannerAd');
return;
}
setState(() {
_inlineAdaptiveAd = bannerAd;
_isLoaded = true;
_adSize = size;
});
},
onAdFailedToLoad: (Ad ad, LoadAdError error) {
print('Inline adaptive banner failedToLoad: $error');
ad.dispose();
},
),
);
await _inlineAdaptiveAd!.load();
}
/// Gets a widget containing the ad, if one is loaded.
///
/// Returns an empty container if no ad is loaded, or the orientation
/// has changed. Also loads a new ad if the orientation changes.
Widget _getAdWidget() {
return OrientationBuilder(
builder: (context, orientation) {
if (_currentOrientation == orientation &&
_inlineAdaptiveAd != null &&
_isLoaded &&
_adSize != null) {
return Align(
child: Container(
width: _adWidth,
height: _adSize!.height.toDouble(),
child: AdWidget(
ad: _inlineAdaptiveAd!,
),
));
}
// Reload the ad if the orientation changes.
if (_currentOrientation != orientation) {
_currentOrientation = orientation;
_loadAd();
}
return Container();
},
);
}
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: Text('Inline adaptive banner example'),
),
body: Center(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: _insets),
child: ListView.separated(
itemCount: 20,
separatorBuilder: (BuildContext context, int index) {
return Container(
height: 40,
);
},
itemBuilder: (BuildContext context, int index) {
if (index == 10) {
return _getAdWidget();
}
return Text(
'Placeholder text',
style: TextStyle(fontSize: 24),
);
},
),
),
));
@override
void dispose() {
super.dispose();
_inlineAdaptiveAd?.dispose();
}
}