Les modèles natifs sont des vues complètes du code de vos annonces natives. Ils sont conçus pour permettre une implémentation rapide et des modifications faciles. Avec les modèles natifs, le plug-in fournit des mises en page Android et iOS prédéfinies. Vous pouvez également personnaliser le style des éléments natifs à l'aide d'une API Dart.
Ce guide explique comment utiliser l'API Dart pour styliser les vues de plate-forme sous-jacentes et afficher l'annonce.
Conditions préalables
- Flutter version 2.4.0 ou supérieure.
- Suivez le guide de démarrage.
- Familiarisez-vous avec les options des annonces natives.
Toujours tester avec des annonces tests
Lorsque vous créez et testez vos applications, veillez à utiliser des annonces tests plutôt que des annonces de production. Le moyen le plus simple de charger des annonces tests consiste à utiliser notre ID de bloc d'annonces test dédié pour les annonces natives:
Android
ca-app-pub-3940256099942544/2247696110
iOS
ca-app-pub-3940256099942544/3986624511
Les blocs d'annonces tests sont configurés pour renvoyer des annonces tests pour chaque demande. Vous pouvez donc les utiliser dans vos propres applications lors du codage, des tests et du débogage. Veillez simplement à les remplacer par vos propres ID de bloc d'annonces avant de publier votre application.
Charger l'annonce
L'exemple suivant charge une annonce native à l'aide du modèle natif de taille 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();
}
}
Consultez NativeTemplateStyle et NativeTemplateTextStyle pour connaître les options de style disponibles.
Personnaliser l'annonce
Lorsque vous personnalisez une annonce native à l'aide de modèles natifs, la configuration de l'interface utilisateur de votre annonce est incluse dans la classe NativeTemplateStyle, ce qui vous permet de styliser l'ensemble d'une annonce native dans le code Dart.
Tailles de modèle
Il existe deux types de modèles d'annonces natives Flutter: TemplateType.small et TemplateType.medium. Ce petit modèle est idéal pour les TableView ou les GridView, pour les annonces In-Feed ou partout où vous avez besoin d'une vue d'annonce rectangulaire fine. Le modèle de taille moyenne est censé être une page vue de moitié à trois quarts, ce qui est idéal pour les pages de destination ou de démarrage.
| Petite | |
|---|---|
 Android |
 iOS |
| Moyenne | |
 Android |
 iOS |
Événements d'annonces natives
Pour recevoir des notifications en cas d'événements liés aux interactions avec une annonce native, utilisez la propriété listener de l'annonce. Ensuite, implémentez NativeAdListener pour recevoir des rappels d'événements d'annonce.
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();
}
}
Afficher l'annonce
Pour afficher un NativeAd en tant que widget, vous devez instancier un AdWidget avec une annonce compatible après avoir appelé load(). Vous pouvez créer le widget avant d'appeler load(), mais load() doit être appelé avant de l'ajouter à l'arborescence de widgets.
AdWidget hérite de la classe Widget de Flutter et peut être utilisé comme n'importe quel autre widget. Sous iOS, veillez à placer le widget dans un conteneur dont la largeur et la hauteur sont spécifiées. Sinon, votre annonce risque de ne pas être diffusée.
// 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!),
);
Supprimer l'annonce
Un NativeAd doit être supprimé lorsque l'accès n'est plus nécessaire. Il est recommandé d'appeler dispose() une fois que l'élément AdWidget associé à l'annonce native a été supprimé de l'arborescence des widgets et dans le rappel AdListener.onAdFailedToLoad().
Étapes suivantes
- Pour en savoir plus sur les annonces natives, consultez notre playbook sur les annonces natives.
- Consultez les Règles et consignes relatives aux annonces natives.
- Découvrez des témoignages de clients: étude de cas 1, étude de cas 2.