Ouvrir l'espace

Guide de mise en œuvre

Annonces sur les pages AMP

AMP ads (amp-ad, amp-auto-ads, amp-sticky-ad)

Comment afficher des annonces sur les pages AMP avec amp-ad, les annonces automatiques et la bannière fixe, dans AdSense et Ad Manager.

  • AdSense
  • Ad Manager
  • mobile et ordinateur (sur les pages AMP)
Découvrir le formatVérifier sur mon site
Desktop
Mobile

Comprendre en 1 minute

Que sont les annonces sur les pages AMP ?

AMP est une façon de construire des pages très légères et rapides, créée comme un projet ouvert. Imaginez une boîte à lunch avec des compartiments : chaque chose a sa place et on ne peut pas y jeter n'importe quoi. Sur une page AMP, c'est pareil. Vous ne pouvez pas coller n'importe quel code d'annonce. À la place, vous utilisez des éléments prêts à l'emploi, appelés composants, qui savent déjà demander et afficher des annonces sans alourdir la page.

Il y a trois éléments principaux. L'amp-ad est l'espace publicitaire ordinaire, comme une bannière : vous indiquez le type de réseau, adsense pour AdSense ou doubleclick pour Ad Manager, ainsi que la largeur et la hauteur. L'amp-auto-ads est le mode automatique : il reçoit une configuration du réseau et choisit lui-même où placer les annonces, en respectant un nombre maximal et une distance minimale entre elles. L'amp-sticky-ad est la bande fixée en bas de l'écran, comme une ancre, avec un bouton de fermeture.

Le code du réseau publicitaire ne s'exécute pas directement dans la page. Il s'exécute dans une petite boîte séparée, appelée iframe, que l'AMP contrôle lui-même. Si aucune annonce n'arrive, l'AMP essaie de masquer l'espace vide, mais il ne masque pas un espace visible à l'écran, pour que la page ne saute pas. Les annonces AMP ne peuvent pas non plus se trouver dans des boîtes à position fixe, sauf les annonces fixes propres à l'AMP et l'amp-lightbox.

Google explique que l'AMP est un projet ouvert qui vise des pages rapides et performantes sur tout appareil. Dans AdSense, vous créez un bloc d'annonces et choisissez le code AMP, ou vous activez les Annonces automatiques pour AMP. Dans Ad Manager, vous générez des tags AMP directement dans le tableau de bord, et Google recommande d'utiliser des annonces HTML pour AMP. Cela vaut la peine si votre site a déjà des versions AMP des pages et que vous voulez qu'elles affichent aussi des annonces.

Pas à pas

Comment mettre en œuvre

  1. Chargez les composants dans le headPlacez dans le head de la page AMP le script de l'amp-ad. Si vous utilisez des annonces automatiques ou la bande fixe, placez aussi les scripts de l'amp-auto-ads et de l'amp-sticky-ad.
  2. AdSense : créez un bloc AMPDans AdSense, cliquez sur Annonces, Par bloc d'annonces et Annonces display. Donnez un nom, laissez Responsive, cliquez sur Enregistrer et obtenir le code puis sur AMP. Le script va dans le head et le code de l'annonce va dans le body.
  3. AdSense : activez les annonces automatiques pour AMPDans Annonces, cliquez sur Avez-vous un site AMP ?, activez Annonces automatiques pour AMP et cliquez sur Obtenir le code AMP. Collez le script dans le head et le code juste après l'ouverture du body de chaque page. Cliquez ensuite sur Terminé et Appliquer.
  4. Ad Manager : générez la balise AMPCliquez sur Inventaire puis sur Blocs d'annonces, ouvrez le bloc et allez dans l'onglet Tags. Choisissez Tag AMP et cliquez sur Continuer. Cochez Balises AMP pour inclure l'espace réservé et les solutions de secours, et choisissez les tailles du bloc.
  5. Reliez la page AMP à la page normaleSur la page normale, pointez vers la version AMP avec la balise amphtml. Sur la page AMP, pointez vers la page normale avec la balise canonical.
  6. Patientez et vérifiezLes annonces peuvent mettre quelques minutes et, parfois, jusqu'à une heure à apparaître.

Exemple mis en place

Le code et le rendu à l'écran

Les scripts des composants vont dans le head ; l'amp-auto-ads va juste après l'ouverture du body, et les autres annonces vont dans le body, là où elles doivent apparaître.
<!-- No <head> da página AMP -->
<script async custom-element="amp-ad"
  src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<script async custom-element="amp-auto-ads"
  src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js"></script>
<script async custom-element="amp-sticky-ad"
  src="https://cdn.ampproject.org/v0/amp-sticky-ad-1.0.js"></script>

<body>
  <!-- AdSense: anúncios automáticos, logo depois de abrir o body -->
  <amp-auto-ads type="adsense"
    data-ad-client="ca-pub-0000000000000000">
  </amp-auto-ads>

  <!-- AdSense: bloco responsivo, onde o anúncio deve aparecer -->
  <amp-ad width="100vw" height="320"
    type="adsense"
    data-ad-client="ca-pub-0000000000000000"
    data-ad-slot="1234567890"
    data-auto-format="rspv"
    data-full-width>
    <div overflow></div>
  </amp-ad>

  <!-- Ad Manager: faixa fixa embaixo (só uma por página) -->
  <amp-sticky-ad layout="nodisplay">
    <amp-ad width="320" height="50"
      type="doubleclick"
      data-slot="/1234567/exemplo">
    </amp-ad>
  </amp-sticky-ad>
</body>
Sur ordinateurL'amp-ad occupe l'espace avec la largeur et la hauteur définies, comme une bannière ordinaire. La bande fixe de l'amp-sticky-ad reste fixée en bas, en pleine largeur et sur 100 pixels de hauteur maximum.
Sur mobileLe bloc responsive d'AdSense occupe la largeur de l'écran. La bande fixe reste en bas, peut être fermée, et en arrivant en fin de page, l'AMP ajoute un espace supplémentaire pour qu'elle ne recouvre pas le contenu.

Ce que Google recommande

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

Autorisé

  • Utiliser l'amp-ad avec le type adsense ou doubleclick, en indiquant la largeur et la hauteur.
  • Utiliser des blocs responsive d'AdSense, que Google recommande de laisser sélectionnés.
  • Utiliser l'amp-auto-ads avec AdSense et désactiver, dans le tableau de bord, les formats que vous ne voulez pas sur les pages AMP.
  • Avoir une bande fixe amp-sticky-ad par page, avec un seul amp-ad à l'intérieur.
  • Afficher un espace réservé pendant le chargement de l'annonce et un substitut quand elle n'arrive pas.
  • Dans Ad Manager, actualiser les annonces AMP qui utilisent Fast Fetch, avec un intervalle minimal de 30 secondes.

Interdit

  • Placer l'amp-ad dans des boîtes à position fixe, sauf les annonces fixes et l'amp-lightbox.
  • Avoir plus d'un amp-sticky-ad sur la même page.
  • Utiliser un fond transparent ou semi-transparent sur la bande fixe. L'AMP le remplace par une couleur unie.
  • Diffuser des annonces ou des embeds sans HTTPS.
  • Dans Ad Manager, activer l'actualisation avec la demande unique (SRA). L'actualisation est désactivée et une erreur apparaît.
  • Utiliser l'amp-ad directement dans une Web Story. Les Web Stories utilisent l'amp-story-auto-ads.

Conseils

Pour bien faire les choses

Attention

Erreurs courantes

Script en dehors du head

Le script de chaque composant va dans le head, et l'annonce va dans le body. Sans le bon script, le composant ne fonctionne pas.

Copier le code d'exemple

AdSense fournit le code AMP prêt à l'emploi quand vous choisissez l'option AMP. Copiez le code depuis votre compte, avec votre ID d'éditeur.

Bande fixe mal montée

L'amp-sticky-ad a besoin de la mise en page nodisplay et d'un seul amp-ad à l'intérieur.

Page AMP isolée

AdSense demande que la page normale et la page AMP pointent l'une vers l'autre, avec les balises amphtml et canonical.

Questions fréquentes

Puis-je utiliser le code AdSense normal sur une page AMP ?

Utilisez le code AMP. Sur les pages AMP, le JavaScript du réseau publicitaire ne s'exécute pas directement dans la page, mais dans une iframe contrôlée par l'AMP.

Que se passe-t-il si aucune annonce n'arrive ?

L'AMP essaie de masquer l'espace. S'il n'y parvient pas, il affiche le substitut. La bande fixe sans annonce n'apparaît pas.

Ad Manager actualise-t-il les annonces en AMP ?

Oui, pour les annonces avec Fast Fetch. Vous placez une balise dans le head avec l'intervalle, d'au moins 30 secondes, par page ou par slot. Cela ne fonctionne pas avec la SRA.

Combien de temps faut-il pour que les annonces apparaissent ?

En général quelques minutes, et parfois jusqu'à une heure.

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