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

Existen tres formas de integrar un banner: añadiendo la vista de banner a un layout XML, creándola mediante código o insertándola en Jetpack Compose. A continuación se muestran ejemplos de cada opción:

Layout XML

<com.wortise.ads.banner.BannerAd
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  app:adSize="HEIGHT_50"
  app:adUnitId="Ad Unit ID de Wortise"
/>

El widget tiene soporte para los siguientes parámetros:

Parámetro	Tipo	Requerido	Descripción
app:adUnitId	String	Si	El ID del ad unit a asignar al banner
app:adSize	AdSize	No	Tamaño máximo (altura) para el banner. Los posibles valores para este parámetro se encuentran declarados en la clase AdSize
app:autoRefreshTime	Integer	No	Valor en segundos que representa el tiempo que deberá transcurrir para que se realice la carga de un nuevo anuncio banner

Código

Kotlin

class MainActivity : Activity() {

    private var bannerAd: BannerAd? = null

    override fun onCreate(savedInstanceState: Bundle?) {
        ...
        bannerAd = BannerAd(this).also {
            it.adSize = AdSize.HEIGHT_50
            it.adUnitId = "<Ad Unit ID de Wortise>"

            // Por ejemplo, añadímos el BannerAd en un FrameLayout
            val frameLayout = findViewById<FrameLayout>(R.id.frame)
            frameLayout.addView(it)

            it.loadAd()
        }
    }

    override fun onDestroy() {
        ...
        bannerAd?.destroy()
    }

    override fun onPause() {
        ...
        bannerAd?.pause()
    }

    override fun onResume() {
        ...
        bannerAd?.resume()
    }

}

Java

public class MainActivity extends Activity {

    private BannerAd mBannerAd;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        ...
        mBannerAd = new BannerAd(this);
        mBannerAd.setAdSize(AdSize.HEIGHT_50);
        mBannerAd.setAdUnitId("<Ad Unit ID de Wortise>");

        // Por ejemplo, añadímos el BannerAd en un FrameLayout
        FrameLayout frameLayout = findViewById(R.id.frame);
        frameLayout.addView(mAdView);

        mBannerAd.loadAd();
    }

    @Override
    public void onDestroy() {
        ...
        mBannerAd.destroy();
    }

    @Override
    public void onPause() {
        ...
        mBannerAd.pause();
    }

    @Override
    public void onResume() {
        ...
        mBannerAd.resume();
    }
}

La clase BannerAd ofrece los siguientes métodos para configurar la instancia:

Método	Requerido	Descripción
setAdUnitId(String)	Si	Asigna un ad unit al banner
setAdSize(AdSize)	No	Tamaño máximo (altura) para el banner. Los posibles valores para este parámetro se encuentran declarados en la clase AdSize
setAutoRefreshTime(long)	No	Valor en milisegundos que representa el tiempo que deberá transcurrir para que se realice la carga de un nuevo anuncio banner
setAutoRefreshTime(long, TimeUnit)	No	Igual que el método anterior, pero permitiendo especificar la unidad de tiempo del valor indicado

Jetpack Compose

Los anuncios de banner de Wortise se pueden integrar en Jetpack Compose utilizando la API de interoperabilidad AndroidView de Compose.

@Composable
fun WortiseBanner() {
    val context = LocalContext.current
    val banner = remember { BannerAd(context) }

    AndroidView(
        factory = {
            banner.apply {
                adSize = AdSize.HEIGHT_50
                adUnitId = "<Ad Unit ID de Wortise>"

                loadAd()
            }
        },
        modifier = Modifier
            .fillMaxWidth()
            .wrapContentHeight()
    )

    DisposableEffect(Unit) {
        onDispose {
            banner.destroy()
        }
    }
}

La clase BannerAd es una View estándar de Android, por lo que se puede insertar en una interfaz de Compose mediante AndroidView.

La instancia del banner se crea con remember para conservarla entre recomposiciones y se destruye cuando el composable sale de la composición.

Ejemplo

@Composable
fun MyScreen() {
    Column {
        // Contenido de tu pantalla

        WortiseBanner()
    }
}

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 utilizar el siguiente código para configurar un tamaño adaptativo, indicando la anchura del banner:

Kotlin

// Es necesario especificar la anchura del banner
val adSize = AdSize.getAnchoredAdaptiveBannerAdSize(context, width)
bannerAd.adSize = adSize

Java

// Es necesario especificar la anchura del banner
AdSize adSize = AdSize.getAnchoredAdaptiveBannerAdSize(context, width);
mBannerAd.setAdSize(adSize);

Alternativamente, se puede implementar esta otra opción para que el SDK calcule automáticamente la anchura del banner, donde se deberá pasar la propia instancia del BannerAd o el View que va a contener a dicho banner:

Precaución

En esta opción, es muy recomendable que el View que se pase al método ya se encuentre agregado al layout de la app, para que el SDK pueda calcular correctamente todas las dimensiones.

Kotlin

val adSize = AdSize.getAnchoredAdaptiveBannerAdSize(view)
bannerAd.adSize = adSize

Java

AdSize adSize = AdSize.getAnchoredAdaptiveBannerAdSize(view);
mBannerAd.setAdSize(adSize);

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 utilizar un código como el siguiente para configurar un tamaño adaptativo apropiado:

Kotlin

val maxHeight = 200

// Es necesario especificar la anchura del banner. La altura máxima es un
// parámetro opcional
val adSize = AdSize.getInlineAdaptiveBannerAdSize(context, width, maxHeight)
bannerAd.adSize = adSize

Java

int maxHeight = 200;

// Es necesario especificar la anchura del banner. La altura máxima es un
// parámetro opcional
AdSize adSize = AdSize.getInlineAdaptiveBannerAdSize(
    context, width, maxHeight
);
mBannerAd.setAdSize(adSize);

Alternativamente, se puede implementar esta otra opción para que el SDK calcule automáticamente la anchura del banner, donde se deberá pasar la propia instancia del BannerAd o el View que va a contener a dicho banner:

Precaución

En esta opción, es muy recomendable que el View que se pase al método ya se encuentre agregado al layout de la app, para que el SDK pueda calcular correctamente todas las dimensiones.

Kotlin

val maxHeight = 200

val adSize = AdSize.getInlineAdaptiveBannerAdSize(view, maxHeight)
bannerAd.adSize = adSize

Java

int maxHeight = 200;

AdSize adSize = AdSize.getInlineAdaptiveBannerAdSize(view, maxHeight);
mBannerAd.setAdSize(adSize);

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 pasar una instancia de RequestParameters con la posición deseada al método loadAd:

Kotlin

val parameters = RequestParameters(
    collapsible = CollapsiblePosition.BOTTOM
)

bannerAd.loadAd(parameters)

Java

RequestParameters parameters = new RequestParameters();
parameters.setCollapsible(CollapsiblePosition.BOTTOM);

mBannerAd.loadAd(parameters);

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
CollapsiblePosition.BOTTOM	El banner se encuentra en la parte inferior
CollapsiblePosition.TOP	El banner se encuentra en la parte superior

Nota

Los banners colapsables requieren un tamaño adaptativo anclado, así que asegúrate de haber configurado el banner tal y como se explica en la sección Anclados.

Precaución

El formato colapsable solo se solicita para el primer anuncio de una instancia de BannerAd. Cuando el banner se refresca, los siguientes anuncios se solicitan como banners anclados normales.

Configuración del listener

Se puede añadir un listener a cualquier instancia de BannerAd para recibir los diferentes eventos que sucedan durante su ciclo de vida. Para ello, es necesario implementar la interfaz BannerAd.Listener, como se muestra en el siguiente ejemplo:

Kotlin

bannerAd.listener = object : BannerAd.Listener {

    override fun onBannerClicked(ad: BannerAd) {
        // Invocado cuando el anuncio ha sido clickeado
    }

    override fun onBannerFailedToLoad(ad: BannerAd, error: AdError) {
        // Invocado cuando el anuncio no se ha podido cargar
        // (por error o falta de inventario)
    }

    override fun onBannerImpression(ad: BannerAd) {
        // Invocado cuando el anuncio ha generado una impresión
    }

    override fun onBannerLoaded(ad: BannerAd) {
        // Invocado cuando el anuncio ha sido cargado
    }

    override fun onBannerRevenuePaid(ad: BannerAd, data: Revenuedata) {
        // Invocado cuando el anuncio ha generado un ingreso
    }

}

Java

mBannerAd.setListener(new BannerAd.Listener() {
    @Override
    public void onBannerClicked(@NonNull BannerAd ad) {
        // Invocado cuando el anuncio ha sido clickeado
    }

    @Override
    public void onBannerFailedToLoad(@NonNull BannerAd ad,
                                     @NonNull AdError error) {
        // Invocado cuando el anuncio no se ha podido cargar
        // (por error o falta de inventario)
    }

    @Override
    public void onBannerImpression(@NonNull BannerAd ad) {
        // Invocado cuando el anuncio ha generado una impresión
    }

    @Override
    public void onBannerLoaded(@NonNull BannerAd ad) {
        // Invocado cuando el anuncio ha sido cargado
    }

    @Override
    public void onBannerRevenuePaid(@NonNull BannerAd ad,
                                    @NonNull Revenuedata data) {
        // Invocado cuando el anuncio ha generado un ingreso
    }
});