Ce guide explique comment afficher une annonce 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 le code suivant au fichier <head> du document HTML:
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
});
</script>
Cette opération charge la bibliothèque GPT, et initialise les objets googletag et CommandArray. L'initialisation de ces objets vous permet de commencer immédiatement à utiliser le tableau de commandes GPT. Ajoutez le code JavaScript qui suit au corps de la fonction vide définie dans cet extrait de code.
Définir des espaces publicitaires
Après avoir chargé GPT, vous pouvez définir des espaces publicitaires. L'exemple suivant définit trois espaces publicitaires avec des formats d'annonce, des options de dimensionnement et de ciblage différents.
Espace publicitaire à taille fixe
Voici un espace publicitaire simple de 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 d'accès, de la taille et de l'ID <div> du conteneur associés au bloc d'annonces, cet extrait de code spécifie également un certain nombre d'options de ciblage. Ces options limitent et différencient les annonces susceptibles d'être diffusées dans cet espace publicitaire. En savoir plus sur le ciblage par clé-valeur
Espace publicitaire ancré
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, qui sont définis à 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 présentent souvent des restrictions sur 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 bien défini avant d'interagir avec lui. Pour en savoir plus, consultez l'exemple Afficher une annonce ancrée.
Espace publicitaire fluide
Voici un espace publicitaire fluide pour une annonce native:
// Define a fluid ad slot that adjusts its height to fit the creative
// content being displayed.
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
La taille des espaces publicitaires fluides n'est pas fixe. Ils s'ajustent au contenu de la création et s'adaptent à l'annonce. Pour définir des espaces publicitaires fluides, utilisez 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 de manière globale, plutôt qu'à des espaces publicitaires spécifiques. C'est ce que nous appelons les 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 effectue trois actions:
- Configure les options de ciblage au niveau de la page, qui sont appliquées à chaque espace publicitaire de la page.
- Active le mode d'architecture de demande simple (SRA), qui regroupe les demandes de plusieurs espaces publicitaires dans une seule demande d'annonce. L'architecture de demande simple améliore les performances et est nécessaire pour garantir que les exclusions réciproques et les obstacles sont respectés. Nous vous recommandons donc de toujours l'activer. Découvrez comment utiliser correctement l'architecture de demande simple.
- Active les services associés à nos espaces publicitaires qui autorisent l'envoi de 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>
Ce champ définit deux conteneurs d'espaces publicitaires: banner-ad et native-ad. Ces valeurs id de conteneur correspondent aux valeurs que vous avez fournies lors de la définition des espaces publicitaires précédemment dans cet exemple.
Une fois tous les espaces publicitaires définis, un appel pour afficher banner-ad est effectué. Comme l'architecture de demande simple est activée, ce seul appel display demande et affiche tous les espaces publicitaires définis jusqu'à présent. Si nécessaire, vous pouvez plus précisément contrôler le chargement et l'actualisation des annonces ainsi que le comportement de traitement par lot lorsque l'architecture de demande simple est activée.
Exemple complet
Vous trouverez ci-dessous le code source complet de l'exemple de page sur lequel ce guide est basé. Vous pouvez également regarder une démonstration interactive de cette page.