Ajouter du code aux annonces natives

Lorsque vous choisissez l'option Éditeur HTML et CSS pour vos annonces natives, vous pouvez personnaliser leur style en ajoutant du code HTML et CSS. Cet article propose des conseils et des exemples à cet effet.

Les créations natives ainsi générées peuvent être diffusées comme des annonces traditionnelles (les créations gérées par l'éditeur pour le programmatique garanti sont les seules annonces programmatiques acceptées). Pour diffuser des créations natives comme des annonces traditionnelles et pour tous les types d'annonces programmatiques, sélectionnez l'option Commencer avec des modèles, puis les personnaliser dans l'Éditeur de conception assistée.

Exemple de style natif

Voici un exemple de code HTML et de langage CSS dans un style natif pour une position fluide dans le flux. Ce style natif est basé sur un format d'annonce native pour un message sponsorisé qui comprend des variables Titre, Image et Corps.

Type de code Exemple de code

HTML avec variables

Type de code	Exemple de code
HTML avec variables	`<div class="sponsored-post"> <div class="thumbnail"></div> <div class="content"> <h1><a href="%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%]</a></h1> <p>[%Body%]</p> <div class="attribution">SPONSORED</div> </div> </div>`
CSS avec variables	.sponsored-post { background-color: #fffdeb; font-family: sans-serif; padding: 10px 20px 10px 20px; } .content { overflow: hidden; } .thumbnail { width: 120px; height: 100px; float: left; margin: 0 20px 10px 0; background-image: url([%Image%]); background-size: cover; } h1 { font-size: 18px; margin: 0; } a { color: #0086b3; text-decoration: none; } p { font-size: 16px; color: #444; margin: 10px 0 10px 0; } .attribution { color: #fff; font-size: 9px; font-weight: bold; display: inline-block; letter-spacing: 2px; background-color: #ffd724; border-radius: 2px; padding: 4px; }


<div class="sponsored-post">
    <div class="thumbnail"></div>
    <div class="content">
        <h1><a href="%%CLICK_URL_UNESC%%%%DEST_URL_ESC%%" target="_blank">[%Headline%]</a></h1>
        <p>[%Body%]</p>
        <div class="attribution">SPONSORED</div>
    </div>
</div>

CSS avec variables


.sponsored-post {
    background-color: #fffdeb;
    font-family: sans-serif;
    padding: 10px 20px 10px 20px;
}

.content {
    overflow: hidden;
}

.thumbnail {
    width: 120px;
    height: 100px;
    float: left;
    margin: 0 20px 10px 0;
    background-image: url([%Image%]);
    background-size: cover;
}

h1 {
    font-size: 18px;
    margin: 0;
}

a {
    color: #0086b3;
    text-decoration: none;
}

p {
    font-size: 16px;
    color: #444;
    margin: 10px 0 10px 0;
}

.attribution {
    color: #fff;
    font-size: 9px;
    font-weight: bold;
    display: inline-block;
    letter-spacing: 2px;
    background-color: #ffd724;
    border-radius: 2px;
    padding: 4px;
}

Ce style natif convertit des composants de créations natives comme suit :

Composant	Exemple
Titre	Les 30 jobs qui connaissent la croissance la plus rapide
Image	jobs.jpg
Corps	Selon le BLS des États-Unis, ces professions vont rencontrer la plus forte croissance au cours des 10 prochaines années. Cette liste risque de vous surprendre.

Voici ce à quoi cela ressemble dans une annonce native :

Exemple d'annonce native

HTML

Ajoutez un extrait de code HTML qui indique comment votre annonce native doit être affichée.

Pour créer le code, vous devrez peut-être collaborer avec votre développeur d'application ou Web.
Votre code HTML peut inclure du code JavaScript placé dans des balises <script>.
Veuillez n'ajouter que l'extrait de code correspondant à l'annonce. En effet, si vous incluez un document HTML complet, les annonces ne pourront pas s'afficher dans certains navigateurs, y compris Internet Explorer. Par exemple, n'incluez pas la balise <doctype> ou <html> (voir l'exemple ci-dessus).
Les styles de la page parente ne sont pas automatiquement appliqués aux annonces natives. Toutefois, vous pouvez importer des feuilles de style externes et des polices Web en insérant des balises <link> dans le code HTML.

Le paramètre Fenêtre cible permet de choisir la fenêtre dans laquelle les annonces natives s'affichent lorsque les utilisateurs cliquent dessus. Les annonces peuvent ainsi s'afficher dans l'onglet actif ou dans une nouvelle fenêtre.

Les annonces traditionnelles héritent du paramètre au niveau du bloc d'annonces.
Les annonces programmatiques héritent du paramètre au niveau du réseau.

Insérer des macros

Vous pouvez cliquer sur Insérer une macro, puis utiliser les boutons ci-dessous pour créer votre code HTML :

Cache buster : permet d'envoyer un nouvel appel à l'ad server à chaque exécution du code, afin de comptabiliser correctement les impressions. En savoir plus sur la macro cache buster
Clic (recommandé) : permet d'effectuer le suivi des clics si votre extrait de code ne contient pas de caractères spéciaux. En savoir plus sur la macro de clic
URL de destination : permet de définir la page de destination de la création qui s'affiche lorsqu'un internaute clique sur l'annonce. En savoir plus sur la macro d'URL de destination
Clic avec échappement : permet d'effectuer le suivi des clics si l'URL de destination de votre extrait de code comporte des caractères spéciaux (par exemple, "&", "?", "%"). En savoir plus sur la macro de clic avec échappement
Wrapper vidéo : wrapper qui contient le lecteur vidéo pour l'annonce native. Découvrez comment configurer des styles vidéo natifs.

CSS

Ajoutez un code CSS qui indique comment votre annonce native doit être affichée. Reportez-vous à l'exemple ci-dessus.

Si vous effectuez le trafficking d'annonces natives de taille "Fluide", n'utilisez pas le code CSS de positionnement absolu.

Ces informations vous-ont elles été utiles ?

Comment pouvons-nous l'améliorer ?

Ajouter du code aux annonces natives

HTML

Insérer des macros

CSS

Ces informations vous-ont elles été utiles ?

Vous avez encore besoin d'aide ?

Essayez les solutions ci-dessous :