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

# Ajout de 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="https://4025759841-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 %}

## 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="https://4025759841-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>

## 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="https://4025759841-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>

### 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 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/fr/tutoriels/tutoriels-pour-les-editeurs/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.
