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

# Ajouter des zones publicitaires ExoClick aux applications

## Formats publicitaires pris en charge pour les applications mobiles

Vous pouvez utiliser les formats suivants :

* VAST
* Bannière
* Bannière fixe
* Slider vidéo
* Multi-format
* Message instantané
* Bannière intégrée à la vidéo
* Notifications In-Page Push

Pour ajouter des zones publicitaires ExoClick à votre application, vous utiliserez `react-native-webview` bibliothèque pour afficher le code HTML de la publicité.

## Exemple : Bannière

{% stepper %}
{% step %}

### Installer et importer react-native-webview

Exécutez la commande suivante :

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

Ensuite, importez le composant WebView dans votre fichier React Native :

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

{% endstep %}

{% step %}

### Code publicitaire

Créez une chaîne JavaScript qui contient le code HTML complet de votre zone publicitaire :

```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" %}
N'oubliez pas de remplacer `YOUR_ZONE_ID` avec l'ID réel
{% endhint %}
{% endstep %}

{% step %}

### WebView

Importez le composant WebView dans votre fichier React Native

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

Ensuite, placez un composant WebView dans la mise en page JSX de votre application. Passez la chaîne HTML au `source` propriété :

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

Ainsi, vous devriez pouvoir afficher des publicités dans votre application mobile.

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

## Exemple : VAST

Le lecteur vidéo et la balise VAST seront chargés dans une seule chaîne HTML. Cet exemple utilise [Fluid Player](https://www.fluidplayer.com/) comme lecteur vidéo pour diffuser des publicités.

Nous utilisons le même processus de configuration que celui démontré dans l'exemple de bannière publicitaire.

```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" %}
N'oubliez pas de remplacer `YOUR_ZONE_ID` et `https://path-to-your-video.mp4` avec vos propres informations.
{% endhint %}

Chargez-le ensuite avec WebView :

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

En suivant ces étapes, votre application affichera désormais des publicités vidéo.

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

## Zone publicitaire d'application Android native

L'exemple complet fonctionnel est disponible dans ce [dépôt](https://github.com/EXOCLICK-TECH/android-native-ads)

Vous pouvez consulter le code et voir comment la publicité est rendue dans une application Android.

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

### Où trouver l'implémentation ?

Les principaux fichiers responsables de l'affichage de la publicité sont :

* **Conteneur HTML de la publicité**\
  `android-native-ads/na_app/app/src/main/assets/exoclick_ads.html`\
  Contient le balisage publicitaire ExoClick.
* **Logique WebView Android**\
  `android-native-ads/na_app/app/src/main/java/com/exoclick/adtest/MainActivity.kt`\
  Charge le fichier HTML.\
  Gère les clics sur les publicités en les ouvrant dans le navigateur externe de l'appareil.

{% hint style="info" %}
**Remarques :** Ce projet est conçu comme une simple référence, et non comme une solution de production complète. Il montre la configuration de base nécessaire pour afficher des publicités ExoClick dans une application 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/fr/tutoriels/tutoriels-editeurs/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.
