Chaque espace publicitaire que vous définissez doit spécifier les tailles d'annonces éligibles à la diffusion dans cet espace. La manière dont les tailles d'annonces sont spécifiées varie en fonction du type d'annonce à 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. Consultez le Centre d'aide pour en savoir plus.
Le code complet des exemples inclus dans ce guide est disponible sur la page des exemples de tailles d'annonces.
Annonces à taille fixe
Dans le cas le plus simple, un espace publicitaire peut avoir 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.
Lorsque vous utilisez des annonces à taille fixe, nous vous recommandons vivement de définir la taille de l'élément <div> dans lequel la création s'affiche. É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, une liste des tailles acceptées peut être fournie lors de la définition de l'espace publicitaire.
googletag
.defineSlot('/6355419/Travel/Europe',
[[300, 250], [728, 90], [750, 200]], 'multi-size-ad')
.addService(googletag.pubads());
Dans cet exemple, des créations 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 aucune dimension n'est spécifiée pour l'espace publicitaire <div> dans CSS, GPT définit automatiquement les dimensions égales à 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 se produire 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 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 les annonces de la plus grande taille spécifiée. Ainsi, les créations ne seront pas recadrées par inadvertance.
Annonces fluides
Les annonces fluides n'ont pas de taille fixe, mais s'adaptent au contenu de la création qu'elles affichent. Les annonces natives sont actuellement le seul type d'annonce fluide accepté par Ad Manager.
Lorsque vous utilisez des annonces fluides, vous pouvez spécifier une taille personnalisée fluid.
googletag
.defineSlot('/6355419/Travel', ['fluid'], 'native-ad')
.addService(googletag.pubads());
Dans cet exemple, la largeur de l'espace publicitaire correspond à celle du conteneur parent et sa taille s'adapte au contenu de la création. Voici les étapes à suivre pour redimensionner un espace publicitaire dans GPT:
- Réponse à l'annonce reçue.
- Le contenu de la création est écrit dans un iFrame, avec une hauteur initiale de
0pxet une largeur de100%. - Une fois que le chargement de toutes les ressources du cadre iFrame est terminé, la création est rendue visible en définissant la hauteur du cadre iFrame sur la hauteur de l'élément
<body>du cadre 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 de bureau, tablette, mobile, etc.).
Pour ce faire, vous devez définir un mappage entre la taille de la fenêtre d'affichage et celle de l'annonce, puis l'associer à un espace publicitaire.
var responsiveAdSlot =
googletag.defineSlot('/6355419/Travel/Europe',
[[300, 250], [728, 90], [750, 200]], 'responsive-ad')
.addService(googletag.pubads());
var 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 taille750x200ou728x90peuvent être diffusées. - Lorsque
1024x768> fenêtre d'affichage >=640x480, des annonces de taille300x250peuvent ê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 plus grand mappage possible. Pour déterminer quel mappage utiliser, Google Publisher Tag prend d'abord en compte la largeur, puis la hauteur (c'est-à-dire [100, 10] > [10, 100]). En cas d'erreur dans le 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é. La SizeMappingBuilder utilisée dans l'exemple ci-dessus est un moyen pratique de générer un tableau de ce format, les tailles étant automatiquement triées par ordre décroissant. Dans cet exemple, la sortie de SizeMappingBuilder.build() est la suivante:
[
[[1024, 768], [[750, 200], [728, 90]]],
[[640, 480], [[300, 250]]],
[[0, 0], []]
]