Nativo

Los anuncios nativos son recursos publicitarios que se presentan a los usuarios a través de componentes de la interfaz que son nativos de la plataforma. Se muestran con los mismos tipos de vistas con los que creas tus diseños, y puedes darles el formato que quieras para que se adapten al diseño visual de la experiencia de usuario de la que forman parte. En términos de programación, esto implica que, cuando se carga un anuncio nativo, tu aplicación recibe un objeto NativeAd que contiene sus recursos y es la propia aplicación (no el SDK de anuncios de Google para móviles) la que los muestra.

Esencialmente, debes seguir dos pasos para implementar anuncios nativos correctamente: cargarlos mediante el SDK y, a continuación, mostrar su contenido en tu aplicación. En esta guía aprenderás a utilizar el SDK para cargar anuncios nativos.

Configuración de la plataforma

Los anuncios nativos se presentan a los usuarios a través de componentes de interfaz que son nativos de la plataforma (por ejemplo, View en Android o UIView en iOS).

Dado que este tipo de anuncios requiere componentes de interfaz nativos de una plataforma, es necesario realizar ajustes de configuración adicionales en Android y iOS:

Android

En la implementación del complemento de anuncios de Google para móviles en Android, se necesita una clase que implemente un objeto NativeAdFactory. NativeAdFactory contiene un método que toma un NativeAd y opciones personalizadas y devuelve una clase NativeAdView. NativeAdView es lo que se muestra en tu aplicación.

Puedes implementarlo en MainActivity.java o crear una clase independiente en el mismo directorio que MainActivity.java:

package my.app.path;

import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.NativeAdFactory;
import java.util.Map;

class NativeAdFactoryExample implements NativeAdFactory {
  @Override
  public NativeAdView createNativeAd(
      NativeAd nativeAd, Map<String, Object> customOptions) {
    // Create NativeAdView
  }
}

Cada NativeAdFactory debe registrarse en MainActivity.configureFlutterEngine(FlutterEngine) con un factoryId, es decir, un identificador de String único. Se puede implementar y registrar un NativeAdFactory para cada diseño único de anuncio nativo que utilice la aplicación, o bien implementar y registrar solo uno para que gestione todos los diseños.

El NativeAdFactory no debe estar registrado en cleanUpFlutterEngine(engine) a la hora de compilar con add-to-app.

El aspecto de MainActivity.java debe ser similar a este:

package my.app.path;

import io.flutter.embedding.android.FlutterActivity;
import io.flutter.embedding.engine.FlutterEngine;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin;

public class MainActivity extends FlutterActivity {
  @Override
  public void configureFlutterEngine(FlutterEngine flutterEngine) {
    flutterEngine.getPlugins().add(new GoogleMobileAdsPlugin());
   super.configureFlutterEngine(flutterEngine);

    GoogleMobileAdsPlugin.registerNativeAdFactory(flutterEngine, "adFactoryExample", NativeAdFactoryExample());
  }

  @Override
  public void cleanUpFlutterEngine(FlutterEngine flutterEngine) {
    GoogleMobileAdsPlugin.unregisterNativeAdFactory(flutterEngine, "adFactoryExample");
  }
}

Cuando se crea el NativeAd en Dart, el objeto factoryId debe ser igual al utilizado para añadir el constructor de fábrica en GoogleMobileAdsPlugin. En el fragmento de código anterior, adFactoryExample es el nombre del factoryId. Aquí tienes un ejemplo de NativeAdFactory:

package io.flutter.plugins.googlemobileadsexample;

import android.graphics.Color;
import android.view.LayoutInflater;
import android.widget.TextView;
import com.google.android.gms.ads.nativead.NativeAd;
import com.google.android.gms.ads.nativead.NativeAdView;
import io.flutter.plugins.googlemobileads.GoogleMobileAdsPlugin.NativeAdFactory;
import java.util.Map;

/**
 * my_native_ad.xml can be found at
 * //github.com/googleads/googleads-mobile-flutter/tree/master/packages/google_mobile_ads/example/android/app/src/main/res/layout
 */
class NativeAdFactoryExample implements NativeAdFactory {
  private final LayoutInflater layoutInflater;

  NativeAdFactoryExample(LayoutInflater layoutInflater) {
    this.layoutInflater = layoutInflater;
  }

  @Override
  public NativeAdView createNativeAd(
      NativeAd nativeAd, Map<String, Object> customOptions) {
    final NativeAdView adView =
        (NativeAdView) layoutInflater.inflate(R.layout.my_native_ad, null);
    final TextView headlineView = adView.findViewById(R.id.ad_headline);
    final TextView bodyView = adView.findViewById(R.id.ad_body);

    headlineView.setText(nativeAd.getHeadline());
    bodyView.setText(nativeAd.getBody());

    adView.setBackgroundColor(Color.YELLOW);

    adView.setNativeAd(nativeAd);
    adView.setBodyView(bodyView);
    adView.setHeadlineView(headlineView);
    return adView;
  }
}

iOS

En la implementación del complemento de anuncios de Google para móviles en iOS, se necesita una clase que implemente un objeto FLTNativeAdFactory. FLTNativeAdFactory contiene un método que usa un GADNativeAd y opciones personalizadas, y devuelve un GADNativeAdView. GADNativeAdView es lo que se muestra en tu aplicación.

El protocolo FLTNativeAdFactory se puede implementar mediante AppDelegate o creando una clase independiente:

/* AppDelegate.m */
#import "FLTGoogleMobileAdsPlugin.h"
@interface NativeAdFactoryExample : NSObject<FLTNativeAdFactory>
@end

@implementation NativeAdFactoryExample
- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                             customOptions:(NSDictionary *)customOptions {
  // Create GADNativeAdView
}
@end

Cada FLTNativeAdFactory debe registrarse en registerNativeAdFactory:factoryId:nativeAdFactory: con un factoryId, es decir, un identificador de String único.

Se puede implementar y registrar un FLTNativeAdFactory para cada diseño único de anuncio nativo que utilice la aplicación, o bien implementar y registrar solo uno para que gestione todos los diseños. Para hacerlo, se importa FLTGoogleMobileAdsPlugin.h y se llama a registerNativeAdFactory:factoryId:nativeAdFactory: con un FlutterPluginRegistry (un único identificador de cadena del constructor de fábrica) y el propio constructor. Este constructor de fábrica también se debe añadir después de llamar a GeneratedPluginRegistrant registerWithRegistry:self];.

Si se hace esto en AppDelegate.m, debería tener un aspecto similar a este:

#import "FLTGoogleMobileAdsPlugin.h"

@implementation AppDelegate
- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GeneratedPluginRegistrant registerWithRegistry:self];

  NativeAdFactoryExample *nativeAdFactory = [[NativeAdFactoryExample alloc] init];
  [FLTGoogleMobileAdsPlugin registerNativeAdFactory:self
                                          factoryId:@"adFactoryExample"
                                    nativeAdFactory:nativeAdFactory];

  return [super application:application didFinishLaunchingWithOptions:launchOptions];
}
@end

Cuando se crea el NativeAd en Dart, el objeto factoryID debe ser igual al utilizado para añadir el constructor de fábrica en FLTGoogleMobileAdsPlugin. En el fragmento de código anterior, adFactoryExample es el nombre del objeto factoryID. Aquí tienes un ejemplo de FLTNativeAdFactory:

/**
 * The example NativeAdView.xib can be found at
 * //github.com/googleads/googleads-mobile-flutter/blob/master/packages/google_mobile_ads/example/ios/Runner/NativeAdView.xib
 */
@interface NativeAdFactoryExample : NSObject <FLTNativeAdFactory>
@end

@implementation NativeAdFactoryExample
- (GADNativeAdView *)createNativeAd:(GADNativeAd *)nativeAd
                             customOptions:(NSDictionary *)customOptions {
  // Create and place ad in view hierarchy.
  GADNativeAdView *adView =
      [[NSBundle mainBundle] loadNibNamed:@"NativeAdView" owner:nil options:nil].firstObject;

  // Associate the native ad view with the native ad object. This is
  // required to make the ad clickable.
  adView.nativeAd = nativeAd;

  // Populate the native ad view with the native ad assets.
  // The headline is guaranteed to be present in every native ad.
  ((UILabel *)adView.headlineView).text = nativeAd.headline;

  // These assets are not guaranteed to be present. Check that they are before
  // showing or hiding them.
  ((UILabel *)adView.bodyView).text = nativeAd.body;
  adView.bodyView.hidden = nativeAd.body ? NO : YES;

  [((UIButton *)adView.callToActionView) setTitle:nativeAd.callToAction
                                         forState:UIControlStateNormal];
  adView.callToActionView.hidden = nativeAd.callToAction ? NO : YES;

  ((UIImageView *)adView.iconView).image = nativeAd.icon.image;
  adView.iconView.hidden = nativeAd.icon ? NO : YES;

  ((UILabel *)adView.storeView).text = nativeAd.store;
  adView.storeView.hidden = nativeAd.store ? NO : YES;

  ((UILabel *)adView.priceView).text = nativeAd.price;
  adView.priceView.hidden = nativeAd.price ? NO : YES;

  ((UILabel *)adView.advertiserView).text = nativeAd.advertiser;
  adView.advertiserView.hidden = nativeAd.advertiser ? NO : YES;

  // In order for the SDK to process touch events properly, user interaction
  // should be disabled.
  adView.callToActionView.userInteractionEnabled = NO;

  return adView;
}
@end

Comprobar siempre las aplicaciones con anuncios de prueba

Cuando crees y testes tus aplicaciones, utiliza siempre anuncios de prueba en lugar de anuncios reales que se estén publicando. De lo contrario, podríamos suspender tu cuenta.

La forma más sencilla de cargar anuncios de prueba es usar el ID de bloque de anuncios de prueba que hemos creado para evaluar los anuncios nativos:

Los bloques de anuncios de prueba están configurados para devolver anuncios de prueba a cada solicitud, y puedes usarlos para programar, testar y depurar tus propias aplicaciones. Recuerda sustituirlos por los IDs de tus bloques de anuncios antes de publicar las aplicaciones.

Crear instancias de anuncios

Los elementos NativeAd requieren objetos adUnitId, factoryId, AdRequest y NativeAdListener. En el siguiente ejemplo se crea una instancia de un anuncio nativo:

final NativeAd myNative = NativeAd(
  adUnitId: '<ad unit id>',
  factoryId: 'adFactoryExample',
  request: AdRequest(),
  listener: NativeAdListener(),
);

FactoryID

El factoryId debe ser el mismo que se ha utilizado para añadir el constructor de fábrica a GoogleMobileAdsPlugin en Android o a FLTGoogleMobileAdsPlugin en iOS. Las dos plataformas pueden utilizar el mismo factoryId o cada una puede tener el suyo propio.

Eventos de anuncios nativos

Puedes usar NativeAdListener para procesar eventos del ciclo de vida, como cuándo se carga un anuncio. En el siguiente ejemplo se implementa cada método y se registra un mensaje en la consola:

final NativeAdListener listener = NativeAdListener(
 // Called when an ad is successfully received.
 onAdLoaded: (Ad ad) => print('Ad loaded.'),
 // Called when an ad request failed.
 onAdFailedToLoad: (Ad ad, LoadAdError error) {
   // Dispose the ad here to free resources.
   ad.dispose();
   print('Ad failed to load: $error');
 },
 // Called when an ad opens an overlay that covers the screen.
 onAdOpened: (Ad ad) => print('Ad opened.'),
 // Called when an ad removes an overlay that covers the screen.
 onAdClosed: (Ad ad) => print('Ad closed.'),
 // Called when an impression occurs on the ad.
 onAdImpression: (Ad ad) => print('Ad impression.'),
 // Called when a click is recorded for a NativeAd.
 onNativeAdClicked: (NativeAd ad) => print('Ad clicked.'),
);

Cargar anuncios

Después de crear una instancia de NativeAd, se debe llamar a load() antes de que se pueda mostrar en la pantalla.

myNative.load();

Mostrar anuncios

Para mostrar un NativeAd como un widget, debes crear una instancia de AdWidget con un anuncio compatible después de llamar a load(). Puedes crear el widget antes de llamar a load(), pero se debe hacer una llamada a load() antes de añadirlo al árbol de widgets.

final AdWidget adWidget = AdWidget(ad: myBanner);

AdWidget hereda los valores de la clase Widget de Flutter y se puede utilizar como cualquier otro widget. En el caso de iOS, asegúrate de colocar el widget dentro de un contenedor con una altura y una anchura determinadas. De lo contrario, es posible que no se muestre el anuncio.

final Container adContainer = Container(
  alignment: Alignment.center,
  child: adWidget,
  width: 500,
  height: 500,
);

Cuando un anuncio haya llamado a load(), debe llamar a dispose() cuando ya no se necesite acceso a él. El mejor momento para llamar a dispose() es después de que se quite AdWidget del árbol de widgets, o bien en la retrollamada AdListener.onAdFailedToLoad.

Eso es todo. La aplicación ya está lista para mostrar anuncios nativos.

Pasos siguientes