Tailles d'annonces

Chaque espace publicitaire que vous définissez doit spécifier les tailles d'annonces pouvant être diffusées emplacement. La façon dont les tailles d'annonces sont spécifiées dépend du type d'annonce à diffuser ainsi que de la taille et de la flexibilité des espaces publicitaires.

Dans certains cas, il est possible que la taille de l'annonce soit remplacée au niveau de l'élément de campagne Google Ad Manager. Consultez le Centre d'aide pour en savoir plus plus encore.

Le code complet des exemples fournis dans ce guide est disponible sur la page size [tailles].

Annonces à taille fixe

Vous pouvez définir un espace publicitaire avec une seule taille 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 à taille fixe, nous vous recommandons définir la taille de l'élément <div> dans lequel la création sera affichée. Depuis les créations s'affichent souvent de manière asynchrone. Elles peuvent entraîner l'affichage d'autres éléments la page se décale si l'espace est insuffisant pour lui.

Annonces multitailles

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

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

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

Si les dimensions de l'espace publicitaire <div> ne sont pas spécifiées dans CSS, GPT définit automatiquement les dimensions sur la plus courte Hauteur déclarée et largeur déclarée la plus large supérieure à 1 px lorsque display() est appelé. Dans ce cas, il s'agit de 750x90. Toutefois, ce dimensionnement peut se produire qu'un autre contenu de la page est chargé, ce qui entraîne son décalage. Pour éviter décalages de mise en page, réservez de l'espace à l'aide de CSS, comme indiqué dans 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 acceptent une annonce ayant la plus grande taille spécifiée. Cela permet d'éviter que les créations accidentellement rognées.

Annonces fluides

Les annonces fluides n'ont pas de taille fixe, mais s'adaptent au contenu de la création l'écran. Les annonces natives sont actuellement les seules annonces fluides compatible avec Ad Manager.

Lorsque vous utilisez des annonces fluides, vous pouvez spécifier une taille fluid personnalisée.

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

Dans cet exemple, l'espace publicitaire a la largeur de son conteneur parent, pour l'adapter au contenu de la création. Les étapes à suivre dans GPT pour redimensionner l'espace publicitaire sont les suivantes:

Une réponse d'annonce a été reçue.
Le contenu de la création est écrit dans un iFrame, avec une hauteur initiale définie sur 0px. et la largeur définies sur 100%.
Une fois que toutes les ressources de l'iFrame ont fini de se charger, la création est générée visible en définissant la hauteur de l'iFrame sur la hauteur l'élément <body> de l'iFrame.

Annonces responsives

Les annonces responsives permettent d'étendre les annonces multitailles les créations à diffuser en fonction de la taille de la fenêtre d'affichage du navigateur requête. Cette fonctionnalité permet de contrôler la taille des créations diffusées à différents types d'appareils (ordinateur de bureau, tablette, mobile, etc.).

Pour cela, vous devez définir un mappage entre la taille de la fenêtre d'affichage et celle de l'annonce, puis j'associe 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 valeur de la fenêtre d'affichage est supérieure ou égale à 1024x768, les annonces dont la taille est 750x200 ou 728x90 peuvent être diffusées.
Lorsque 1024x768 > fenêtre d'affichage >= 640x480, les annonces dont la taille est 300x250 peuvent être diffusées.
Lorsque la fenêtre d'affichage < 640x480, aucune annonce ne peut être diffusée.

GPT détectera la taille de la fenêtre d'affichage du navigateur la demande et utilisez le mappage le plus grand qui convient. Pour déterminer la plus grande Mise en correspondance : GPT tient d'abord compte de la largeur, puis de la hauteur (par exemple, [100, 10] > [10, 100]). En cas d'erreur de mappage ou si la fenêtre d'affichage ne peut pas être déterminée, les tailles spécifiées dans defineSlot() seront 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é. La SizeMappingBuilder utilisé dans L'exemple ci-dessus permet de générer facilement un tableau ce format, les tailles étant automatiquement classées de la plus grande à la plus petite. Dans ce exemple, la sortie de SizeMappingBuilder.build() est:

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