Premiers pas avec Google Publisher Tag

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

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

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

Voici quelques exemples qui vous aideront à faire vos premiers pas avec GPT. Si vous avez besoin d'aide supplémentaire concernant GPT, consultez les options d'assistance disponibles.

Diffuser une annonce test

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

Vous trouverez le code complet de cet exemple sur la page d'exemple Diffuser une annonce test.

  1. Créer un document HTML de base

    Dans un éditeur de texte, créez un document HTML de base nommé 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>
        <script>
          googletag.cmd.push(() => {
            // Request and render an ad for the "banner-ad" slot.
            googletag.display("banner-ad");
          });
        </script>
      </body>
    </html>
    
  2. 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 à partir de l'adresse 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.

    <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"></script>
      <style></style>
    </head>
    
  3. Définir un espace publicitaire

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

    Ce code vérifie d'abord que l'objet googletag est disponible, puis met en file d'attente une commande qui crée 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 s'affichera dans un élément <div id="banner-ad"> du corps de la page, qui sera ajouté ensuite.

    <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"></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>
    
  4. Spécifier l'emplacement de diffusion de l'annonce

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

    Notez que l'ID de ce <div> correspond à l'ID spécifié lors de la définition de 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>
    
  5. 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.

Affichez votre propre annonce

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

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

  2. Copiez le code du 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>
    
  3. Enregistrez le fichier hello-gpt.html mis à jour et ouvrez-le dans un navigateur Web.