I modelli nativi sono visualizzazioni con completamento di codice per i tuoi annunci nativi, progettate per implementazione e facilità di modifica. Con i modelli nativi, il plug-in fornisce layout Android e iOS predefiniti e puoi personalizzare lo stile degli asset nativi con un'API Dart.
Questa guida illustra come utilizzare l'API Dart per stilizzare la struttura sottostante visualizzazioni della piattaforma e eseguire il rendering dell'annuncio.
Prerequisiti
- Flutter 2.4.0 o versioni successive.
- Completa la Guida introduttiva.
- Acquisisci familiarità con le opzioni per gli annunci nativi.
Effettua sempre test con annunci di prova
Durante la creazione e il test delle tue app, assicurati di utilizzare annunci di prova anziché annunci di produzione attivi. Il modo più semplice per caricare gli annunci di prova è utilizzare il nostro ID unità pubblicitaria di prova per gli annunci nativi:
/6499/example/native
Le unità pubblicitarie di prova sono configurate in modo da restituire annunci di prova per ogni richiesta, puoi utilizzarle nelle tue app durante la programmazione, i test il debug: verifica solo di sostituirli con gli ID delle tue unità pubblicitarie prima e pubblicare l'app.
Carica annuncio
L'esempio seguente carica un annuncio nativo utilizzando il formato nativo delle dimensioni medium
modello:
class NativeExampleState extends State<NativeExample> {
NativeAd? nativeAd;
bool _nativeAdIsLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final _adUnitId = '/6499/example/native';
/// 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 AdManagerAdRequest(),
// 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();
}
}
Consulta
NativeTemplateStyle
e
NativeTemplateTextStyle
per visualizzare le opzioni di stile disponibili.
Personalizza annuncio
Quando personalizzi un annuncio nativo utilizzando modelli nativi, la configurazione dell'interfaccia utente
saranno inclusi nel corso NativeTemplateStyle
, consentendoti di applicare uno stile all'intero
un annuncio nativo nel codice Dart.
Dimensioni del modello
I modelli di annunci nativi Flutter sono di 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 dell'annuncio rettangolare sottile. La
di pagina media deve essere una visualizzazione di pagina da metà a tre quarti, ovvero
ideale per le pagine di destinazione
o iniziali.
Piccolo | |
---|---|
![]() Android |
![]() iOS |
Medio | |
![]() Android |
![]() iOS |
Eventi di annunci nativi
Per ricevere notifiche su eventi correlati alle interazioni con gli annunci nativi, utilizza il
listener
proprietà dell'annuncio. Poi implementa
NativeAdListener
per ricevere i callback eventi di annuncio.
class NativeExampleState extends State<NativeExample> {
NativeAd? _nativeAd;
bool _nativeAdIsLoaded = false;
// TODO: replace this test ad unit with your own ad unit.
final _adUnitId = '/6499/example/native';
/// 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 AdManagerAdRequest(),
// 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 NativeAd
come widget, devi creare un'istanza di un
AdWidget
con un annuncio supportato dopo aver chiamato load()
. Puoi creare il widget prima
chiamata load()
, ma è necessario chiamare load()
prima di aggiungerlo al widget
albero di Natale.
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 un indirizzo
e larghezza e altezza. In caso contrario, l'annuncio potrebbe non essere pubblicato.
// 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
R
NativeAd
quando non è più necessario accedervi. La best practice per
quando chiamare dispose()
è dopo il valore AdWidget
associato all'annuncio nativo
viene rimossa dalla struttura dei widget e nella sezione AdListener.onAdFailedToLoad()
o la richiamata.