> 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/publishers/fr/sites-et-zones/configuration-des-annonces-natives.md).

# Configuration des annonces natives

Créer une [Annonce native](/publishers/fr/sites-et-zones/create-zone.md#recommendation-widget) zone est simple mais puissamment personnalisable. Vous pouvez utiliser des processus légèrement différents pour configurer une zone d'annonce native selon vos besoins :

* **Scénario A**: Vous souhaitez simplement configurer une zone publicitaire, choisir le format des images de la zone d'annonce native, puis définir la taille de la zone publicitaire sur votre site pour qu'elle corresponde.
* **Scénario B**: Vous souhaitez configurer la zone publicitaire pour qu'elle corresponde à une taille ou à un format d'image personnalisé, afin que la zone publicitaire ait le même aspect que votre site et s'intègre parfaitement.
* **Scénario C**: Vous avez sur votre site une zone d'une taille spécifique et souhaitez créer une zone publicitaire qui s'y adapte et soit esthétique.

Quel que soit le scénario choisi, la première chose à faire est de créer une zone d'annonce native.

## Création d'une zone d'annonce native

Lorsque vous êtes connecté en tant qu'éditeur, cliquez sur **Sites et zones**, **Nouvelle zone**, puis développez la **Native** section, sélectionnez le format Annonce native **Widget de recommandation** puis cliquez sur **Suivant**.

![Créer une zone native](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/1lsZ4Ki3CIL173vBDbzo/assets/hires/create-zone-native.png)

Renseignez les détails de la zone puis cliquez sur **Suivant**.

{% tabs %}
{% tab title="Scénario A : Disposition rapide : définir le format" %}
Dans ce scénario, vous définissez le format des images dans le panneau d'administration, et il n'est pas nécessaire de définir la taille totale de la zone publicitaire. Lors de l'utilisation de la **Disposition rapide**, la zone publicitaire que vous créez s'adaptera automatiquement à la taille du conteneur dans lequel vous la placez.

{% stepper %}
{% step %}

### Étape 1

![Étape native 1](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/i4nnDybTXZj0jYx8l8ie/assets/hires/native/sca-step1.png)

Sélectionnez l'onglet **Disposition rapide** . Dans la **Disposition bureau** section, définissez le nombre de colonnes et de lignes d'annonces souhaité sur ordinateur.
{% endstep %}

{% step %}

### Étape 2

![Étape native 2](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/XcQLr7Fi2GR8u2O7oLcD/assets/hires/native/sca-step2.png)

Ensuite, choisissez le format de vos images dans la liste déroulante **Paramètres de l'image** . Vous pouvez choisir entre **1:1**, **4:3** ou **16:9**, pour correspondre aux vignettes de votre site.
{% endstep %}

{% step %}

### Étape 3

![Étape native 3](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/5LzyX7rTkfZEucmCbY04/assets/hires/native/sca-step3.png)

* Une fois le format choisi, utilisez la case à cocher pour décider si vous souhaitez afficher du texte ou non, puis choisissez où il s'affiche.
* Ce texte se compose d'un **Titre** et d'une **Description**. Vous pouvez les activer ou les désactiver individuellement dans les sections **Titre** et **Description** si vous le souhaitez.
* Vérifiez l'aperçu à droite pour voir à quoi ressemble votre zone publicitaire, et ajustez à nouveau les paramètres si nécessaire.
  {% endstep %}

{% step %}

### Étape 4

![Étape native 4](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/pXcT9dbHa7ocZdeuSgGC/assets/hires/native/sca-step4.png)

* Répétez les étapes 1 à 3 ci-dessus dans la **Disposition mobile** section pour configurer votre zone publicitaire pour mobile.
  {% endstep %}

{% step %}

### Étape 5

![Étape native 5](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/aEaqn3SVREPSkqBxUCks/assets/hires/native/mobile-breaking-point.png)

* Vérifiez l'aperçu pour **ordinateur** et **mobile** sur le côté droit de l'écran. Vous pouvez définir où se situe le point de rupture entre l'affichage ordinateur et mobile dans la liste déroulante **Point de rupture mobile** de **Options avancées**.
* Le point de rupture peut être défini à **800px** pour iPad, **450px** pour mobile et **Non responsive**. Lorsque nous modifions le point de rupture, cela change si les paramètres de la section Disposition bureau s'appliquent au bureau et à l'iPad, ou uniquement au bureau.
* Lorsque l'aperçu vous convient, cliquez sur **Créer**.
  {% endstep %}

{% step %}

### Étape 6

![Étape native 6](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/rlwldJZoXYmsGjD1utp6/assets/hires/native/scn_new.png)

* Copiez la **balise HTML de zone** et ajoutez-la à votre site.
* La zone publicitaire s'ajustera automatiquement à 100 % du conteneur dans lequel vous placez la balise. Autrement dit, plus le conteneur est grand, plus la zone et les annonces seront grandes.
  {% endstep %}
  {% endstepper %}
  {% endtab %}

{% tab title="Scénario B : Disposition rapide : définir une taille d'image personnalisée" %}
Dans ce scénario, vous voulez pouvoir modifier la taille de l'image et l'espacement de l'annonce pour les adapter à votre site. Vous feriez cela si vous souhaitez vraiment que les annonces natives donnent l'impression de faire partie du contenu éditorial de votre site.

{% stepper %}
{% step %}

### Étape 1

![Étape native 7](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/esjgXHOuLYDy2kSfiWXV/assets/hires/native/scb-step1.png)

* Sélectionnez l'onglet **Disposition rapide** . Dans la **Disposition bureau** section, définissez le nombre de colonnes et de lignes d'annonces souhaité sur ordinateur.
  {% endstep %}

{% step %}

### Étape 2

![Étape native 8](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/9knI85T5uv4S2k0ennMD/assets/hires/native/scb-step2.png)

* Dans la **Paramètres de l'image** liste déroulante, sélectionnez **Taille personnalisée** et définissez la largeur et la hauteur des images pour correspondre à votre site. Si le site contient une balise meta et est responsive, lorsque le site est consulté, les images réagiront également à la diminution de la taille de l'écran. Les informations sur la **taille du widget** et la **taille de l'image** s'afficheront dans le coin supérieur droit au-dessus de l'aperçu.
  {% endstep %}

{% step %}

### Étape 3

![Étape native 9](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/YWchSf0txs1p9pbnCBXb/assets/hires/native/scb-step3.png)

* Une fois la taille de l'image définie, choisissez si vous souhaitez afficher du texte ou non à l'aide de la case à cocher **Texte** , puis choisissez où il s'affiche.
* Vérifiez l'aperçu à droite pour voir à quoi ressemble votre zone publicitaire, et ajustez à nouveau les paramètres si nécessaire.
  {% endstep %}

{% step %}

### Étape 4

![Étape native 10](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/A8dhcTNINaI7ni1fz9Ho/assets/hires/native/scb-step4.png)

* Répétez les étapes 1 à 3 dans la **Disposition mobile** section pour configurer votre zone publicitaire pour mobile.
  {% endstep %}

{% step %}

### Étape 5

![Étape native 11](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/4EatUeZ6VmU4VsaUQpfE/assets/hires/native/scb_advance1.png)

* Dans la **Options avancées** section, vous pouvez définir combien de pixels d' **Espacement vertical** et **Espacement horizontal** vous souhaitez autour de chaque annonce.

{% hint style="info" %}
**Remarque**: la modification de ces paramètres changera la taille globale de la zone publicitaire.
{% endhint %}
{% endstep %}

{% step %}

### Étape 6

![Étape native 12](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/aEaqn3SVREPSkqBxUCks/assets/hires/native/mobile-breaking-point.png)

* Vérifiez l'aperçu pour **ordinateur** et **mobile** sur le côté droit de l'écran. Vous pouvez définir où se situe le point de rupture entre l'affichage ordinateur et mobile dans la liste déroulante **Point de rupture mobile** de **Options avancées**.
* Le point de rupture peut être défini à **800px** pour iPad, **450px** pour mobile et **Non responsive**. Lorsque nous modifions le point de rupture, cela change si les paramètres de la section Disposition bureau s'appliquent au bureau et à l'iPad, ou uniquement au bureau.
* Lorsque l'aperçu vous convient, cliquez sur **Créer**.
  {% endstep %}

{% step %}

### Étape 7

![Étape native 13](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/rlwldJZoXYmsGjD1utp6/assets/hires/native/scn_new.png)

* Copiez la **balise HTML de zone** et ajoutez-la à votre site.
* Assurez-vous que la taille de la zone publicitaire sur votre site correspond à la taille de la zone que vous venez de créer.
  {% endstep %}
  {% endstepper %}
  {% endtab %}

{% tab title="Scénario C : Disposition personnalisée : définir une taille de zone fixe" %}
Dans ce scénario, vous souhaitez pouvoir définir la taille de la zone publicitaire pour qu'elle corresponde aux besoins de votre site, et ajuster les paramètres pour garantir un bon affichage des annonces.

{% stepper %}
{% step %}

### Étape 1

![Étape native 13](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/JEhQvAhXNjExOj7GXOyw/assets/hires/native/scc-step1.png)

Sélectionnez l'onglet **Disposition personnalisée** . Dans la **Disposition bureau** section, définissez la **Largeur** et la **Hauteur** de la zone publicitaire totale que vous souhaitez créer.
{% endstep %}

{% step %}

### Étape 2

![Étape native 14](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/WVwRdNmMUtNGQnymV67U/assets/hires/native/scc-step2.png)

Ensuite, choisissez combien de **Colonnes** et **Lignes** d'annonces vous souhaitez afficher dans la zone publicitaire. Vérifiez l'aperçu à droite pour voir quels paramètres conviennent à la taille que vous avez choisie.
{% endstep %}

{% step %}

### Étape 3

![Étape native 15](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/oObBcmxtsFqPjD2pa1fl/assets/hires/native/scc-step3.png)

Une fois que vous avez choisi le nombre de colonnes et de lignes souhaité, choisissez si vous souhaitez afficher du texte ou non à l'aide de la case à cocher **Texte** et choisissez où il s'affiche à l'aide de la **Position du texte** liste déroulante.
{% endstep %}

{% step %}

### Étape 4

![Étape native 15](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/wdY8i3TWgXoyIWW3SYrW/assets/hires/native/scc-step4.png)

Répétez les étapes 1 à 3 dans la **Disposition mobile** section pour configurer votre zone publicitaire pour mobile.
{% endstep %}

{% step %}

### Étape 5

![Étape native 16](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/aEaqn3SVREPSkqBxUCks/assets/hires/native/mobile-breaking-point.png)

* Vérifiez l'aperçu pour **ordinateur** et **mobile** sur le côté droit de l'écran. Vous pouvez définir où se situe le point de rupture entre l'affichage ordinateur et mobile dans la liste déroulante **Point de rupture mobile** de **Options avancées**.
* Le point de rupture peut être défini à **800px** pour iPad, **450px** pour mobile et **Non responsive**. Lorsque nous modifions le point de rupture, cela change si les paramètres de la section Disposition bureau s'appliquent au bureau et à l'iPad, ou uniquement au bureau.
* Lorsque l'aperçu vous convient, cliquez sur **Créer**.
  {% endstep %}

{% step %}

### Étape 6

![Étape native 17](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/rlwldJZoXYmsGjD1utp6/assets/hires/native/scn_new.png)

Copiez la **balise HTML de zone** et ajoutez-la à votre site.
{% endstep %}
{% endstepper %}
{% endtab %}
{% endtabs %}

## Sélection de Non responsive dans Point de rupture mobile

* Lorsque le point de rupture mobile est défini sur Non responsive dans Options avancées, la fenêtre modale ci-dessous apparaîtra à l'écran.

![Non responsive 2](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/AHKGWus2UFehm3E9QMTe/assets/hires/unresponsive2.png)

![Non responsive 3](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/MbemiUHb7Szd9C1r4JWZ/assets/hires/unresponsive3.png)

* En cliquant sur **CONTINUER** dans la fenêtre modale, la disposition bureau sera utilisée pour les annonces sur tous les appareils, y compris les mobiles et les tablettes.
* La disposition mobile ne pourra plus être modifiée par l'utilisateur lorsque Non responsive est sélectionné.
* Les paramètres d'image sont mis à jour avec la taille personnalisée par défaut (largeur - 200 px et hauteur - 200 px) s'ils n'ont pas été enregistrés auparavant.

## Utilisation de CSS personnalisé avec les annonces natives

![bannière](https://3603265596-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FGoSwRYjxsR1XS6va6yLj%2Fuploads%2FbUrcdZCax7qachURBVTS%2Fimage.png?alt=media\&token=75616bc9-e5e7-42a2-8c9b-34707a1e0bc2)

Dans la **CSS personnalisé** section, vous pouvez ajouter du CSS personnalisé pour vous assurer que la zone publicitaire s'affiche correctement sur votre site. Les classes CSS les plus importantes sont fournies comme point de départ. En savoir plus sur le CSS [ici](https://www.w3schools.com/css/default.asp).

{% hint style="info" %}
**Remarque**: notez que les modifications apportées au CSS personnalisé n'apparaîtront pas dans l'aperçu : elles n'apparaîtront que sur votre site.
{% endhint %}

### Classes CSS pour les annonces natives

Cinq classes CSS sont fournies dans la boîte pour commencer, et vous pouvez ajouter un style supplémentaire selon vos besoins. Ces cinq classes CSS stylisent les éléments les plus importants de l'annonce native comme suit :

![CSS des annonces natives](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/ThwwsRHFlTOSbIoMqI1E/assets/hires/native-ad-css-class.png)

| Classe                             | Action                                           |
| ---------------------------------- | ------------------------------------------------ |
| .msg-native-widget-outer-container | Stylise l'ensemble du conteneur du widget.       |
| .msg-native-widget-item            | Stylise les conteneurs des éléments individuels. |
| .msg-native-widget-item-image      | Stylise l'image.                                 |
| .msg-native-widget-item-title      | Stylise le texte du titre.                       |
| .msg-native-widget-item-text       | Stylise le texte de description                  |

### Classes CSS supplémentaires

Vous pouvez également styliser l'annonce native à l'aide de ces classes CSS supplémentaires :

| Classe                                | Action                                                                       |
| ------------------------------------- | ---------------------------------------------------------------------------- |
| .msg-native-widget                    | Encapsule tout le widget.                                                    |
| .msg-native-widget-header             | Encapsule les éléments d'en-tête.                                            |
| .msg-native-widget-outer-container    | Encapsule toutes les annonces.                                               |
| .msg-native-widget-item-container     | Encapsule la boîte d'annonce.                                                |
| .msg-native-widget-item-image-wrapper | Encapsule l'image dans la boîte d'annonce.                                   |
| .msg-native-widget-item-image-ratio   | Définit le format de l'image de l'annonce.                                   |
| .msg-native-widget-item-content       | Encapsule tout le texte de la boîte d'annonce.                               |
| .msg-native-widget-item-content-box   | Cela encapsule le titre, la description et la marque du conteneur d'annonce. |
| .msg-native-widget-item-brand         | Stylise la marque de l'annonce.                                              |

**Exemples**

* Les exemples suivants montrent comment les éditeurs peuvent adapter les styles CSS lors de la configuration d'une zone d'annonce native en fonction de leurs besoins.

{% stepper %}
{% step %}

#### 1. Pour placer la boîte de texte au-dessus de l'image.

![exemple de CSS d'annonce native](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/QFAzxUnKNOild5gSn0VS/assets/hires/native-ad-css-text-on-image.png)

```css

 .msg-native-widget-item-content {
      position: absolute !important;
      bottom: 0px  !important;
      z-index: 3  !important;
      top: unset  !important;
      height: 50px  !important;
      left: 15px;
   }

```

{% endstep %}

{% step %}

#### 2. Pour modifier la taille de la boîte de texte.

![exemple de CSS d'annonce native](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/qx3YHuopQjx13mXCcF6v/assets/hires/native-ad-css-size-of-text-box.png)

```css

 .msg-native-widget-item-content {
      height: 50px  !important;
   }

```

{% endstep %}

{% step %}

#### 3. Pour placer la boîte de texte au-dessus de l'image et ajouter un arrière-plan à la boîte de texte avec opacité.

![exemple de CSS d'annonce native](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/rrwKCULO65AOG3mF2Y5z/assets/hires/native-ad-css-text-on-image-with-background.png)

```css

 .msg-native-widget-item-content {
      position: absolute !important;
      bottom: 0px  !important;
      z-index: 3  !important;
      top: unset  !important;
      height: 50px  !important;
      background-color: black !important;
      opacity: 0.7 !important;
    }
.msg-native-widget-item-title {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.msg-native-widget-item-text {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.msg-native-widget-item-brand {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }

```

{% endstep %}

{% step %}

#### 4. Pour arrondir les bordures de l'image.

![exemple de CSS d'annonce native](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/FwVaN0LAs4cUEaw1RaTy/assets/hires/native-ad-css-round-the-corners.png)

```css

 .msg-native-widget-item-image {
    border-radius: 5% !important;
    }   

```

{% endstep %}

{% step %}

#### 5. Pour définir un style de police. Ainsi, l'éditeur peut utiliser les polices disponibles sur son site web et d'autres que celles disponibles dans la configuration de la zone.

![exemple de CSS d'annonce native](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/4VgfwQ8IQHImagcqHtFr/assets/hires/native-ad-css-other-options.png)

```css

 .msg-native-widget-item-title, .msg-native-widget-item-text, .msg-native-widget-item-brand {
   font-family: fantasy !important;
   }

```

{% endstep %}

{% step %}

#### 6. Pour ajouter un espacement entre l'image et le texte, afin que le texte puisse être proche ou éloigné de l'image. Vous pouvez également utiliser padding-bottom pour ajouter un espacement sous le texte.

![exemple de CSS d'annonce native](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/zusqVYVxOAml6RhFfaHw/assets/hires/native-ad-css-change-padding.png)

```css

 .msg-native-widget-item-content {
    padding: 30px !important;
    }

```

{% endstep %}

{% step %}

#### 7. Pour personnaliser la couleur d'arrière-plan de la boîte de texte afin qu'elle n'affecte que la boîte de texte située sous chaque image, en laissant l'espace entre les images et les boîtes transparent ou avec une couleur d'arrière-plan différente.

![exemple de CSS d'annonce native](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/H08catOYIpWoAcmXJHoh/assets/hires/native-ad-css-customise-background-color.png)

```css

 .msg-native-widget-item-content {
    background-color: #ABE1FA !important;
    padding: 10px !important;
}
.msg-native-widget-outer-container {
    background-color: white !important;
    padding: 10px !important;
}
.msg-native-widget-item-title {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.msg-native-widget-item-text {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }
.msg-native-widget-item-brand {
    margin-left: 5px !important;
    padding-top: 3px !important;
    color: white !important;
    }

```

{% endstep %}

{% step %}

#### 8. Pour ajouter une bordure qui encadre une image et sa boîte de texte. Cela aidera à séparer chaque image dans ce widget natif.

![exemple de CSS d'annonce native](https://content.gitbook.com/content/GoSwRYjxsR1XS6va6yLj/blobs/ZPr4F1I8Cbu9MhAnXpGy/assets/hires/native-ad-css-set-border.png)

```css

.msg-native-widget-item-container {
  border: 10px #0073B7 solid !important;
  padding: 10px !important;
}
.msg-native-widget-outer-container {
  margin: 10px !important;
}

```

{% endstep %}
{% endstepper %}


---

# 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/publishers/fr/sites-et-zones/configuration-des-annonces-natives.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.