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. React Native muestra después esa vista a través del componente WortiseNativeAdView.

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 JavaScript para mostrar 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 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)
}

Precaución

La vista que muestra el contenido multimedia debe medir al menos 120x120dp. Los tamaños inferiores impiden que el anuncio opte a la demanda de vídeo, lo que reduce los ingresos del ad unit.

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

import com.wortise.ads.react.WortiseNativeAds

class MainApplication : Application(), ReactApplication {

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

iOS

Crea la vista como una subclase de WANativeAdView, por código o con un fichero XIB, conectando los outlets de los recursos que muestre el diseño. Después, implementa la factoría:

import WortiseSDK
import RNWortiseSdk

class MyNativeAdViewFactory: WortiseNativeAdViewFactory {

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

Precaución

La vista que muestra el contenido multimedia debe medir al menos 120x120pt y no tiene tamaño intrínseco, por lo que necesita una altura explícita (o una relación de aspecto) en las constraints del layout.

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

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

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

Nota

El identificador utilizado para registrar la factoría debe ser el mismo en ambas plataformas, ya que es el que se indicará desde JavaScript.

Integración

Una vez registradas las factorías, los anuncios se solicitan con la clase WortiseNativeAd y se muestran con el 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 de Wortise')
    .then((ad) => {
      ad.addEventListener('onNativeClicked', () => {
        // Invocado cuando el anuncio ha sido clicado
      });

      ad.addEventListener('onNativeImpression', () => {
        // Invocado cuando el anuncio ha generado una impresión
      });

      ad.addEventListener('onNativeRevenuePaid', (data) => {
        // Invocado cuando el anuncio ha generado ingresos
      });

      setNativeAd(ad);
    })
    .catch((error) => {
      // Invocado cuando el anuncio no ha podido cargarse
      // (por un error o por falta de inventario)
    });
};

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

Precaución

El anuncio debe destruirse, llamando a su método destroy(), cuando ya no se necesite.

Recursos del anuncio

La instancia de WortiseNativeAd expone los recursos del anuncio, que se pueden utilizar para mostrarlos con tus propios componentes:

Propiedad	Tipo	Descripción
advertiser	string?	Nombre del anunciante
body	string?	Descripción del anuncio
callToAction	string?	Texto de la llamada a la acción
headline	string?	Titular del anuncio
icon	WortiseNativeAdImage?	Icono del anuncio
images	WortiseNativeAdImage[]?	Imágenes del anuncio
mediaContent	WortiseNativeMediaContent?	Contenido multimedia del anuncio
price	string?	Precio del producto promocionado
rating	number?	Valoración del producto promocionado
store	string?	Tienda del producto promocionado

Parámetros de la petición

El método createForAdRequest también acepta los parámetros de la petición, igual que el resto de formatos:

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