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
- Consulta nuestra guía sobre los anuncios nativos para obtener más información acerca de este tipo de anuncios.
- Lee las políticas de los anuncios nativos y las directrices para implementarlos.
- También puedes consultar algunos casos de éxito de nuestros clientes: caso de éxito 1 y caso de éxito 2.