Cette page a été traduite par l'API Cloud Translation.

Tailles d'annonces

Chaque espace publicitaire que vous définissez doit spécifier la ou les tailles d'annonces pouvant être diffusées dans cet espace. La manière dont les tailles sont spécifiées varie en fonction du type d'annonces à afficher, ainsi que de la taille et de la flexibilité des espaces publicitaires eux-mêmes.

Dans certains cas, la taille de l'annonce peut être remplacée au niveau de l'élément de campagne dans Google Ad Manager. Pour en savoir plus, consultez le Centre d'aide.

Le code complet des exemples inclus dans ce guide est disponible sur la page d'exemple des tailles d'annonces.

Annonces à taille fixe

Vous pouvez définir un espace publicitaire avec une taille unique fixe.

googletag
  .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "fixed-size-ad")
  .addService(googletag.pubads());

Dans cet exemple, seules les créations de taille 300x250 seront diffusées.

Important: Lorsque vous utilisez des annonces de taille fixe, nous vous recommandons vivement de définir la taille de l'élément <div> dans lequel la création doit s'afficher. Étant donné que les créations sont souvent affichées de manière asynchrone, elles peuvent entraîner le décalage d'autres éléments de la page si l'espace qui leur est réservé est insuffisant.

Annonces multitailles

Si une annonce accepte plusieurs tailles, fournissez une liste des tailles acceptées lorsque vous définissez l'espace publicitaire.

googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "multi-size-ad",
  )
  .addService(googletag.pubads());

Dans cet exemple, les créations associées aux tailles 300x250, 728x90 et 750x200 peuvent être diffusées. Ad Manager ne prend en compte que les créations correspondant à ces tailles lors du processus de sélection des annonces.

Si les dimensions ne sont pas spécifiées pour l'espace publicitaire <div> dans CSS, GPT définit automatiquement les dimensions sur la hauteur déclarée la plus courte et la largeur déclarée la plus large sur 1 px lorsque display() est appelé. Dans ce cas, il s'agit de 750x90. Toutefois, ce dimensionnement peut survenir après le chargement d'autres contenus de la page, ce qui entraîne le décalage de ce contenu. Pour éviter les décalages de mise en page, réservez de l'espace à l'aide de code CSS, comme indiqué dans le guide Réduire le décalage de mise en page.

Lorsque vous utilisez des annonces multitailles, assurez-vous que votre mise en page est suffisamment flexible pour accepter une annonce ayant la plus grande taille spécifiée. Vous éviterez ainsi que vos créations soient recadrées par erreur.

Annonces fluides

Les annonces fluides n'ont pas de taille fixe, mais elles s'adaptent au contenu de la création qu'elles affichent. Les annonces natives sont actuellement le seul type d'annonce fluide compatible avec Ad Manager.

Lorsque vous utilisez des annonces fluides, une taille fluid personnalisée peut être spécifiée.

googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

Dans cet exemple, l'espace publicitaire a la largeur de son conteneur parent et sa hauteur est redimensionnée pour s'adapter au contenu de la création. Voici les étapes à suivre par GPT pour redimensionner l'espace publicitaire:

Réponse reçue à l'annonce.
Le contenu de la création est écrit dans un iFrame, avec une hauteur initiale définie sur 0px et une largeur définie sur 100%.
Une fois le chargement de toutes les ressources de l'iFrame terminé, la création devient visible en définissant la hauteur de l'iFrame sur la hauteur de l'élément <body> de l'iFrame.

Annonces responsives

Les annonces responsives étendent les annonces multitailles et vous permettent de spécifier la taille des créations à diffuser en fonction de la taille de la fenêtre d'affichage du navigateur à l'origine de la demande. Cette fonctionnalité permet de contrôler la taille des créations diffusées sur différents types d'appareils (ordinateur, tablette, mobile, etc.).

Pour ce faire, définissez un mappage entre la taille de la fenêtre d'affichage et la taille de l'annonce, puis associez ce mappage à un espace publicitaire.

const responsiveAdSlot = googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "responsive-ad",
  )
  .addService(googletag.pubads());

const mapping = googletag
  .sizeMapping()
  .addSize(
    [1024, 768],
    [
      [750, 200],
      [728, 90],
    ],
  )
  .addSize([640, 480], [300, 250])
  .addSize([0, 0], [])
  .build();

responsiveAdSlot.defineSizeMapping(mapping);

Dans cet exemple, le mappage spécifie:

Lorsque la fenêtre d'affichage est supérieure ou égale à 1024x768, les annonces de taille 750x200 ou 728x90 peuvent être diffusées.
Lorsque 1024x768 > fenêtre d'affichage >= 640x480, les annonces au format 300x250 peuvent être diffusées.
Lorsque la fenêtre d'affichage est inférieure à 640x480, aucune annonce ne peut être diffusée.

GPT détecte la taille de la fenêtre d'affichage du navigateur qui effectue la requête et utilise le mappage le plus grand possible. Pour déterminer le plus grand mappage, GPT prend d'abord en compte la largeur, puis la hauteur [100, 10] > [10, 100]). Si une erreur se produit lors du mappage ou si la taille de la fenêtre d'affichage ne peut pas être déterminée, les tailles spécifiées dans defineSlot() sont utilisées.

Le mappage est ensuite associé à un espace publicitaire en appelant la méthode Slot.defineSizeMapping(). Cette méthode accepte un tableau de mappages au format suivant:

[
  [
    [viewport-width-1, viewport-height-1],
    [[ad-width-1, ad-height-1], [ad-width-2, ad-height-2], ...]
  ],
  [
    [viewport-width-2, viewport-height-2],
    [[ad-width-3, ad-height-3], [ad-width-4, ad-height-4], ...]
  ],
  ...
]

L'ordre des tailles de fenêtre d'affichage dans ce tableau définit leur priorité. Le SizeMappingBuilder utilisé dans l'exemple ci-dessus est un moyen pratique de générer un tableau de ce format, avec des tailles automatiquement classées par ordre décroissant. Dans cet exemple, le résultat de SizeMappingBuilder.build() est le suivant:

[
  [[1024, 768], [[750, 200], [728, 90]]],
  [[640, 480], [[300, 250]]],
  [[0, 0], []]
]