Le guide suivant explique comment afficher une annonce test et présente des concepts plus basiques pour tirer le meilleur parti de la bibliothèque Google Publisher Tag (GPT). Ces concepts incluent les éléments suivants :
- Tailles 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 à la propriété <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(function() {
});
</script>
La bibliothèque GPT est chargée, et les objets googletag et CommandArray sont initialisés. L'initialisation de ces objets vous permet de commencer immédiatement à utiliser le tableau de commandes GPT. Ajoutez le code JavaScript qui suit le corps de la fonction vide définie dans cet extrait.
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 différents formats d'annonces, tailles et options de ciblage.
Espace publicitaire de 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');
Outre le chemin d'accès, la taille et l'ID de conteneur <div>, cet extrait spécifie également un certain nombre d'options de ciblage. Ces options permettent de limiter et de différencier les annonces pouvant être diffusées dans cet espace. En savoir plus sur le ciblage par clé-valeur
Espace publicitaire ancré
Voici un espace publicitaire ancré, joint 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 format hors page, qui est 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 limitent souvent 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 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. Les espaces publicitaires fluides s'ajustent au contenu de la création de l'annonce. Vous définissez des espaces publicitaires fluides avec l'option de taille fluid. En savoir plus sur les tailles et les options de dimensionnement disponibles
Configurer les paramètres au niveau de la page
Certaines options de configuration GPT s'appliquent globalement, plutôt que des espaces publicitaires spécifiques. Ces paramètres sont appelés "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 a trois fonctions:
- Configure les options de ciblage au niveau de la page, qui sont appliquées à chaque espace publicitaire de la page.
- Active l'architecture de demande simple (SRA), qui regroupe les demandes de plusieurs espaces publicitaires en une seule demande d'annonce. L'architecture de demande simple améliore les performances. Elle est nécessaire pour garantir l'intégrité des exclusions réciproques et des roadblocks. C'est pourquoi nous vous recommandons de toujours l'activer. Découvrez comment utiliser correctement l'architecture de demande simple.
- Active les services associés à nos espaces publicitaires qui permettent d'effectuer des demandes d'annonces.
Annonces display
Enfin, ajoutez l'extrait de code suivant à la section <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(function() {
// Ensure the first call to display comes after static ad slot
// divs are defined.
googletag.display('banner-ad');
});
</script>
Cette opération définit deux conteneurs d'espace publicitaire: banner-ad et native-ad. Ces valeurs id de conteneur correspondent aux valeurs que vous avez fournies lorsque vous avez défini les espaces publicitaires précédemment dans cet exemple.
Une fois tous les espaces publicitaires définis, un appel pour afficher banner-ad est effectué. Étant donné que l'architecture de demande simple est activée, cet appel display unique appelle et affiche tous les espaces publicitaires définis jusqu'à présent. Si nécessaire, vous pouvez contrôler plus précisément le chargement et l'actualisation des annonces, ainsi que le comportement des requêtes par lot avec l'architecture de demande simple activée.
Exemple complet
Voici le code source complet de l'exemple de page sur lequel s'appuie ce guide. Vous pouvez également regarder une démo interactive de cette page.