Mise en place d'une publicité native

Creating a Native Ad zone is simple and yet powerfully customizable. You are able to use slightly different processes for setting up a native ad zone depending on your needs:

• Scénario A : Vous souhaitez simplement créer une zone publicitaire, choisir le rapport hauteur/largeur des images de la zone publicitaire native, puis adapter la taille de la zone publicitaire de votre site en conséquence.
• Scénario B : Vous souhaitez configurer la zone publicitaire pour qu'elle corresponde à une taille ou à un ratio d'image personnalisé, afin que la zone publicitaire ait le même aspect que votre site et qu'elle s'y intègre parfaitement.
• Scénario C : Vous disposez sur votre site d'une zone d'une taille spécifique et vous souhaitez créer une zone publicitaire qui s'y intègre et qui soit esthétique.

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

Créer une zone de publicité native

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

Remplissez les détails de la zone et cliquez sur Suivant.

Scénario A : Mise en page rapide : Définir le rapport hauteur/largeur

Dans ce cas, vous définissez le ratio d'aspect des images dans le panneau d'administration et il n'est pas nécessaire de définir la taille totale de la zone publicitaire. Lorsque vous utilisez la Mise en page rapide, la zone publicitaire que vous créez s'adapte automatiquement à la taille du conteneur dans lequel vous la placez.

Étape 1 :

Sélectionnez l'onglet Mise en page rapide. Dans la section Mise en page du bureau, définissez le nombre de colonnes et de lignes de publicités que vous souhaitez voir apparaître sur le bureau.

Étape 2 :

Ensuite, choisissez le format de vos images dans le menu déroulant Paramètres de l'image. Vous avez le choix entre 1:1, 4:3 ou 16:9, pour correspondre aux vignettes de votre site.

Étape 3 :

• Une fois que vous avez choisi le rapport hauteur/largeur, utilisez la case à cocher pour choisir d'afficher ou non le texte, puis décidez de l'endroit 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.
• Consultez l'aperçu à droite pour voir à quoi ressemble votre zone d'annonces et modifiez les paramètres si nécessaire.

Étape 4 :

• Répétez les étapes 1 à 3 ci-dessus dans la section Mise en page mobile pour configurer votre zone publicitaire pour les mobiles.

Étape 5 :

• Vérifiez l'aperçu pour Bureau et Mobile sur le côté droit de l'écran. Vous pouvez définir l'emplacement du point de rupture entre la vue de bureau et la vue mobile dans le menu déroulant Point de rupture mobile des Options avancées.
• Le point de rupture peut être fixé à 800px pour l'iPad, 450px pour le mobile et Unresponsive. Lorsque nous modifions le point de rupture, cela change le fait que nos paramètres dans la section Disposition du bureau affectent l'ordinateur de bureau et l'iPad, ou seulement l'ordinateur de bureau lui-même.
• Lorsque vous êtes satisfait de l'aperçu, cliquez sur Créer.

Étape 6 :

• Copiez la balise HTML Zone et ajoutez-la à votre site.
• La zone publicitaire s'ajuste automatiquement à 100 % du conteneur dans lequel vous placez la balise. En d'autres termes, plus le conteneur est grand, plus la zone et les publicités sont grandes.

Scénario B : Mise en page rapide : Définir une taille d'image personnalisée

Dans ce cas, vous souhaitez pouvoir modifier la taille de l'image et l'espacement de la publicité pour l'adapter à votre site. Vous feriez cela si vous vouliez vraiment que les publicités natives aient l'air de faire partie du contenu éditorial de votre site.

Étape 1 :

• Sélectionnez l'onglet Mise en page rapide. Dans la section Mise en page du bureau, définissez le nombre de colonnes et de lignes de publicités que vous souhaitez voir apparaître sur le bureau.

Étape 2 :

• Dans le menu déroulant Paramètres de l'image, sélectionnez Taille personnalisée et définissez la largeur et la hauteur des images en fonction de votre site. Si le site contient une balise méta et qu'il est réactif, lorsque le site est consulté, les images réagissent également lorsque la taille de l'écran diminue. Les informations concernant la taille du widget et la taille de l'image s'affichent dans le coin supérieur droit, au-dessus de l'aperçu.

Étape 3 :

• Une fois que vous avez défini la taille de l'image, choisissez d'afficher ou non le texte, en cochant la case Texte, et choisissez l'endroit où il s'affiche.
• Consultez l'aperçu à droite pour voir à quoi ressemble votre zone d'annonces et modifiez les paramètres si nécessaire.

Étape 4 :

• Répétez les étapes 1 à 3 de la section Mise en page mobile pour configurer votre zone publicitaire pour les mobiles.

Étape 5 :

• Dans la section Options avancées, vous pouvez définir le nombre de pixels d'espacement vertical et d'espacement horizontal que vous souhaitez autour de chaque annonce.

---

Remarque : La modification de ces paramètres changera la taille globale de la zone publicitaire.

---

Étape 6 :

• Vérifiez l'aperçu pour Bureau et Mobile sur le côté droit de l'écran. Vous pouvez définir l'emplacement du point de rupture entre la vue de bureau et la vue mobile dans le menu déroulant Point de rupture mobile des Options avancées.
• Le point de rupture peut être fixé à 800px pour l'iPad, 450px pour le mobile et Unresponsive. Lorsque nous modifions le point de rupture, cela change le fait que nos paramètres dans la section Disposition du bureau affectent l'ordinateur de bureau et l'iPad, ou seulement l'ordinateur de bureau lui-même.
• Lorsque vous êtes satisfait de l'aperçu, cliquez sur Créer.

Étape 7 :

• Copiez la balise HTML Zone et ajoutez-la à votre site.
• Assurez-vous que la taille de la zone publicitaire de votre site correspond à la taille de la zone que vous venez de créer.

Scénario C : Mise en page personnalisée : Définir une taille de zone fixe

Dans ce cas, vous devez être en mesure de définir la taille de la zone publicitaire en fonction des besoins de votre site et d'ajuster les paramètres pour que les publicités s'affichent correctement.

Étape 1 :

Sélectionnez l'onglet Mise en page personnalisée. Dans la section Mise en page du bureau, définissez la largeur et la hauteur de la zone publicitaire totale que vous souhaitez créer.

Étape 2 :

Ensuite, choisissez le nombre de colonnes et rangées de publicités que vous souhaitez afficher dans la zone publicitaire. Consultez l'aperçu sur la droite pour voir quels sont les paramètres qui conviennent à la taille que vous avez choisie.

Étape 3 :

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

Étape 4 :

Répétez les étapes 1 à 3 de la section Mise en page mobile pour configurer votre zone publicitaire pour les mobiles.

Étape 5 :

• Vérifiez l'aperçu pour Bureau et Mobile sur le côté droit de l'écran. Vous pouvez définir l'emplacement du point de rupture entre la vue de bureau et la vue mobile dans le menu déroulant Point de rupture mobile des Options avancées.
• Le point de rupture peut être fixé à 800px pour l'iPad, 450px pour le mobile et Unresponsive. Lorsque nous modifions le point de rupture, cela change le fait que nos paramètres dans la section Disposition du bureau affectent l'ordinateur de bureau et l'iPad, ou seulement l'ordinateur de bureau lui-même.
• Lorsque vous êtes satisfait de l'aperçu, cliquez sur Créer.

Étape 6 :

Copiez la balise HTML Zone et ajoutez-la à votre site.

Sélectionner les personnes qui ne réagissent pas dans Mobile Breaking Point

• Lorsque le point de rupture mobile est réglé sur Non réactif dans les options avancées, la fenêtre modale ci-dessous s'affiche à l'écran.

• En cliquant sur CONTINUER dans la fenêtre modale, la mise en page de bureau sera utilisée pour les annonces sur tous les appareils, y compris les téléphones portables et les tablettes.
• La mise en page mobile ne sera plus modifiable par l'utilisateur lorsque l'option "Sans réponse" est sélectionnée.
• The image settings are updated to default custom size (Width - 200px and height - 200px) if not saved previously.  

Utilisation de CSS personnalisés avec les publicités natives

In the Custom CSS section, you can add custom CSS to ensure that the ad zone displays correctly on your site. The most important CSS classes are provided as a starting point. Find out more about CSS here.

---

Remarque : Sachez que les modifications apportées au CSS personnalisé n'apparaîtront pas dans l'aperçu : elles ne s'afficheront que sur votre site.

---

Classes CSS pour les publicités natives

Cinq classes CSS sont fournies dans la boîte pour commencer, et vous pouvez ajouter des styles supplémentaires si vous le souhaitez. Ces cinq classes CSS stylisent les éléments les plus importants de la publicité native comme suit :

Classe	Action
.exo-native-widget-outer-container	Styliser l'ensemble du conteneur du widget.
.exo-native-widget-item	Styliser les contenants des différents articles.
.exo-native-widget-item-image	Styliser l'image.
.exo-native-widget-item-title	Styliser le texte du titre.
.exo-native-widget-item-text	Modifie le texte de la description

Classes CSS supplémentaires

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

Classe	Action
.exo-native-widget	Enveloppe l'ensemble du widget.
.exo-native-widget-header	Enveloppe les éléments de l'en-tête.
.exo-native-widget-outer-container	Toutes les annonces sont enveloppées.
.exo-native-widget-item-container	Enveloppe la boîte publicitaire.
.exo-native-widget-item-image-wrapper	Enveloppe l'image dans la boîte publicitaire.
.exo-native-widget-item-image-ratio	Définit le rapport d'aspect de l'image publicitaire.
.exo-native-widget-item-content	Recouvre l'ensemble du texte de la boîte publicitaire.
.exo-native-widget-item-content-box	Ce champ contient le titre, la description et la marque de l'annonce.
.exo-native-widget-item-brand	Styles de la marque publicitaire.

Exemples

• Les exemples suivants montrent comment les éditeurs peuvent adapter les styles CSS sur la configuration de Native Ad Zone en fonction de leurs besoins.

1. Pour placer la zone de texte sur l'image.

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

1. Pour modifier la taille de la zone de texte.

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

1. Pour placer la zone de texte sur l'image et ajouter un arrière-plan à la zone de texte avec opacité.

 .exo-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;
    }
  .exo-native-widget-item-title {
    margin-left: 15px;
    color: white !important
    }
.exo-native-widget-item-text {
  margin-left: 15px;
  color: white !important
}

1. Pour courber les bords de l'image.

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

1. Pour définir un style pour la police. De cette manière, l'éditeur peut utiliser des polices disponibles sur son site web et autres que celles disponibles sur Zone setup.

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

1. Pour ajouter un espace entre l'image et le texte, de sorte que le texte puisse être proche ou éloigné de l'image. Vous pouvez également utiliser padding-bottom pour ajouter un remplissage sous le texte.

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

1. Pour personnaliser la couleur d'arrière-plan de la zone de texte de manière à ce qu'elle n'affecte que la zone de texte située sous chaque image, en laissant l'espace entre les images et les zones transparentes ou avec une couleur d'arrière-plan différente.

 .exo-native-widget-item-content {
    background-color: #ABE1FA !important;
    padding: 10px !important
}
 
  .exo-native-widget-outer-container {
    background-color: white !important;
    padding: 10px !important;
}

.exo-native-widget-item-title {
margin-left: 15px;
}

.exo-native-widget-item-text {
margin-left: 15px;
}

1. Pour ajouter une bordure qui couvre une image et sa zone de texte. Cela permet de séparer chaque image dans ce widget natif.

 .exo-native-widget-item-container {
  border: 2px #0073B7 solid !important;
  padding-right: 0px !important;
  padding-bottom: 0px !important
}

.exo-native-widget-outer-container {
  margin-bottom: 10px !important;
  margin-right: 10px !important
}