Ouvrir l'espace

Guide de mise en œuvre

Bannière Ad Manager

Display ad slots (Google Publisher Tag)

L'espace publicitaire classique d'Ad Manager, créé avec la Google Publisher Tag, de taille fixe, à plusieurs tailles ou responsive.

  • Ad Manager
  • mobile et ordinateur
Découvrir le formatVérifier sur mon site
Desktop
Mobile

Comprendre en 1 minute

Qu'est-ce que la bannière Ad Manager ?

La bannière Ad Manager est ce rectangle d'annonce qui reste immobile dans la page : au milieu du texte, en haut ou sur le côté. Pensez à une affiche accrochée au mur de l'école. Elle a un emplacement précis et une taille précise, et tous ceux qui passent par là peuvent la voir. Dans Ad Manager, cet emplacement réservé s'appelle un slot, le mot anglais pour espace publicitaire. Celui qui demande et affiche l'annonce dans cet espace, c'est le GPT, sigle de Google Publisher Tag, une bibliothèque de code de Google que vous placez sur le site.

Voici comment ça marche : vous indiquez d'abord à la GPT quel bloc d'annonces d'Ad Manager utiliser, quelles tailles y tiennent et dans quelle petite boîte de la page il doit apparaître. Cette boîte est une div, un morceau de HTML avec un nom unique. Ensuite, la GPT demande l'annonce et la dessine dans la boîte. Le nom de la boîte doit être identique aux deux endroits. Sinon, l'annonce n'apparaît pas. Google lui-même demande de vérifier cela quand l'annonce n'apparaît pas.

La taille peut être choisie de trois façons. En taille fixe, seules les annonces de cette dimension entrent, comme 300 par 250. En tailles multiples, vous listez plusieurs dimensions et Ad Manager peut en choisir n'importe laquelle. En responsive, vous montez un tableau appelé mappage de tailles, qui indique quelles dimensions valent pour chaque largeur d'écran : une liste pour les grands écrans et une autre pour les petits. Il existe aussi la taille fluide, qui s'étire sur la largeur de la page, mais Google explique qu'elle n'est aujourd'hui utilisée que pour les annonces natives.

Google a créé cette façon de travailler pour que le site garde le contrôle : vous décidez où se trouve chaque annonce, quelles tailles elle accepte et quand elle se charge. La documentation explique comment faire en sorte que les annonces du bas de la page ne se chargent que lorsque la personne s'en approche, ce qu'on appelle le chargement différé. Elle explique aussi comment actualiser une annonce sans recharger toute la page, en respectant des règles de délai et de déclaration. La bannière est utile quand vous avez déjà un compte Ad Manager et que vous voulez choisir soigneusement l'emplacement et la taille de chaque espace.

Pas à pas

Comment mettre en œuvre

  1. Générez la balise dans Ad ManagerDans Ad Manager, cliquez sur Inventaire puis sur Blocs d'annonces. Ouvrez le bloc, allez dans l'onglet Tags, choisissez Google Publisher Tag (GPT) et cliquez sur Continuer. Faites les autres choix et copiez les tags dans Résultats des tags.
  2. Chargez le GPT dans le headPlacez le script du GPT dans la partie head de la page. C'est lui qui apporte au site les outils d'annonces de Google.
  3. Définissez le slotToujours dans le head, indiquez au GPT le chemin du bloc d'annonces, les tailles acceptées et le nom de la div. Si vous voulez un slot responsive, ajoutez un mappage de tailles. À la fin, activez le service d'annonces.
  4. Créez la div avec un espace réservéDans le body, créez la div avec le même nom que celui utilisé dans la définition. Donnez-lui une hauteur et une largeur en CSS, en pensant à la plus grande annonce, pour que rien ne saute à l'écran quand l'annonce arrive.
  5. Demandez l'annonceJuste après la div, appelez l'affichage avec le nom de la div. Pour que des annonces de votre propre inventaire s'affichent, il faut un élément de campagne actif avec le statut Prêt.
  6. Chargement différé et actualisationSi vous le souhaitez, activez le chargement différé pour les espaces du bas de la page. Si vous actualisez des annonces, déclarez-le dans Ad Manager sous Inventaire, Règles d'inventaire, Déclarations de l'éditeur, et appliquez la même règle dans la page.

Exemple mis en place

Le code et le rendu à l'écran

Le GPT et la définition du slot se placent dans le head ; la div avec l'appel d'affichage se place dans le body, à l'endroit où la bannière 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(() => {
    // Tamanhos por largura de tela (slot responsivo).
    const mapping = googletag
      .sizeMapping()
      .addSize([1024, 768], [[728, 90], [300, 250]])
      .addSize([0, 0], [300, 250])
      .build();

    googletag
      .defineSlot(
        "/1234567/exemplo",
        [[728, 90], [300, 250]],
        "banner-exemplo",
      )
      .defineSizeMapping(mapping)
      .addService(googletag.pubads());

    // Carregamento lento para espaços longe da tela.
    googletag.setConfig({
      lazyLoad: {
        fetchMarginPercent: 500,
        renderMarginPercent: 200,
        mobileScaling: 2.0,
      },
    });

    googletag.enableServices();
  });
</script>

<!-- No <body>, onde o anúncio deve aparecer -->
<div id="banner-exemplo" style="min-height: 250px;"></div>
<script>
  googletag.cmd.push(() => {
    googletag.display("banner-exemplo");
  });
</script>
Sur ordinateurElle apparaît comme un rectangle immobile à l'endroit que vous avez choisi, par exemple 728 par 90 ou 300 par 250. Elle défile avec la page, comme n'importe quelle partie du texte.
Sur mobileElle apparaît au milieu du contenu, dans des dimensions qui tiennent à l'écran, comme 300 par 250. Avec le mappage de tailles, le mobile ne reçoit que les dimensions que vous avez autorisées pour les petits écrans.

Ce que Google recommande

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

Autorisé

  • Définir une taille fixe, une liste de plusieurs tailles ou un mappage de tailles par largeur d'écran.
  • Réserver en CSS l'espace de la plus grande taille possible. Google dit que c'est le moyen le plus efficace d'éviter que la page ne saute.
  • Définir dans le head les espaces qui apparaissent d'emblée, pour qu'ils soient prioritaires.
  • Utiliser le chargement différé pour les espaces sous la ligne de flottaison, qui n'apparaissent que lorsque la personne fait défiler la page.
  • Actualiser les annonces avec la fonction d'actualisation du GPT, plutôt que de recharger toute la page, à condition que l'actualisation soit déclarée dans Ad Manager.
  • Actualiser sur action de la personne sans délai minimal, puisque Google n'exige un intervalle minimal que pour l'actualisation par minuteur ou par événement.

Interdit

  • Utiliser dans la div un nom différent de celui transmis dans la définition du slot.
  • Actualiser des annonces sans le déclarer dans Ad Manager, ou le déclarer de façon incorrecte. Google considère cela comme une violation.
  • Actualiser par minuteur ou par événement avec un intervalle inférieur à 30 secondes sur le Web.
  • Vider l'espace avant d'actualiser. L'actualisation remplace déjà l'annonce, et vider ne fait que laisser l'espace blanc plus longtemps.
  • Actualiser des espaces que la personne ne voit jamais. Google avertit que cela peut faire chuter fortement le taux de visibilité.
  • Laisser la div sans dimensions réservées, ce qui fait sauter le contenu quand l'annonce arrive.

Conseils

Pour bien faire les choses

Attention

Erreurs courantes

Nom de div différent

Le nom transmis dans la définition du slot et dans l'affichage doit être identique à celui de la div. Sinon, l'annonce n'apparaît tout simplement pas.

Div d'une taille différente de l'annonce

Google demande que la largeur, la hauteur et le nom de la div correspondent à ce qui est dans le tag. Sinon, l'annonce peut ne pas apparaître.

Aucun élément de campagne prêt

Sans élément de campagne actif avec le statut Prêt, votre propre inventaire n'affiche aucune annonce, même avec le bon code.

Mappage qui vide le mobile

Dans l'exemple de Google, les écrans de moins de 640 par 480 reçoivent une liste vide et restent sans annonce. Si vous copiez sans ajuster, les téléphones en position verticale peuvent rester sans bannière.

Questions fréquentes

Quelle est la différence entre plusieurs tailles et responsive ?

Avec plusieurs tailles, n'importe quelle dimension de la liste peut apparaître sur n'importe quel écran. En responsive, le mappage de tailles indique quelles dimensions valent pour chaque largeur d'écran.

Puis-je utiliser la taille fluide dans une bannière ordinaire ?

Google explique qu'aujourd'hui, le seul type fluide qu'Ad Manager accepte est l'annonce native. Pour une bannière ordinaire, utilisez une taille fixe, plusieurs tailles ou un mappage.

Quel est le délai minimal pour actualiser une annonce ?

Sur le Web, l'actualisation par minuteur ou par événement nécessite au moins 30 secondes. L'actualisation sur action de la personne n'a pas de minimum. Dans tous les cas, elle doit être déclarée dans les Règles d'inventaire.

Le chargement différé est-il utile ?

Google recommande de reporter les espaces sous la ligne de flottaison, ce qui aide surtout sur mobile, où les ressources sont plus limitées. Les espaces du haut doivent être prioritaires.

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