# 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 dos formas diferentes de realizar la integración de un banner: usando código o añadiendo la vista de banner en un layout. A continuación se muestran ejemplos de ambas opciones:

### **Layout XML**

```markup
<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**

{% tabs %}
{% tab title="Kotlin" %}

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

{% endtab %}

{% tab title="Java" %}

```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();
    }
}
```

{% endtab %}
{% endtabs %}

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                             |

## **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:

{% tabs %}
{% tab title="Kotlin" %}

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

{% endtab %}

{% tab title="Java" %}

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

{% endtab %}
{% endtabs %}

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:

{% hint style="warning" %}
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.
{% endhint %}

{% tabs %}
{% tab title="Kotlin" %}

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

{% endtab %}

{% tab title="Java" %}

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

{% endtab %}
{% endtabs %}

### 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:

{% tabs %}
{% tab title="Kotlin" %}

```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
```

{% endtab %}

{% tab title="Java" %}

```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);
```

{% endtab %}
{% endtabs %}

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:

{% hint style="warning" %}
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.
{% endhint %}

{% tabs %}
{% tab title="Kotlin" %}

```kotlin
val maxHeight = 200

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

{% endtab %}

{% tab title="Java" %}

```java
int maxHeight = 200;

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

{% endtab %}
{% endtabs %}

## **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:

{% tabs %}
{% tab title="Kotlin" %}

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

{% endtab %}

{% tab title="Java" %}

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

{% endtab %}
{% endtabs %}