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

Para realizar la integración de un banner, es necesario añadir un componente de clase `WABannerAd` en la interfaz de la app.

A continuación, se debe solicitar la carga de un anuncio como en el ejemplo que se muestra a continuación:

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

<pre class="language-swift"><code class="lang-swift"><strong>import UIKit
</strong>import WortiseSDK

class ViewController: UIViewController {
    @IBOutlet
    weak var bannerAd: WABannerAd!

    override func viewDidLoad() {
        super.viewDidLoad()
        ...
        bannerAd.adUnitId = "Ad Unit ID de Wortise"
        bannerAd.adSize = WAAdSize.height50
        bannerAd.rootViewController = self
        // Opcional: valor en segundos para auto-refrescar el anuncio
        bannerAd.autoRefreshTime = 60.0
        bannerAd.loadAd()
    }
}
</code></pre>

{% endtab %}
{% endtabs %}

## **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="Swift" %}

```swift
// Es necesario especificar la anchura del banner
let adSize = WAAdSize.getAnchoredAdaptiveBannerAdSize(width: width)
bannerAd.adSize = 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 `WABannerAd` o el `UIView` que va a contener a dicho banner:

{% hint style="warning" %}
En esta opción, es **muy recomendable** que el `UIView` 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="Swift" %}

```swift
let adSize = WAAdSize.getAnchoredAdaptiveBannerAdSize(container: view)
bannerAd.adSize = 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="Swift" %}

```swift
let maxHeight = 200

// Es necesario especificar la anchura del banner. La altura máxima es un
// parámetro opcional
let adSize = WAAdSize.getInlineAdaptiveBannerAdSize(width: width,
                                                    maxHeight: maxHeight)
bannerAd.adSize = 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 `WABannerAd` o el `UIView` que va a contener a dicho banner:

{% hint style="warning" %}
En esta opción, es **muy recomendable** que el `UIView` 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" %}

```swift
let maxHeight = 200

let adSize = AdSize.getInlineAdaptiveBannerAdSize(container: view,
                                                  maxHeight: maxHeight)
bannerAd.adSize = adSize
```

{% endtab %}
{% endtabs %}

## **Configuración del delegado**

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

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

```swift
extension ViewController : WABannerDelegate {

    func didClick(bannerAd: WABannerAd) {
        // Invocado cuando el anuncio ha sido clickeado
    }
    
    func didFailToLoad(bannerAd: WABannerAd, error: WAAdError) {
        // Invocado cuando el anuncio no se ha podido cargar
        // (por error o falta de inventario)
    }

    func didImpress(bannerAd: WABannerAd) {
        // Invocado cuando el anuncio ha generado una impresión
    }

    func didLoad(bannerAd: WABannerAd) {
        // Invocado cuando el anuncio ha sido cargado
    }
    
    func didPayRevenue(bannerAd: WABannerAd, data: WARevenueData) {
        // Invocado cuando el anuncio ha generado un ingreso
    }
}
```

Una vez implementada la interfaz, se asigna el delegate a la instancia del anuncio:

```swift
bannerAd.delegate = self
```

{% endtab %}
{% endtabs %}