# 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 `BannerAd` en el layout de la aplicación. A continuación, se muestra un sencillo ejemplo de integración:

```dart
import 'package:wortise/ad_size.dart';
import 'package:wortise/banner_ad.dart';

/* ... */

@override
Widget build(BuildContext context) {
  return MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title: const Text('Wortise Flutter Example'),
      ),
      body: ListView(
        padding: EdgeInsets.all(20),
        children: [
          /* El banner debe estar dentro de un contenedor */
          Container(
            height: 50,
            child: BannerAd(
              adSize: AdSize.HEIGHT_50,
              adUnitId: 'Ad Unit ID de Wortise',
            ),
          )
        ]
      ),
    ),
  );
}
```

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**          | AdSize   | No        | Tamaño máximo (altura) para el banner. Los posibles valores para este parámetro se encuentran declarados en la clase `AdSize` |
| **autoRefreshTime** | Integer  | No        | Valor en segundos que representa el tiempo que deberá transcurrir para que se realice la carga de un nuevo anuncio banner     |
| **keepAlive**       | Boolean  | No        | Indica si la instancia del banner debe mantenerse "viva" en todo momento                                                      |
| **listener**        | Function | No        | Listener para recibir los eventos del banner (`BannerAdEvent`)                                                                |

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

```dart
// Es necesario especificar la anchura del banner
AdSize.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:

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

## **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 asignar una función al parámetro `listener` del widget, tal y como se muestra a continuación:

```dart
BannerAd(
  adSize: AdSize.HEIGHT_50,
  adUnitId: 'Ad Unit ID de Wortise',
  listener: (event, args) {
    switch (event) {
      case BannerAdEvent.CLICKED: {
        // El anuncio ha sido clickeado
      }
      break;
      
      case BannerAdEvent.FAILED_TO_LOAD: {
        // El anuncio no se ha podido cargar
      }
      break;

      case BannerAdEvent.IMPRESSION: {
        // El anuncio ha generado una impresión 
      }
      break;
      
      case BannerAdEvent.LOADED: {
        // El anuncio ha sido cargado
      }
      break;
      
      case BannerAdEvent.REVENUE_PAID: {
        // El anuncio ha sido generado un ingreso
      }
      break;
    }
  },
)
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.wortise.com/flutter-sdk/integracion-del-sdk/banner.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.