Premiers pas avec Google Publisher Tag

Google Publisher Tag (GPT) est une bibliothèque d'ajout de tags d'emplacement publicitaire Google Ad Manager.

Vous pouvez utiliser GPT pour créer des demandes d'annonces de manière dynamique. GPT prend des détails clés tels que le code du bloc d'annonces, la taille de l'annonce un ciblage personnalisé, crée la demande et diffuse l'annonce sur des pages Web.

Pour en savoir plus sur GPT, consultez la Centre d'aide Ad Manager.

Voici quelques exemples que vous pouvez utiliser pour commencer à utiliser GPT. Si si vous avez besoin d'aide supplémentaire concernant GPT, consultez la page d'assistance options.

Afficher une annonce test

L'exemple suivant vous montre comment créer une page de test 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 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" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Display a fixed-sized test ad." />
    <title>Display a test ad</title>
    <style></style>
  </head>
  <body>
  </body>
</html>

Charger la bibliothèque GPT

Chargez la bibliothèque GPT en ajoutant le code suivant au <head> du document HTML.

Ce code charge la bibliothèque GPT https://securepubads.g.doubleclick.net/tag/js/gpt.js. Une fois que la bibliothèque a entièrement chargé, il traite toutes les commandes en file d'attente dans objet googletag.

<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Display a fixed-sized test ad." />
  <title>Display a test ad</title>
  <script
    async
    src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
    crossorigin="anonymous"
  ></script>
  <style></style>
</head>

Définir un espace publicitaire

Définissez un espace publicitaire, puis initialisez GPT à l'aide de la méthode googletag.enableServices().

Ce code vérifie d'abord que l'objet googletag est disponible, puis met un qui crée un espace publicitaire et active GPT.

Dans cet exemple, l'espace publicitaire charge une annonce de taille 300x250 à partir de l'annonce unité spécifiée par le chemin d'accès /6355419/Travel/Europe/France/Paris. L'annonce sera s'affiche dans un élément <div id="banner-ad"> du corps de la page, ce qui seront ajoutées par la suite.

<ph type="x-smartling-placeholder">
</ph> Le chemin du bloc d'annonces respecte le format /network-code/[parent-ad-unit-code/.../]ad-unit-code, où:
- network-code est un identifiant unique de l'élément Réseau Ad Manager auquel appartient le bloc d'annonces
- parent-ad-unit-code correspondent aux codes de tous les blocs d'annonces parents (uniquement s'applique aux blocs d'annonces autres que 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 d'accès au bloc d'annonces doivent respecter le des règles de mise en forme spécifiées par Ad Manager.
```
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Display a fixed-sized test ad." />
  <title>Display a test ad</title>
  <script
    async
    src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
    crossorigin="anonymous"
  ></script>
  <script>
    window.googletag = window.googletag || { cmd: [] };

    googletag.cmd.push(() => {
      // Define an ad slot for div with id "banner-ad".
      googletag
        .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "banner-ad")
        .addService(googletag.pubads());

      // Enable the PubAdsService.
      googletag.enableServices();
    });
  </script>
  <style></style>
</head>
```

Indiquer l'emplacement de diffusion de l'annonce

Indiquez l'emplacement de l'annonce sur la page en ajoutant le code suivant à l'élément <body> du document HTML.

Notez que l'ID de ce <div> correspond à celui spécifié lors de la définition de dans l'espace publicitaire.

<body>
  <div id="banner-ad" style="width: 300px; height: 250px"></div>
  <script>
    googletag.cmd.push(() => {
      // Request and render an ad for the "banner-ad" slot.
      googletag.display("banner-ad");
    });
  </script>
</body>

Prévisualiser la page de test

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

Attention :Si vous ne voyez pas d'annonce, vérifiez que l'élément "div ID" spécifié dans la section <head> de la page correspond à l'ID de l'élément <div> ajouté à le <body> de la page.

Diffusez votre propre annonce

Pour diffuser votre propre annonce, utilisez le fichier hello-gpt.html de la section Afficher un test l'annonce, puis remplacez le code de l'en-tête par le code spécifiant de votre propre réseau Ad Manager.

Générez un tag d'emplacement publicitaire pour le bloc d'annonces à afficher. En savoir plus sur générer des tags d'emplacement publicitaire Centre d'aide Ad Manager.

Copiez le code du tag d'emplacement publicitaire figurant 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 src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" async></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