Nativo

Os anúncios nativos são um tipo de anúncio que pode ser exibido com 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 recursos do anúncio, independentemente da fonte de demanda que o tenha preenchido. O React Native então exibe essa view por meio do componente WortiseNativeAdView.

Registrar uma factory

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

Android

Primeiro, crie um arquivo de layout (por exemplo native_ad.xml) em que cada view que exibirá um recurso do anúncio tenha um identificador e, em seguida, implemente a interface WortiseNativeAdViewFactory:

package com.example.app

import android.content.Context
import com.wortise.ads.natives.NativeAdView
import com.wortise.ads.natives.NativeAdViewBinder
import com.wortise.ads.react.WortiseNativeAdViewFactory

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

    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)
}

Cuidado

A view que exibe o conteúdo de mídia deve ter pelo menos 120x120dp. Tamanhos menores tornam o anúncio inelegível para demanda de vídeo, o que reduz a receita do ad unit.

Em seguida, registre a factory na classe MainApplication:

import com.wortise.ads.react.WortiseNativeAds

class MainApplication : Application(), ReactApplication {

    override fun onCreate() {
        super.onCreate()
        ...
        WortiseNativeAds.registerFactory("my-factory", MyNativeAdViewFactory(this))
    }
}

iOS

Crie a view como uma subclasse de WANativeAdView, por código ou com um arquivo XIB, conectando os outlets dos recursos que o design exibe. Em seguida, implemente a factory:

import WortiseSDK
import RNWortiseSdk

class MyNativeAdViewFactory: WortiseNativeAdViewFactory {

    func createNativeAdView() -> WANativeAdView {
        return NativeAdView(frame: .zero)
    }
}

Cuidado

A view que exibe o conteúdo de mídia deve ter pelo menos 120x120pt e não possui tamanho intrínseco, portanto precisa de uma altura explícita (ou uma proporção) nas constraints do layout.

Em seguida, registre a factory na classe AppDelegate:

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

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

Nota

O identificador usado para registrar a factory deve ser o mesmo em ambas as plataformas, já que é o que será passado a partir do JavaScript.

Integração

Depois de registrar as factories, os anúncios são solicitados com a classe WortiseNativeAd e exibidos com o componente WortiseNativeAdView:

import { WortiseNativeAd, WortiseNativeAdView } from '@wortise/react-native-sdk';

/* ... */

const [nativeAd, setNativeAd] = useState(null);

const loadNative = () => {
  if (nativeAd) {
    nativeAd.destroy();
    setNativeAd(null);
  }

  WortiseNativeAd.createForAdRequest('Ad Unit ID da Wortise')
    .then((ad) => {
      ad.addEventListener('onNativeClicked', () => {
        // Invocado quando o anúncio foi clicado
      });

      ad.addEventListener('onNativeImpression', () => {
        // Invocado quando o anúncio gerou uma impressão
      });

      ad.addEventListener('onNativeRevenuePaid', (data) => {
        // Invocado quando o anúncio gerou receita
      });

      setNativeAd(ad);
    })
    .catch((error) => {
      // Invocado quando o anúncio não pôde ser carregado
      // (por um erro ou por falta de preenchimento (no fill))
    });
};

return (
  <View style={styles.container}>
    <Button onPress={loadNative} title="Carregar Nativo" />
    {nativeAd && (
      <WortiseNativeAdView
        factoryId="my-factory"
        nativeAd={nativeAd}
        style={{ height: 300, width: '100%' }}
      />
    )}
  </View>
);

Cuidado

O anúncio deve ser destruído, chamando seu método destroy(), quando não for mais necessário.

Recursos do anúncio

A instância de WortiseNativeAd expõe os recursos do anúncio, que podem ser usados para exibi-los com seus próprios componentes:

Propriedade	Tipo	Descrição
advertiser	string?	Nome do anunciante
body	string?	Descrição do anúncio
callToAction	string?	Texto da chamada para ação
headline	string?	Título do anúncio
icon	WortiseNativeAdImage?	Ícone do anúncio
images	WortiseNativeAdImage[]?	Imagens do anúncio
mediaContent	WortiseNativeMediaContent?	Conteúdo de mídia do anúncio
price	string?	Preço do produto promovido
rating	number?	Avaliação do produto promovido
store	string?	Loja do produto promovido

Parâmetros da solicitação

O método createForAdRequest também aceita os parâmetros da solicitação, da mesma forma que os outros formatos:

WortiseNativeAd.createForAdRequest('Ad Unit ID da Wortise', { agent: 'your agent' });