Se usó la API de Cloud Translation para traducir esta página.

Plantillas nativas en Dart

Las plantillas nativas son vistas con código completo para tus anuncios nativos, diseñadas para una implementación rápida y modificaciones sencillas. Con las plantillas nativas, el complemento proporciona diseños compilados previamente para iOS y Android, y puedes personalizar el estilo de los elementos nativos con una API de Dart.

En esta guía, se muestra cómo usar la API de Dart para estilizar las vistas subyacentes de la plataforma 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 prueba con anuncios de prueba

Cuando compiles y pruebes tus apps, asegúrate de usar anuncios de prueba en lugar de anuncios publicados en producción. La forma más fácil de cargar anuncios de prueba es usar nuestro ID de unidad de anuncios de prueba exclusivo para los anuncios nativos:

/6499/example/native

Las unidades de anuncios de prueba están configuradas con el fin de mostrar anuncios de prueba para cada solicitud, de modo que puedas usarlas en tus propias apps mientras codificas, pruebas y depuras. Solo debes asegurarte de reemplazarlas con tus propios IDs de unidades de anuncios antes de publicar tu app.

Cargar 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 _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 diseño disponibles.

Personalizar anuncio

Cuando personalices un anuncio nativo con plantillas nativas, la configuración de la IU del 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 son de dos tipos: TemplateType.small y TemplateType.medium. La plantilla pequeña es ideal para TableView o GridView, para anuncios in-feed o en cualquier lugar en el que necesites una vista de anuncio rectangular delgada. La plantilla media está diseñada para ser una vista de página de media a tres cuartos, lo que es ideal para las páginas de destino o de presentación.

Pequeña
Android	iOS
Medio
Android	iOS

Eventos de anuncios nativos

Si deseas 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 _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 un objeto 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 se 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 su anuncio no se publique.

// 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!),
);

Descartar anuncio

Se debe descartar una NativeAd cuando ya no se necesita acceso a ella. La práctica recomendada para el momento en que se debe llamar a dispose() ocurre después de que el AdWidget asociado con el anuncio nativo se quita del árbol de widgets y en la devolución de llamada AdListener.onAdFailedToLoad().