> 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/pt/tutoriais/tutoriais-para-editores/adding-exoclick-ad-zones-to-apps.md).

# Adicionar Zonas de Anúncios ExoClick a Aplicações

## Formatos de anúncios suportados para aplicações móveis

Pode usar os seguintes formatos:

* VAST
* Banner
* Banner fixo
* Slider de vídeo
* Multiformato
* Mensagem instantânea
* Banner em vídeo
* Notificações In-Page Push

Para adicionar zonas de anúncios ExoClick à sua aplicação, irá utilizar a `react-native-webview` biblioteca para exibir o código HTML do anúncio.

## Exemplo: Banner

{% stepper %}
{% step %}

### Instalar e importar react-native-webview

Execute o seguinte comando:

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

Depois, importe o componente WebView para o seu ficheiro React Native:

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

{% endstep %}

{% step %}

### Código do anúncio

Crie uma string JavaScript que contenha o código HTML completo da sua zona de anúncios:

```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" %}
Lembre-se de substituir `YOUR_ZONE_ID` pelo ID real
{% endhint %}
{% endstep %}

{% step %}

### WebView

Importe o componente WebView para o seu ficheiro React Native

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

De seguida, coloque um componente WebView no layout JSX da sua aplicação. Passe a string HTML para a `source` propriedade:

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

Com isso, deverá conseguir exibir anúncios dentro da sua aplicação móvel.

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

## Exemplo: VAST

O reprodutor de vídeo e a tag VAST serão carregados numa única string HTML. Este exemplo usa [Fluid Player](https://www.fluidplayer.com/) como reprodutor de vídeo para exibir anúncios.

Usamos o mesmo processo de configuração demonstrado no exemplo do anúncio em 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" %}
Lembre-se de substituir `YOUR_ZONE_ID` e `https://path-to-your-video.mp4` com as suas próprias informações.
{% endhint %}

Depois, carregue-o com WebView:

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

Ao seguir estes passos, a sua aplicação passará agora a exibir anúncios em vídeo.

<figure><img src="/files/f4f581a6d06a32a5fb2966442a67429269962899" alt=""><figcaption></figcaption></figure>

## Zona de anúncios de aplicação Android nativa

O exemplo completo funcional está disponível neste [repositório](https://github.com/EXOCLICK-TECH/android-native-ads)

Pode rever o código e ver como o anúncio é renderizado dentro de uma aplicação Android.

<figure><img src="/files/512c5ceeded8a696a47ffc03863dc2f0f842a3e6" alt="" width="375"><figcaption></figcaption></figure>

### Onde encontrar a implementação?

Os principais ficheiros responsáveis por servir o anúncio são:

* **Contentor HTML do anúncio**\
  `android-native-ads/na_app/app/src/main/assets/exoclick_ads.html`\
  Contém a marcação do anúncio ExoClick.
* **Lógica do WebView Android**\
  `android-native-ads/na_app/app/src/main/java/com/exoclick/adtest/MainActivity.kt`\
  Carrega o ficheiro HTML.\
  Trata os cliques no anúncio abrindo-os no navegador externo do dispositivo.

{% hint style="info" %}
**Notas:** Este projeto destina-se a servir como uma referência simples, não como uma solução completa para produção. Mostra a configuração básica necessária para exibir anúncios ExoClick dentro de uma aplicação 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/pt/tutoriais/tutoriais-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.
