> 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-publisher/adding-exoclick-ad-zones-to-apps.md).

# Aggiungere le zone annunci 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="https://645841744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ4RqRdVZkeXomdmwHKOL%2Fuploads%2F3KlWRuywlX0HnfA9oaQd%2Fvast_ad_app.png?alt=media&amp;token=d5e209de-2c4a-4176-913a-51a23d8b9712" 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="https://645841744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ4RqRdVZkeXomdmwHKOL%2Fuploads%2Fmdr86ThbMTKDHOWrsPYp%2Fvast_ad_app.gif?alt=media&amp;token=1de3871f-db9f-4262-8c5b-f3297a2f836f" 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="https://645841744-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FJ4RqRdVZkeXomdmwHKOL%2Fuploads%2FH1MSMFagxbBuvuQPDKd7%2Fnative-android-app.gif?alt=media&amp;token=5ee56d0d-20f8-4594-a70b-2e33ff4b3a2b" 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.exoclick.com/tutorials/it/tutorial/tutorial-per-publisher/adding-exoclick-ad-zones-to-apps.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.
