I modelli nativi sono visualizzazioni complete di codice per gli annunci nativi, progettati per un'implementazione rapida e una modifica semplice. Con i modelli nativi, il plug-in fornisce layout Android e iOS predefiniti e puoi personalizzare lo stile degli asset nativi utilizzando un'API Dart.
Questa guida illustra come utilizzare l'API Dart per stilizzare le visualizzazioni della piattaforma sottostanti e visualizzare l'annuncio.
Prerequisiti
- Flutter 2.4.0 o versioni successive.
- Completa la Guida introduttiva.
- Acquisire familiarità con le opzioni per gli annunci nativi.
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. Il modo più semplice per caricare gli annunci di prova consiste nell'utilizzare il nostro ID unità pubblicitaria di prova dedicata per gli annunci nativi:
Android
ca-app-pub-3940256099942544/2247696110
iOS
ca-app-pub-3940256099942544/3986624511
Le unità pubblicitarie di test sono configurate per restituire annunci di prova per ogni richiesta. Pertanto, puoi utilizzarle nelle tue app durante la programmazione, il test e il debug. Devi semplicemente sostituirle con i tuoi ID unità pubblicitaria prima di pubblicare l'app.
Carica annuncio
L'esempio seguente carica un annuncio nativo utilizzando il modello nativo con dimensioni medium:
class NativeExampleState extends State<NativeExample> {
NativeAd? nativeAd;
bool _nativeAdIsLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final String _adUnitId = Platform.isAndroid
? 'ca-app-pub-3940256099942544/2247696110'
: 'ca-app-pub-3940256099942544/3986624511';
/// Loads a native ad.
void loadAd() {
_nativeAd = NativeAd(
adUnitId: _adUnitId,
listener: NativeAdListener(
onAdLoaded: (ad) {
debugPrint('$NativeAd loaded.');
setState(() {
_nativeAdIsLoaded = true;
});
},
onAdFailedToLoad: (ad, error) {
// Dispose the ad here to free resources.
debugPrint('$NativeAd failed to load: $error');
ad.dispose();
},
),
request: const AdRequest(),
// Styling
nativeTemplateStyle: NativeTemplateStyle(
// Required: Choose a template.
templateType: TemplateType.medium,
// Optional: Customize the ad's style.
mainBackgroundColor: Colors.purple,
cornerRadius: 10.0,
callToActionTextStyle: NativeTemplateTextStyle(
textColor: Colors.cyan,
backgroundColor: Colors.red,
style: NativeTemplateFontStyle.monospace,
size: 16.0),
primaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.red,
backgroundColor: Colors.cyan,
style: NativeTemplateFontStyle.italic,
size: 16.0),
secondaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.green,
backgroundColor: Colors.black,
style: NativeTemplateFontStyle.bold,
size: 16.0),
tertiaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.brown,
backgroundColor: Colors.amber,
style: NativeTemplateFontStyle.normal,
size: 16.0)))
..load();
}
}
Vedi
NativeTemplateStyle
e
NativeTemplateTextStyle
per le opzioni di stile disponibili.
Personalizza annuncio
Quando personalizzi un annuncio nativo utilizzando modelli nativi, la configurazione dell'interfaccia utente dell'annuncio verrà attivata nella classe NativeTemplateStyle, consentendoti di applicare lo stile di un intero annuncio nativo nel codice Dart.
Dimensioni modello
I modelli di annunci nativi Flutter sono disponibili in due tipi: TemplateType.small e
TemplateType.medium. Il modello piccolo è ideale per TableView o GridView, per gli annunci in-feed o ovunque sia necessaria una visualizzazione di annuncio rettangolare sottile. Il modello medio è pensato per rappresentare una visualizzazione di pagina da metà a tre quarti, il che è l'ideale per le pagine di destinazione o iniziali.
| Piccola | |
|---|---|
 Android |
 iOS |
| Medium | |
 Android |
 iOS |
Eventi degli annunci nativi
Per ricevere notifiche degli eventi relativi alle interazioni con gli annunci nativi, utilizza la proprietà listener dell'annuncio. Poi, implementa NativeAdListener per ricevere callback degli eventi annuncio.
class NativeExampleState extends State<NativeExample> {
NativeAd? _nativeAd;
bool _nativeAdIsLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final String _adUnitId = Platform.isAndroid
? 'ca-app-pub-3940256099942544/2247696110'
: 'ca-app-pub-3940256099942544/3986624511';
/// Loads a native ad.
void loadAd() {
_nativeAd = NativeAd(
adUnitId: _adUnitId,
listener: NativeAdListener(
onAdLoaded: (ad) {
print('$NativeAd loaded.');
setState(() {
_nativeAdIsLoaded = true;
});
},
onAdFailedToLoad: (ad, error) {
// Dispose the ad here to free resources.
print('$NativeAd failedToLoad: $error');
ad.dispose();
},
// Called when a click is recorded for a NativeAd.
onAdClicked: (ad) {},
// Called when an impression occurs on the ad.
onAdImpression: (ad) {},
// Called when an ad removes an overlay that covers the screen.
onAdClosed: (ad) {},
// Called when an ad opens an overlay that covers the screen.
onAdOpened: (ad) {},
// For iOS only. Called before dismissing a full screen view
onAdWillDismissScreen: (ad) {},
// Called when an ad receives revenue value.
onPaidEvent: (ad, valueMicros, precision, currencyCode) {},
),
request: const AdRequest(),
// Styling
nativeTemplateStyle: NativeTemplateStyle(
// Required: Choose a template.
templateType: TemplateType.medium,
// Optional: Customize the ad's style.
mainBackgroundColor: Colors.purple,
cornerRadius: 10.0,
callToActionTextStyle: NativeTemplateTextStyle(
textColor: Colors.cyan,
backgroundColor: Colors.red,
style: NativeTemplateFontStyle.monospace,
size: 16.0),
primaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.red,
backgroundColor: Colors.cyan,
style: NativeTemplateFontStyle.italic,
size: 16.0),
secondaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.green,
backgroundColor: Colors.black,
style: NativeTemplateFontStyle.bold,
size: 16.0),
tertiaryTextStyle: NativeTemplateTextStyle(
textColor: Colors.brown,
backgroundColor: Colors.amber,
style: NativeTemplateFontStyle.normal,
size: 16.0)))
..load();
}
}
Annuncio display
Per visualizzare un NativeAd 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 contenitore con una larghezza e un'altezza specificate. In caso contrario, l'annuncio potrebbe non essere visualizzato.
// Small template
final adContainer = ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 320, // minimum recommended width
minHeight: 90, // minimum recommended height
maxWidth: 400,
maxHeight: 200,
),
child: AdWidget(ad: _nativeAd!),
);
// Medium template
final adContainer = ConstrainedBox(
constraints: const BoxConstraints(
minWidth: 320, // minimum recommended width
minHeight: 320, // minimum recommended height
maxWidth: 400,
maxHeight: 400,
),
child: AdWidget(ad: _nativeAd!),
);
Elimina annuncio
NativeAd deve essere smaltito quando non è più necessario accedervi. La best practice per
quando chiamare dispose() è dopo che il valore AdWidget associato all'annuncio nativo
viene rimosso dalla struttura del widget e nel callback AdListener.onAdFailedToLoad().
Passaggi successivi
- Scopri di più sugli annunci nativi nella nostra guida pratica sugli annunci nativi.
- Consulta le norme e le linee guida sugli annunci nativi.
- Dai un'occhiata ad alcuni casi di successo dei clienti: case study 1, case study 2.