Banner

Los anuncios de banner son anuncios de imagen o de texto rectangulares que ocupan un lugar dentro del diseño de una aplicación. Permanecen en la pantalla mientras los usuarios interactúan con la aplicación y pueden actualizarse automáticamente después de un cierto período de tiempo. Si eres nuevo en la publicidad móvil, son una excelente opción para comenzar.

Integración

La integración de los banners se realiza añadiendo el widget WortiseBanner en el layout de la aplicación. A continuación, se muestra un sencillo ejemplo de integración:

import { RNWortiseAdSize, WortiseBanner } from '@wortise/react-native-sdk';

/* ... */

const bannerRef = useRef(null);

return (
  <View style={styles.container}>
    <Button
      onPress={bannerRef.current?.loadAd()}
      title="Cargar Banner"
    />
    <WortiseBanner
      ref={bannerRef}
      adSize={RNWortiseAdSize.HEIGHT_50}
      adUnitId="Ad Unit ID de Wortise"
    />
  </View>
);

El widget tiene soporte para los siguientes parámetros:

Parámetro	Tipo	Requerido	Descripción
adUnitId	String	Si	El ID del ad unit a asignar al banner
adSize	String	No	Tamaño máximo (altura) para el banner. Los posibles valores para este parámetro se encuentran declarados en el objeto `RNWortiseAdSize`
autoRefreshTime	Integer	No	Valor en segundos que representa el tiempo que deberá transcurrir para que se realice la carga de un nuevo anuncio banner
onClicked	Function	No	Función que es invocada cuando el banner ha sido clickeado
onFailedToLoad	Function	No	Función que es invocada cuando el banner no ha podido cargar un anuncio
onImpression	Function	No	Función que es invocada cuando el banner ha generado una impresión
onLoaded	Function	No	Función que es invocada cuando el banner ha cargado un anuncio
onRevenuePaid	Function	No	Función que es invocada cuando el banner ha generado un ingreso
onSizeChange	Function	No	Función que es invocada cuando el banner ha cambiado de tamaño
requestParameters	Object	No	Parámetros extra para la solicitud del anuncio, como la posición del banner colapsable

Banners adaptativos

Los banners adaptativos son un nuevo formato de banner que se caracteriza por adaptar el tamaño de los anuncios según el dispositivo y la interfaz de la aplicación, para lograr maximizar el rendimiento.

Actualmente existe soporte para dos tipos de banners adaptativos:

Anclados

Este tipo de banner está diseñado para reemplazar a los banners tradicionales de 320x50 y ser posicionado en la parte superior o inferior de la pantalla.

Para hacer uso de este formato, se debe pasar un AdSize al widget BannerAd generado de la siguiente manera:

import { RNWortiseAdSize } from '@wortise/react-native-sdk';

// Es necesario especificar la anchura del banner
RNWortiseAdSize.getAnchoredAdaptiveBannerAdSize(width);

Inline

Este otro tipo de banner, en comparación con los anclados, está diseñado para tener una altura variable y ser posicionado dentro de un contenido desplazable.

En este caso, se debe generar un AdSize como se muestra a continuación:

import { RNWortiseAdSize } from '@wortise/react-native-sdk';

// Es necesario especificar la anchura del banner. La altura máxima es un
// parámetro opcional (pasando valor 0 o negativo)
RNWortiseAdSize.getInlineAdaptiveBannerAdSize(width, maxHeight);

Banners colapsables

Los banners colapsables son banners anclados que inicialmente se muestran como una superposición de mayor tamaño, con un botón que los colapsa hasta el tamaño declarado. Su objetivo es mejorar el rendimiento de los banners anclados sin ocupar más espacio de forma permanente.

Para solicitar uno, hay que indicar la posición deseada a través de la propiedad requestParameters:

<WortiseBanner
  adSize={adSize}
  adUnitId="Ad Unit ID de Wortise"
  requestParameters={{ collapsible: 'bottom' }}
/>

La posición determina dónde se ancla el anuncio expandido, y debe coincidir con la posición del banner dentro del layout de la app:

Valor	Descripción
`'bottom'`	El banner se encuentra en la parte inferior
`'top'`	El banner se encuentra en la parte superior