Guide de mise en œuvre

Annonce native

Native ads

Annonce assemblée à partir d'éléments (titre, image, texte) et habillée aux couleurs de votre site, toujours avec la mention qui indique qu'il s'agit d'une annonce.

Ad Manager
mobile et ordinateur

Découvrir le format Vérifier sur mon site

Desktop

Mobile

Comprendre en 1 minute

Qu'est-ce que l'annonce native

L'annonce native arrive en pièces détachées, et non comme une image toute faite. L'annonceur envoie les pièces, comme le titre, l'image et un court texte. C'est votre site qui décide de l'habillage : couleur, police, taille et place de chaque pièce. C'est comme un jeu de construction : la boîte contient les pièces, et vous les montez comme ça va avec votre salon. C'est pourquoi elle ressemble à une partie de la page, comme une carte de plus dans une liste d'articles.

Dans Ad Manager, il y a deux façons d'habiller cette annonce. La première, ce sont les styles natifs, créés dans Ad Manager lui-même, avec l'éditeur de conception guidé, qui propose des modèles prêts, ou avec HTML et CSS, pour ceux qui connaissent le code. Google indique que les styles servent aussi bien pour le web que pour les applications. La seconde est le code des applications Android et iOS, où le développeur de l'application reçoit les éléments via le SDK Google Mobile Ads et dessine tout dans le code de l'appli. Pour les sites, la voie est le style natif.

Comme le natif ressemble à du contenu, Google est très ferme sur un point : le visiteur doit savoir que c'est une annonce. Le badge d'attribution et l'icône AdChoices marquent la carte comme de la publicité. Rien ne doit cacher, couvrir ou déguiser ces badges, et l'annonce doit être clairement séparée du contenu. C'est comme une affiche publicitaire dans un magasin : elle peut être jolie et aller avec la décoration, mais elle doit montrer clairement que c'est de la publicité.

Google a créé ce format pour qu'une même annonce puisse apparaître avec des visuels différents dans chaque partie du site, sans modifier ce que l'annonceur a envoyé. Sur le web, Google recommande la taille Flexible (fluid), qui occupe la largeur de la colonne et ajuste la hauteur toute seule. Il vaut le coup quand vous voulez des annonces qui s'accordent avec le design de vos pages, par exemple entre les éléments d'une liste d'articles, toujours avec le badge d'annonce bien visible.

Pas à pas

Comment mettre en œuvre

Choisissez le format natifDans Ad Manager, allez dans Diffusion puis dans Natif. Utilisez un format standard avec les éléments dont vous avez besoin. Pour les annonces programmatiques, Google n'accepte que les formats standard.
Créez le styleCliquez sur Nouveau style natif et choisissez Éditeur de conception guidé ou HTML et CSS. Dans l'éditeur guidé, le parcours Commencer avec des modèles et personnaliser sert les annonces traditionnelles et programmatiques.
Définissez la taille et le ciblageChoisissez la même taille que les blocs d'annonces qui recevront le natif. Google recommande Flexible. Si le style est Flexible, le bloc d'annonces doit aussi être Flexible, et le ciblage du style doit correspondre à celui de l'élément de campagne.
Construisez l'apparence avec la mentionAffichez tous les éléments obligatoires du format, y compris le badge d'annonce.
Placez la balise sur la pageDéfinissez le slot dans le GPT avec la taille fluid et placez la div dans une colonne dont la largeur est supérieure à zéro.

Exemple mis en place

Le code et le rendu à l'écran

Le script du GPT va dans le head ; la div avec l'appel d'affichage va dans le body, dans la colonne où l'annonce native doit apparaître.

<!-- No <head> -->
<script async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
  crossorigin="anonymous"></script>
<script>
  window.googletag = window.googletag || { cmd: [] };
  googletag.cmd.push(() => {
    // Slot nativo com tamanho fluido.
    googletag
      .defineSlot("/1234567/exemplo", ["fluid"], "nativo-exemplo")
      .addService(googletag.pubads());
    googletag.enableServices();
  });
</script>

<!-- No <body>, dentro de uma coluna com largura -->
<div id="nativo-exemplo"></div>
<script>
  googletag.cmd.push(() => {
    googletag.display("nativo-exemplo");
  });
</script>

Sur ordinateurIl s'affiche comme une carte qui s'accorde avec le site, avec image, titre, texte et le badge d'annonce. Avec la taille Flexible (fluid), il occupe la largeur de la colonne où il se trouve.

Sur mobileElle apparaît de la même façon, ajustée à la largeur de l'écran. Dans les styles programmatiques, l'icône AdChoices reste visible dans le coin supérieur droit.

Ce que Google recommande

Ce qui est permis et ce qui ne l'est pas

Autorisé

Créer des styles natifs dans Ad Manager, avec l'Éditeur de conception guidé ou en HTML et CSS.
Utiliser la taille Flexible (fluid), que Google recommande pour donner plus de liberté au visuel.
Modifier l'apparence de la mention d'attribution pour qu'elle s'accorde à la mise en page, tant qu'elle reste facile à lire.
Afficher la même annonce avec des mises en page différentes dans différentes parties du site.
Créer un format natif personnalisé pour des annonces traditionnelles, en sachant qu'il ne reçoit pas d'annonces programmatiques.

Interdit

Cacher, recouvrir ou déguiser la mention d'attribution ou l'icône AdChoices.
Rendre l'annonce difficile à distinguer du contenu. Google exige que les annonces restent clairement séparées du contenu.
Faire imiter par des éléments de l'annonce les boutons de navigation de la page.
Ne pas afficher les éléments obligatoires du format, comme le badge d'annonce et le titre.
Rogner les images et les vidéos, changer leur proportion ou faire se chevaucher des éléments.
Placer une autre partie de l'annonce dans le coin réservé à AdChoices.

Conseils

Pour bien faire les choses

Dans le format de contenu programmatique, le titre peut compter jusqu'à 90 caractères. Prévoyez la place en conséquence.
Les annonces fluides fonctionnent mieux dans une colonne dont la largeur est supérieure à zéro pixel.
Utilisez un texte bien contrasté et uniquement des polices acceptées. Dans les styles programmatiques, Google n'accepte pas les polices ou bibliothèques tierces.
Google prévient que les annonces fluides peuvent mettre plus de temps à s'afficher et peuvent déplacer le contenu environnant quand leur hauteur change.

Attention

Erreurs courantes

Taille du style différente de celle du bloc

Si le style est Flexible, le bloc d'annonces doit aussi être Flexible. Google indique que les tailles doivent être identiques.

Format personnalisé en attente de programmatique

Un format natif personnalisé ne reçoit pas d'annonces programmatiques. Pour le programmatique, seuls les formats standard sont valables.

Conteneur sans largeur ou avec hauteur bloquée

Une annonce fluide dans une colonne de largeur zéro, ou dans un conteneur à hauteur fixe plus petite que l'annonce, peut s'afficher de travers.

Questions fréquentes

L'annonce native doit-elle vraiment indiquer qu'elle est une annonce ?

Oui. La mention d'attribution et AdChoices servent à ce que personne ne confonde l'annonce avec du contenu, et ils ne peuvent être ni cachés ni déguisés.

Le code des applications Android et iOS fonctionne-t-il sur un site ?

Non. Google décrit cette voie pour les applications Android et iOS, avec le SDK Google Mobile Ads. Sur les sites, la voie est le style natif.

Puis-je utiliser la taille fluide pour d'autres annonces ?

Selon la documentation du GPT, l'annonce native est aujourd'hui le seul type fluide qu'Ad Manager accepte.

Bibliothèque

Source officielle de Google

Tout ce qui figure sur cette page suit la documentation officielle de Google. Lisez-la directement à la source :

Votre site utilise-t-il bien ce format ?

L'audit lit le site comme un visiteur, sans rien cliquer, et montre ce qu'il faut corriger.

Lancer un audit