> For the complete documentation index, see [llms.txt](https://docs.exoclick.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.exoclick.com/tutorials/es/tutoriales/tutoriales-para-editores/adding-exoclick-ad-zones-to-apps.md).

# Añadir zonas publicitarias de ExoClick a aplicaciones

## Formatos de anuncios compatibles para aplicaciones móviles

Puedes usar los siguientes formatos:

* VAST
* Banner
* Banner fijo
* Deslizador de video
* Multiformato
* Mensaje instantáneo
* Banner en video
* Notificaciones In-Page Push

Para añadir zonas de anuncios de ExoClick a tu aplicación, usarás la `react-native-webview` librería para mostrar el código HTML del anuncio.

## Ejemplo: Banner

{% stepper %}
{% step %}

### Instalar e importar react-native-webview

Ejecuta el siguiente comando:

```bash
npm install react-native-webview
```

Luego, importa el componente WebView en tu archivo de React Native:

```javascript
import { WebView } from 'react-native-webview';
```

{% endstep %}

{% step %}

### Código del anuncio

Crea una cadena de JavaScript que contenga el código HTML completo para tu zona de anuncios:

```javascript
const bannerAdHTML = `
   <!DOCTYPE html>
   <html>
     <head>
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
     </head>
     <body style="margin:0; padding:0; text-align:center;">
       <script async type="application/javascript" src="https://a.magsrv.com/ad-provider.js"></script>
       <ins class="eas6a97888e2" data-zoneid="YOUR_ZONE_ID"></ins>
       <script>(AdProvider = window.AdProvider || []).push({"serve": {}});</script>
     </body>
   </html>
 `;
```

{% hint style="info" %}
Recuerda reemplazar `YOUR_ZONE_ID` con el ID real
{% endhint %}
{% endstep %}

{% step %}

### WebView

Importa el componente WebView en tu archivo de React Native

```javascript
import { View } from 'react-native';
```

A continuación, coloca un componente WebView en el JSX de tu aplicación. Pasa la cadena HTML a la `source` propiedad:

```javascript
<WebView
  originWhitelist={['*']}
  source={{ html: bannerAdHTML }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  style={{ height: 250 }}
/>
```

Con eso, deberías poder mostrar anuncios dentro de tu aplicación móvil.

<figure><img src="/files/49be25af330005839b76e56c39ee4109e11bee21" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

## Ejemplo: VAST

El reproductor de video y la etiqueta VAST se cargarán dentro de una sola cadena HTML. Este ejemplo usa [Fluid Player](https://www.fluidplayer.com/) como reproductor de video para mostrar anuncios.

Usamos el mismo proceso de configuración que se mostró en el ejemplo del anuncio banner.

```javascript
const fluidPlayerHTML = `
 <!DOCTYPE html>
 <html>
   <head>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
   <body>
     <video id='my-video' controls>
       <source src='https://path-to-your-video.mp4' type='video/mp4' />
     </video>
     <script src="https://cdn.fluidplayer.com/v3/current/fluidplayer.min.js"></script>
     <script>
       fluidPlayer('my-video', {
         vastOptions: {
           adList: [{
             roll: "preRoll",
             vastTag: "https://s.magsrv.com/v1/vast.php?idzone=YOUR_ZONE_ID"
           }]
         }
       });
     </script>
   </body>
 </html>
`;
```

{% hint style="info" %}
Recuerda reemplazar `YOUR_ZONE_ID` y `https://path-to-your-video.mp4` con tu propia información.
{% endhint %}

Luego cárgalo con WebView:

```javascript
<WebView
  originWhitelist={['*']}
  source={{ html: fluidPlayerHTML }}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  style={{ height: 200 }}
/>
```

Siguiendo estos pasos, tu aplicación mostrará anuncios de video.

<figure><img src="/files/20b489725c909a24d60cfae2381250c31d02ba91" alt=""><figcaption></figcaption></figure>

## Zona de anuncios de una aplicación Android nativa

El ejemplo completo en funcionamiento está disponible en este [repositorio](https://github.com/EXOCLICK-TECH/android-native-ads)

Puedes revisar el código y ver cómo se renderiza el anuncio dentro de una aplicación Android.

<figure><img src="/files/2b1556f4cc8735982493558ff941683c1dd4941d" alt="" width="375"><figcaption></figcaption></figure>

### ¿Dónde encontrar la implementación?

Los archivos principales responsables de mostrar el anuncio son:

* **Contenedor HTML del anuncio**\
  `android-native-ads/na_app/app/src/main/assets/exoclick_ads.html`\
  Contiene el marcado del anuncio de ExoClick.
* **Lógica de Android WebView**\
  `android-native-ads/na_app/app/src/main/java/com/exoclick/adtest/MainActivity.kt`\
  Carga el archivo HTML.\
  Gestiona los clics en los anuncios abriéndolos en el navegador externo del dispositivo.

{% hint style="info" %}
**Notas:** Este proyecto está pensado como una referencia sencilla, no como una solución completa de producción. Muestra la configuración básica necesaria para mostrar anuncios de ExoClick dentro de una aplicación Android.
{% endhint %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.exoclick.com/tutorials/es/tutoriales/tutoriales-para-editores/adding-exoclick-ad-zones-to-apps.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
