Nativo

Los anuncios nativos son un tipo de anuncio que puede ser mostrado con el mismo estilo visual del resto de la app, lo que permite una integración natural y no-intrusiva con la interfaz de usuario.

A diferencia del resto de formatos, la vista del anuncio se define de forma nativa en cada plataforma y el SDK la rellena con los recursos del anuncio, sea cual sea la fuente de demanda que lo haya servido. Flutter muestra después esa vista a través del widget AdWidget.

Registrar una factoría

Cada vista de anuncio la proporciona una factoría que se registra de forma nativa con un identificador, que después se utiliza desde Dart para solicitar los anuncios.

Android

En primer lugar, crea un fichero de layout (por ejemplo native_ad.xml) donde cada vista que mostrará un recurso del anuncio tenga un identificador, e implementa después la interfaz NativeAdViewFactory:

package com.example.app

import android.content.Context
import com.wortise.ads.flutter.natives.NativeAdViewFactory
import com.wortise.ads.natives.NativeAdView
import com.wortise.ads.natives.NativeAdViewBinder

class MyNativeAdViewFactory(private val context: Context) : NativeAdViewFactory {

    private val binder = NativeAdViewBinder.Builder(R.layout.native_ad)
        .setAdvertiserTextViewId(R.id.ad_advertiser)
        .setBodyTextViewId(R.id.ad_body)
        .setCallToActionButtonId(R.id.ad_call_to_action)
        .setHeadlineTextViewId(R.id.ad_headline)
        .setIconImageViewId(R.id.ad_app_icon)
        .setMediaContentViewId(R.id.ad_media)
        .setPriceTextViewId(R.id.ad_price)
        .setRatingContentViewId(R.id.ad_rating)
        .setStoreTextViewId(R.id.ad_store)
        .build()

    override fun createNativeAdView() = NativeAdView(context, binder)
}

A continuación, registra la factoría en la clase MainActivity:

import com.wortise.ads.flutter.natives.NativeAdManager
import io.flutter.embedding.android.FlutterActivity
import io.flutter.embedding.engine.FlutterEngine

class MainActivity : FlutterActivity() {

    override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
        super.configureFlutterEngine(flutterEngine)

        NativeAdManager.registerAdViewFactory("my-factory", MyNativeAdViewFactory(this))
    }

    override fun cleanUpFlutterEngine(flutterEngine: FlutterEngine) {
        super.cleanUpFlutterEngine(flutterEngine)

        NativeAdManager.unregisterAdViewFactory("my-factory")
    }
}

iOS

Crea un fichero XIB (por ejemplo NativeAdView.xib), asigna WANativeAdView como clase de su vista raíz, conecta los outlets de los recursos que muestre el diseño e implementa después el protocolo WortiseNativeAdViewFactory:

import WortiseSDK
import wortise

class MyNativeAdViewFactory: WortiseNativeAdViewFactory {

    func createNativeAdView() -> WANativeAdView {
        return Bundle.main.loadNibNamed(
            "NativeAdView", owner: nil
        )!.first as! WANativeAdView
    }
}

A continuación, registra la factoría en la clase AppDelegate:

override func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?
) -> Bool {
    WortiseNativeAdManager.registerAdViewFactory(
        "my-factory", factory: MyNativeAdViewFactory()
    )

    return super.application(application, didFinishLaunchingWithOptions: launchOptions)
}

Integración

Una vez registradas las factorías, los anuncios se solicitan con la clase NativeAdLoader y se muestran con el widget AdWidget:

import 'package:wortise/wortise.dart';

/* ... */

NativeAdLoader? _nativeAdLoader;

NativeAd? _nativeAd;

Widget? _nativeWidget;

@override
void initState() {
  super.initState();

  _nativeAdLoader = NativeAdLoader(
    'Ad Unit ID de Wortise',
    'my-factory',
    (event, args) {
      if (event == NativeAdEvent.LOADED) {
        final ad = args['ad'] as NativeAd;

        setState(() {
          _nativeAd = ad;
          _nativeWidget = AdWidget(ad: ad);
        });
      }
    },
  );

  _nativeAdLoader?.loadAd();
}

@override
void dispose() {
  _nativeAd?.destroy();
  _nativeAdLoader?.destroy();

  super.dispose();
}

El widget debe colocarse dentro de un contenedor con un tamaño definido, igual que sucede con los banners:

Container(
  height: 300,
  child: _nativeWidget,
)

El listener recibe los siguientes eventos, declarados en el enum NativeAdEvent:

Evento	Descripción
`CLICKED`	El anuncio ha sido clicado
`FAILED`	El anuncio no ha podido cargarse (por un error o por falta de inventario)
`IMPRESSION`	El anuncio ha generado una impresión
`LOADED`	El anuncio ha sido cargado, y se recibe en el argumento `ad`
`REVENUE_PAID`	El anuncio ha generado ingresos

Parámetros de la petición

El método loadAd también acepta una instancia de RequestParameters, igual que el resto de formatos:

_nativeAdLoader?.loadAd(
  requestParameters: RequestParameters(agent: 'your agent'),
);

Migración desde `GoogleNativeAd`

Si la app ya integraba la clase obsoleta GoogleNativeAd, estas son las equivalencias con la nueva integración:

Obsoleto	Sustituto
`GoogleNativeAd(adUnitId, factoryId, listener)`	`NativeAdLoader(adUnitId, factoryId, listener)`
`GoogleNativeAdEvent`	`NativeAdEvent`
`load()`	`loadAd()` (o `loadAd(requestParameters:)`)
`AdWidget(ad: googleNativeAd)`	`AdWidget(ad: nativeAd)` — el anuncio del evento `LOADED`
`GoogleNativeAdFactory` (Android)	`NativeAdViewFactory`
`GoogleNativeAdManager` (Android)	`NativeAdManager`

La diferencia más relevante es qué objeto se muestra: la clase obsoleta se pasaba directamente al widget AdWidget, mientras que ahora el loader entrega un NativeAd en el evento LOADED y ese es el objeto que hay que mostrar.

Antes

_googleNativeAd = GoogleNativeAd('Ad Unit ID de Wortise', 'my-factory', (event, args) {
  if (event == GoogleNativeAdEvent.LOADED) {
    setState(() => _nativeWidget = AdWidget(ad: _googleNativeAd!));
  }
});

_googleNativeAd?.load();

Después

_nativeAdLoader = NativeAdLoader('Ad Unit ID de Wortise', 'my-factory', (event, args) {
  if (event == NativeAdEvent.LOADED) {
    final ad = args['ad'] as NativeAd;

    setState(() => _nativeWidget = AdWidget(ad: ad));
  }
});

_nativeAdLoader?.loadAd();