> 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/it/tutorial/tutorial-per-editori/adding-exoclick-ad-zones-to-apps.md).

# Aggiungere zone pubblicitarie ExoClick alle app

## Formati pubblicitari supportati per app mobili

Puoi utilizzare i seguenti formati:

* VAST
* Banner
* Banner sticky
* Slider video
* Multi-formato
* Messaggio istantaneo
* Banner in-video
* Notifiche In-Page Push

Per aggiungere zone pubblicitarie ExoClick alla tua app, utilizzerai `react-native-webview` la libreria per visualizzare il codice HTML dell'annuncio.

## Esempio: Banner

{% stepper %}
{% step %}

### Installa e importa react-native-webview

Esegui il seguente comando:

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

Quindi, importa il componente WebView nel tuo file React Native:

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

{% endstep %}

{% step %}

### Codice dell'annuncio

Crea una stringa JavaScript che contenga il codice HTML completo per la tua zona pubblicitaria:

```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" %}
Ricorda di sostituire `YOUR_ZONE_ID` con l'ID effettivo
{% endhint %}
{% endstep %}

{% step %}

### WebView

Importa il componente WebView nel tuo file React Native

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

Quindi, inserisci un componente WebView nel layout JSX della tua app. Passa la stringa HTML a `source` prop:

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

In questo modo, dovresti essere in grado di visualizzare annunci pubblicitari all'interno della tua app mobile.

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

## Esempio: VAST

Il lettore video e il tag VAST verranno caricati all'interno di una singola stringa HTML. Questo esempio utilizza [Fluid Player](https://www.fluidplayer.com/) come lettore video per servire gli annunci.

Utilizziamo lo stesso processo di configurazione mostrato nell'esempio dell'annuncio 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" %}
Ricorda di sostituire `YOUR_ZONE_ID` e `https://path-to-your-video.mp4` con le tue informazioni.
{% endhint %}

Quindi caricalo con WebView:

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

Seguendo questi passaggi, la tua app visualizzerà ora annunci video.

<figure><img src="/files/33a1e3a65666a5d1a15b94122d47a93946a8be96" alt=""><figcaption></figcaption></figure>

## Zona pubblicitaria per app Android native

L'esempio completo funzionante è disponibile in questo [repository](https://github.com/EXOCLICK-TECH/android-native-ads)

Puoi esaminare il codice e vedere come l'annuncio viene visualizzato all'interno di un'app Android.

<figure><img src="/files/377d76fdbc46f3878965eefe39fda2fcff336274" alt="" width="375"><figcaption></figcaption></figure>

### Dove trovare l'implementazione?

I principali file responsabili della visualizzazione dell'annuncio sono:

* **Contenitore HTML dell'annuncio**\
  `android-native-ads/na_app/app/src/main/assets/exoclick_ads.html`\
  Contiene il markup dell'annuncio ExoClick.
* **Logica WebView Android**\
  `android-native-ads/na_app/app/src/main/java/com/exoclick/adtest/MainActivity.kt`\
  Carica il file HTML.\
  Gestisce i clic sugli annunci aprendoli nel browser esterno del dispositivo.

{% hint style="info" %}
**Note:** Questo progetto è pensato come un semplice riferimento, non come una soluzione completa per la produzione. Mostra la configurazione di base necessaria per visualizzare annunci ExoClick all'interno di un'app 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/it/tutorial/tutorial-per-editori/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.
