Las plantillas nativas son vistas con código completo para tus anuncios nativos, diseñadas para una implementación rápida y una modificación fácil. Con las plantillas nativas, el complemento te proporciona diseños previamente compilados para iOS y Android, y puedes personalizar el estilo de los recursos nativos con una API de Dart.
En esta guía, se muestra cómo usar la API de Dart para diseñar las vistas de la plataforma subyacentes y renderizar el anuncio.
Requisitos previos
- Flutter 2.4.0 o una versión posterior
- Completa la Guía de introducción.
- Familiarízate con las opciones de anuncios nativos.
Siempre realiza pruebas con anuncios de prueba
Cuando compiles y pruebes tus apps, asegúrate de usar anuncios de prueba en lugar de anuncios activos en fase de producción. La forma más sencilla de cargar anuncios de prueba es usar nuestro ID de unidad de anuncios de prueba exclusivo para anuncios nativos:
Android
ca-app-pub-3940256099942544/2247696110
iOS
ca-app-pub-3940256099942544/3986624511
Las unidades de anuncios de prueba están configuradas para mostrar anuncios de prueba para cada solicitud, por lo que puedes usarlas en tus propias apps mientras codificas, pruebas y depuras. Solo asegúrate de reemplazarlas por tus propios IDs de unidades de anuncios antes de publicar tu app.
Carga el anuncio
En el siguiente ejemplo, se carga un anuncio nativo con la plantilla nativa de tamaño 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();
}
}
Consulta NativeTemplateStyle y NativeTemplateTextStyle para ver las opciones de diseño disponibles.
Personalizar anuncio
Cuando personalices un anuncio nativo con plantillas nativas, la configuración de la IU de tu anuncio se alojará en la clase NativeTemplateStyle, lo que te permitirá definir el estilo de un anuncio nativo completo en código Dart.
Tamaños de las plantillas
Las plantillas de anuncios nativos de Flutter se dividen en dos tipos: TemplateType.small y TemplateType.medium. La plantilla pequeña es ideal para un TableView o GridView, para anuncios in-feed o en cualquier lugar donde necesites una vista de anuncio rectangular delgada. La plantilla mediana debe ser una vista de página de entre medio y tres cuartos, lo que es ideal para páginas de destino o de presentación.
| Pequeño | |
|---|---|
 Android |
 iOS |
| Medio | |
 Android |
 iOS |
Eventos de anuncios nativos
Para recibir notificaciones sobre eventos relacionados con las interacciones con anuncios nativos, usa la propiedad listener del anuncio. Luego, implementa NativeAdListener para recibir devoluciones de llamada de eventos de anuncios.
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();
}
}
Anuncio gráfico
Para mostrar un NativeAd como widget, debes crear una instancia de un AdWidget con un anuncio compatible después de llamar a load(). Puedes crear el widget antes de llamar a load(), pero se debe llamar a load() antes de agregarlo al árbol de widgets.
AdWidget hereda de la clase Widget de Flutter y se puede usar como cualquier otro widget. En iOS, asegúrate de colocar el widget en un contenedor con un ancho y una altura
especificados. De lo contrario, es posible que tu anuncio no se muestre.
// 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!),
);
Cómo descartar un anuncio
Se debe eliminar un NativeAd cuando ya no se necesite acceder a él. La práctica recomendada para llamar a dispose() es después de que se quita el AdWidget asociado con el anuncio nativo del árbol de widgets y en la devolución de llamada de AdListener.onAdFailedToLoad().
Próximos pasos
- Obtén más información sobre los anuncios nativos en nuestra guía de anuncios nativos.
- Consulta los lineamientos y las políticas de los anuncios nativos.
- Revisa algunas historias de éxito de clientes: Caso de éxito 1 y Caso de éxito 2.