Le guide suivant explique comment afficher une annonce de test et présente d'autres concepts de base pour exploiter pleinement la bibliothèque Google Publisher Tag (GPT). Ces concepts incluent les éléments suivants :
- Dimensionnement des annonces
- Ciblage par clé-valeur
- Architecture de demande simple
Charger la bibliothèque GPT
Commencez par charger et initialiser la bibliothèque GPT. Ajoutez ce qui suit au <head> du document HTML:
<script
async
src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
crossorigin="anonymous"
></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
});
</script>Cela charge la bibliothèque GPT et initialise les objets googletag et CommandArray. Initialiser ces objets vous permet de commencer à utiliser immédiatement le tableau de commandes GPT. Ajoutez le code JavaScript suivant au corps de la fonction vide définie dans cet extrait.
Définir des emplacements d'annonce
Après avoir chargé GPT, vous pouvez définir des espaces publicitaires. L'exemple suivant définit trois emplacements d'annonces avec différents formats, tailles et options de ciblage.
Espace publicitaire de taille fixe
Voici un emplacement d'annonce simple, à taille fixe:
// Define a fixed size ad slot, customized with key-value targeting. googletag .defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad") .addService(googletag.pubads()) .setTargeting("color", "red") .setTargeting("position", "atf");
En plus du chemin, de la taille et de l'ID <div> du conteneur du bloc d'annonces, cet extrait spécifie également un certain nombre d'options de ciblage. Ces options limitent et différencient les annonces pouvant être diffusées dans cet emplacement. En savoir plus sur le ciblage par clé-valeur
Espace publicitaire d'annonce ancrée
Voici un espace publicitaire ancré, attaché au bas de la fenêtre d'affichage:
// Define an anchor ad slot that sticks to the bottom of the viewport. const anchorSlot = googletag.defineOutOfPageSlot( "/6355419/Travel", googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR, ); // The slot will be null if the page or device does not support anchors. if (anchorSlot) { anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads()); document.getElementById("status").textContent = "Anchor ad is initialized. Scroll page to activate."; }
Les emplacements d'ancrage sont un type de format hors page défini à l'aide de la méthode defineOutOfPageSlot, plutôt que de la méthode defineSlot habituelle. En savoir plus sur les créations hors page
Les formats hors page sont souvent soumis à des restrictions concernant les types de pages et d'appareils sur lesquels ils peuvent être diffusés. En raison de ces restrictions, vous devez vérifier que l'emplacement est correctement défini avant d'interagir avec lui. Pour en savoir plus, consultez l'exemple Afficher une annonce ancrée.
Espace publicitaire fluide
Voici un emplacement d'annonce fluide pour une annonce native:
// Define a fluid ad slot that fills the width of the enclosing column and // adjusts the height as defined by the native creative delivered. googletag .defineSlot("/6355419/Travel", ["fluid"], "native-ad") .addService(googletag.pubads());
La taille des espaces publicitaires fluides n'est pas fixe. Les espaces publicitaires fluides s'ajustent
pour s'adapter au contenu de l'annonce. Vous définissez des emplacements publicitaires fluides avec l'option de taille fluid. En savoir plus sur le dimensionnement des annonces et les options de dimensionnement disponibles
Configurer les paramètres au niveau de la page
Certaines options de configuration GPT s'appliquent globalement, et non à des espaces publicitaires spécifiques. Il s'agit des paramètres au niveau de la page.
Voici un exemple de configuration des paramètres au niveau de la page:
// Configure page-level targeting. googletag.pubads().setTargeting("interests", "basketball"); // Enable SRA and services. googletag.pubads().enableSingleRequest(); googletag.enableServices();
Cet extrait de code remplit trois fonctions:
- Configure des options de ciblage au niveau de la page, qui sont appliquées à chaque espace publicitaire de la page.
- Active le mode SRA (Single Request Architecture), qui regroupe les demandes pour plusieurs espaces publicitaires en une seule demande d'annonce. La SRA améliore les performances et est nécessaire pour garantir que les exclusions réciproques et les roadblocks sont respectés. Nous vous recommandons donc de toujours l'activer. Découvrez comment utiliser correctement la SRA.
- Active les services associés à nos espaces publicitaires qui permettent d'effectuer des demandes d'annonces.
Annonces display
Enfin, ajoutez l'extrait suivant au <body> de la page:
<div class="page-content centered">
<div id="banner-ad" style="width: 728px; height: 90px"></div>
<!--
If the following status is displayed when the page is rendered, try
loading the page in a new window or on a different device.
-->
<h1 id="status">Anchor ads are not supported on this page.</h1>
<!--
Spacer used for example purposes only. This positions the native ad
container below the fold to encourage scrolling.
-->
<div class="spacer"></div>
<div id="native-ad" class="native-slot"></div>
</div>
<script>
googletag.cmd.push(() => {
// Request and render all previously defined ad slots.
googletag.display("banner-ad");
});
</script>Cela définit deux conteneurs d'espaces publicitaires: banner-ad et native-ad. Ces valeurs id de conteneur correspondent aux valeurs que vous avez fournies lorsque vous avez défini les emplacements d'annonces plus tôt dans cet exemple.
Une fois tous les espaces publicitaires définis, un appel est effectué pour afficher banner-ad. Étant donné que l'architecture de demande simple est activée, cet appel d'affichage unique demande et affiche tous les espaces publicitaires définis jusqu'à ce point. Si nécessaire, vous pouvez contrôler plus précisément le chargement et le rafraîchissement des annonces et le comportement de traitement par lot avec l'activation de la fonctionnalité SRA.
Exemple complet
Vous trouverez ci-dessous le code source complet de l'exemple de page sur lequel repose ce guide. Vous pouvez également regarder une démo interactive de cette page.