Nativo

Os anúncios nativos são um tipo de anúncio que pode ser exibido usando o mesmo estilo visual do restante do app, o que permite uma integração natural e não intrusiva com a interface do usuário.

Diferentemente dos outros formatos, a view do anúncio é definida nativamente em cada plataforma e o SDK a preenche com os assets do anúncio, independentemente de qual fonte de demanda o tenha preenchido. O Flutter então exibe essa view por meio do widget AdWidget.

Registrar uma factory

Cada view de anúncio é fornecida por uma factory que é registrada nativamente com um identificador, usado posteriormente a partir do Dart para solicitar os anúncios.

Android

Primeiro, crie um arquivo de layout (por exemplo, native_ad.xml) em que cada view que exibirá um asset do anúncio tenha um identificador e, em seguida, implemente a interface 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)
}

Em seguida, registre a factory na classe 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

Crie um arquivo XIB (por exemplo, NativeAdView.xib), defina WANativeAdView como a classe da sua view raiz, conecte os outlets dos assets que o design exibe e, em seguida, implemente o protocolo WortiseNativeAdViewFactory:

import WortiseSDK
import wortise

class MyNativeAdViewFactory: WortiseNativeAdViewFactory {

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

Em seguida, registre a factory na classe AppDelegate:

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

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

Integração

Depois que as factories estiverem registradas, os anúncios são solicitados com a classe NativeAdLoader e exibidos com o widget AdWidget:

import 'package:wortise/wortise.dart';

/* ... */

NativeAdLoader? _nativeAdLoader;

NativeAd? _nativeAd;

Widget? _nativeWidget;

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

  _nativeAdLoader = NativeAdLoader(
    'Ad Unit ID da 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();
}

O widget deve ser colocado dentro de um container com tamanho definido, da mesma forma que os banners:

Container(
  height: 300,
  child: _nativeWidget,
)

O listener recebe os seguintes eventos, declarados no enum NativeAdEvent:

Evento	Descrição
`CLICKED`	O anúncio foi clicado
`FAILED`	Não foi possível carregar o anúncio (por um erro ou sem preenchimento (no fill))
`IMPRESSION`	O anúncio gerou uma impressão
`LOADED`	O anúncio foi carregado e é recebido no argumento `ad`
`REVENUE_PAID`	O anúncio gerou receita

Parâmetros da solicitação

O método loadAd também aceita uma instância de RequestParameters, da mesma forma que os demais formatos:

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

Migração a partir de `GoogleNativeAd`

Se o seu app já integrou a classe descontinuada GoogleNativeAd, estas são as equivalências com a nova integração:

Descontinuado	Substituto
`GoogleNativeAd(adUnitId, factoryId, listener)`	`NativeAdLoader(adUnitId, factoryId, listener)`
`GoogleNativeAdEvent`	`NativeAdEvent`
`load()`	`loadAd()` (ou `loadAd(requestParameters:)`)
`AdWidget(ad: googleNativeAd)`	`AdWidget(ad: nativeAd)` — o anúncio do evento `LOADED`
`GoogleNativeAdFactory` (Android)	`NativeAdViewFactory`
`GoogleNativeAdManager` (Android)	`NativeAdManager`

A diferença mais relevante é qual objeto é exibido: a classe descontinuada era ela mesma passada ao widget AdWidget, enquanto agora o loader entrega um NativeAd no evento LOADED, e esse é o objeto a ser exibido.

Antes

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

_googleNativeAd?.load();

Depois

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

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

_nativeAdLoader?.loadAd();