Las plantillas nativas son vistas de código completo para sus anuncios nativos, diseñadas para la implementación y la modificación sencilla. Con las plantillas nativas, el complemento proporciona diseños prediseñados de Android y iOS, y puedes personalizar el estilo del recursos nativos con una API de Dart.
En esta guía, se muestra cómo usar la API de Dart para estilizar la imagen y para renderizar el anuncio.
Requisitos previos
- Flutter 2.4.0 o una versión posterior
- Completa la Guía de introducción.
- Familiarícese con las opciones de anuncios nativos.
Probar siempre con anuncios de prueba
Cuando compiles y pruebes tus apps, asegúrate de usar anuncios de prueba en lugar de anuncios activos y en producción. La forma más sencilla de cargar anuncios de prueba es usar nuestra ID de unidad de anuncios de prueba para anuncios nativos:
/6499/example/native
Las unidades de anuncios de prueba se configuran para mostrar anuncios de prueba en cada solicitud. puedes usarlas en tus propias apps mientras codificas, pruebas depuración. Solo asegúrese de reemplazarlos con sus propios IDs de unidades de anuncios antes publicar tu app.
Cargar anuncio
En el siguiente ejemplo, se carga un anuncio nativo que usa anuncios nativos de tamaño medium
plantilla:
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
y
NativeTemplateTextStyle
para ver las opciones de estilo disponibles.
Personalizar anuncio
Cuando personaliza un anuncio nativo con plantillas nativas, la configuración de la IU de su anuncio
se alojará en la clase NativeTemplateStyle
, lo que te permitirá diseñar un conjunto
anuncio nativo en código Dart.
Tamaños de plantillas
Las plantillas de anuncios nativos de Flutter vienen en dos tipos: TemplateType.small
y
TemplateType.medium
La plantilla pequeña es ideal para una TableView
o
GridView
, en el caso de los anuncios in-feed o en cualquier lugar donde necesite una vista de anuncio rectangular delgada. El
El objetivo de la plantilla mediana es ser
una vista de página de entre 0.5 y 0.5 centímetros,
ideal para las páginas de destino o de presentación.
Pequeño | |
---|---|
![]() En Android |
![]() iOS |
Medio | |
![]() En Android |
![]() iOS |
Eventos de anuncios nativos
Para recibir notificaciones sobre eventos relacionados con las interacciones con anuncios nativos, usa el
listener
propiedad 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 _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();
}
}
Anuncio gráfico
Para mostrar un NativeAd
como widget, debes crear una instancia de una
AdWidget
con un anuncio compatible después de llamar a load()
. Puedes crear el widget antes
Llamando a load()
, pero se debe llamar a load()
antes de agregarlo al widget
de imágenes.
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 valor
ancho y alto. 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!),
);
Eliminar anuncio
R
NativeAd
se debe eliminar cuando ya no se necesite el acceso. La práctica recomendada para
cuándo llamar a dispose()
es posterior al AdWidget
asociado con el anuncio nativo
se quita del árbol de widgets y en AdListener.onAdFailedToLoad()
devolución de llamada.