Cette page a été traduite par l'API Cloud Translation.

Premiers pas avec les tags Google Publisher Tag

Google Publisher Tag (GPT) est une bibliothèque d'ajout de tags d'emplacement publicitaire pour Google Ad Manager. Elle permet de créer des demandes d'annonces de façon dynamique. Il récupère des informations clés vous concernant (telles que le code de bloc d'annonces, la taille d'annonce et le ciblage personnalisé), crée la demande et diffuse l'annonce sur des pages Web.

Pour obtenir un aperçu de GPT, y compris ses avantages, ses fonctionnalités de base et ses fonctionnalités, consultez le Centre d'aide Ad Manager.

Afficher une annonce test

L'exemple suivant vous aide à créer une page de test qui utilise GPT pour charger une annonce générique à partir du réseau de test de Google.

Le code complet de cet exemple est disponible sur la page d'exemple Afficher une annonce test.

Créer un document HTML de base

Dans un éditeur de texte, créez un document HTML de base appelé hello-gpt.html.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello GPT</title>
  </head>
  <body>
  </body>
</html>

Charger la bibliothèque GPT

Chargez la bibliothèque GPT en ajoutant le code suivant dans le fichier <head> du document HTML.
```
<head>
  <meta charset="utf-8">
  <title>Hello GPT</title>
  <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
</head>
```
Ce code charge la bibliothèque GPT à partir de https://securepubads.g.doubleclick.net/tag/js/gpt.js. Une fois la bibliothèque entièrement chargée, elle traite toutes les commandes en file d'attente dans l'objet googletag.

Important :Chargez les tags GPT à partir d'un domaine Google uniquement.
Définir un espace publicitaire

Définissez un espace publicitaire et initialisez GPT à l'aide de la méthode googletag.enableServices().
```
<head>
  <meta charset="utf-8">
  <title>Hello GPT</title>
  <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
  <script>
    window.googletag = window.googletag || {cmd: []};
    googletag.cmd.push(function() {
      googletag
          .defineSlot(
              '/6355419/Travel/Europe/France/Paris', [300, 250], 'banner-ad')
          .addService(googletag.pubads());
      googletag.enableServices();
    });
  </script>
</head>
```
Ce code permet d'abord que l'objet googletag est disponible, puis met en file d'attente une commande qui construit un espace publicitaire et active GPT.

Dans cet exemple, l'espace publicitaire charge une annonce de taille 300x250 à partir du bloc d'annonces spécifié par le chemin /6355419/Travel/Europe/France/Paris. L'annonce sera affichée dans un élément <div id="banner-ad"> dans le corps de la page, qui sera ajouté ensuite.
Le chemin du bloc d'annonces suit le format /network-code/[parent-ad-unit-code/.../]ad-unit-code, où:
- network-code est un identifiant unique du réseau Ad Manager auquel le bloc d'annonces appartient.
- parent-ad-unit-code correspond aux codes de tous les blocs d'annonces parents (s'applique uniquement aux blocs d'annonces de premier niveau).
- ad-unit-code est le code du bloc d'annonces à afficher
Notez que tous les codes de bloc d'annonces inclus dans le chemin du bloc d'annonces doivent respecter les règles de mise en forme spécifiées par Ad Manager.
Spécifiez l'emplacement de diffusion de l'annonce.

Spécifiez l'emplacement de l'annonce sur la page en ajoutant le code suivant à l'élément <body> du document HTML.
```
<body>
  <div id="banner-ad" style="width: 300px; height: 250px;">
    <script>
      googletag.cmd.push(function() {
        googletag.display('banner-ad');
      });
    </script>
  </div>
</body>
```
Notez que l'ID de la propriété <div> correspond à l'ID spécifié lors de la définition de l'espace publicitaire.
Prévisualiser la page de test

Enregistrez le fichier hello-gpt.html et ouvrez-le dans un navigateur Web. Une fois chargée, la page affiche une annonce test dans le corps de la page Web.

Attention :Si vous ne voyez pas d'annonce, assurez-vous que l'ID div spécifié dans le <head> de la page correspond à celui de l'élément <div> que vous avez ajouté au <body> de la page.

Diffusez votre propre annonce

À l'aide du fichier hello-gpt.html créé dans la section Afficher une annonce test, remplacez le code de l'en-tête par le code spécifiant l'inventaire de votre propre réseau Ad Manager.

Générez un tag d'emplacement publicitaire pour le bloc d'annonces à afficher. Pour en savoir plus sur la génération de tags d'emplacement publicitaire, consultez le Centre d'aide Ad Manager.

Copiez le code de tag d'emplacement publicitaire fourni dans la section En-tête du document et utilisez-le pour remplacer le code correspondant dans la section <head> de votre document HTML.

<head>
 <meta charset="utf-8">
 <title>Hello GPT</title>
 <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
 <script>
   window.googletag = window.googletag || {cmd: []};
   googletag.cmd.push(function() {
     googletag
         .defineSlot(
             'ad-unit-path', [width, height], 'div-id')
         .addService(googletag.pubads());
     googletag.enableServices();
   });
 </script>
</head>

Enregistrez le fichier hello-gpt.html mis à jour et ouvrez-le dans un navigateur Web.

Découvrir les principes de base