Contrôler le chargement et l'actualisation des annonces

Dans nos exemples de démarrage et de concept de base, la méthode display() de la bibliothèque Google Publisher Tag (GPT) permet d'enregistrer et d'afficher un espace publicitaire. Toutefois, il peut parfois être préférable ou même préférable de séparer ces actions afin de contrôler plus précisément le chargement du contenu des annonces. (par exemple, lorsque vous utilisez une plate-forme de gestion du consentement ou que vous demandez le contenu d'une annonce suite à une action de l'utilisateur).

Dans ce guide, nous allons explorer les mécanismes fournis par GPT pour contrôler le chargement du contenu des annonces et récupérer de nouveaux contenus d'annonces à la demande. Le code complet de cet exemple est disponible sur l'exemple de page Requêtes basées sur des événements.

Contrôler le chargement des annonces

Par défaut, la méthode display() consiste à enregistrer, à demander et à afficher le contenu des annonces dans un espace publicitaire. La demande et l'affichage automatiques du contenu des annonces peuvent être désactivés via la méthode PubAdsService.disableInitialLoad().

Une fois le chargement initial désactivé, les appels à display() n'enregistreront que l'espace publicitaire. Aucun contenu d'annonce ne sera chargé tant que vous n'aurez pas effectué une seconde action. Cela vous permet de contrôler avec précision le moment où les demandes d'annonces sont effectuées.

Pour éviter les demandes d'annonces involontaires, disableInitialLoad() doit être appelé avant l'activation du service et avant l'appel de display().

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Request GPT ads based on events." />
    <title>Event-based ad requests</title>
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
    <script>
      window.googletag = window.googletag || { cmd: [] };

      googletag.cmd.push(() => {
        // Define the ad slot.
        googletag
          .defineSlot("/6355419/Travel", [728, 90], "div-for-slot")
          .setTargeting("test", "event")
          .addService(googletag.pubads());

        // Disable initial load.
        // This prevents GPT from automatically fetching ads when display is called.
        googletag.pubads().disableInitialLoad();
        googletag.enableServices();
      });
    </script>
    <style></style>
  </head>
  <body>
    <div id="div-for-slot" style="width: 300px; height: 250px"></div>
    <script>
      googletag.cmd.push(() => {
        // Register the ad slot.
        // An ad will not be fetched until refresh is called.
        googletag.display("div-for-slot");

        // Register click event handler.
        document.getElementById("showAdButton").addEventListener("click", () => {
          googletag.cmd.push(() => {
            googletag.pubads().refresh();
          });
        });
      });
    </script>
  </body>
</html>

Dans cet exemple, le chargement initial est désactivé, ce qui garantit qu'aucune demande d'annonce n'est effectuée et qu'aucun contenu publicitaire n'est affiché lorsque display() est appelé. L'emplacement est prêt à accepter et afficher une annonce, mais aucune demande d'annonce ne sera envoyée tant que l'espace n'aura pas été actualisé.

Refresh

La méthode PubAdsService.refresh() permet de remplir un ou plusieurs emplacements avec du nouveau contenu d'annonce. Cette méthode peut être utilisée sur les emplacements qui n'ont pas encore chargé de contenu (en raison de disableInitialLoad()), ou pour remplacer le contenu d'un emplacement déjà renseigné. Toutefois, seuls les emplacements enregistrés en appelant display() peuvent être actualisés.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Request GPT ads based on events." />
    <title>Event-based ad requests</title>
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
    <script>
      window.googletag = window.googletag || { cmd: [] };

      googletag.cmd.push(() => {
        // Define the ad slot.
        googletag
          .defineSlot("/6355419/Travel", [728, 90], "div-for-slot")
          .setTargeting("test", "event")
          .addService(googletag.pubads());

        // Disable initial load.
        // This prevents GPT from automatically fetching ads when display is called.
        googletag.pubads().disableInitialLoad();
        googletag.enableServices();
      });
    </script>
    <style></style>
  </head>
  <body>
    <div id="div-for-slot" style="width: 300px; height: 250px"></div>
    <button id="showAdButton">Show/Refresh Ad</button>
    <script>
      googletag.cmd.push(() => {
        // Register the ad slot.
        // An ad will not be fetched until refresh is called.
        googletag.display("div-for-slot");

        // Register click event handler.
        document.getElementById("showAdButton").addEventListener("click", () => {
          googletag.cmd.push(() => {
            googletag.pubads().refresh();
          });
        });
      });
    </script>
  </body>
</html>

Dans cet exemple modifié, lorsqu'un utilisateur clique sur le bouton "Afficher/Actualiser l'annonce", la méthode refresh() est appelée. Cela déclenche une requête pour récupérer le nouveau contenu de l'annonce et le charger dans l'emplacement enregistré, en remplaçant tout contenu préexistant.

Notez que dans l'exemple ci-dessus, la méthode refresh() est appelée sans paramètre, ce qui a pour effet d'actualiser tous les espaces publicitaires enregistrés. Toutefois, il est également possible d'actualiser des espaces publicitaires spécifiques en transmettant un tableau d'espaces publicitaires à la méthode refresh(). Pour voir un exemple, consultez l'exemple Actualiser des espaces publicitaires.

Bonnes pratiques

Lorsque vous utilisez refresh(), vous devez respecter certaines bonnes pratiques.

  1. Ne pas actualiser trop rapidement.

    Si vous actualisez les espaces publicitaires trop rapidement, vos demandes d'annonces risquent d'être limitées. Pour éviter cela, évitez d'actualiser les emplacements plus fréquemment qu'une fois toutes les 30 secondes.

  2. N'appelez pas clear() inutilement

    Lorsque vous actualisez un espace publicitaire, n'appelez pas PubAdsService.clear() au préalable. Cela n'est pas nécessaire, car refresh() remplace le contenu de l'espace publicitaire spécifié, qu'un contenu d'annonce ait été chargé précédemment. Appeler clear() juste avant d'appeler refresh() n'augmente que la durée pendant laquelle un emplacement vide est visible par l'utilisateur.

  3. Actualiser uniquement les espaces publicitaires visibles

    Si vous utilisez refresh() pour remplacer le contenu d'espaces publicitaires qui ne sont jamais visibles, votre taux Active View peut considérablement diminuer. L'événement ImpressionViewableEvent peut être utilisé pour déterminer à quel moment un espace publicitaire est devenu visible, comme dans l'exemple ci-dessous.

    googletag.cmd.push(function() {
      var REFRESH_KEY = 'refresh';
      var REFRESH_VALUE = 'true';
    
      googletag.defineSlot('/6355419/Travel',[728, 90], 'div-for-slot')
          .setTargeting(REFRESH_KEY, REFRESH_VALUE)
          .setTargeting('test', 'event')
          .addService(googletag.pubads());
    
      // Number of seconds to wait after the slot becomes viewable.
      var SECONDS_TO_WAIT_AFTER_VIEWABILITY = 60;
    
      googletag.pubads().addEventListener('impressionViewable', function(event) {
        var slot = event.slot;
        if (slot.getTargeting(REFRESH_KEY).indexOf(REFRESH_VALUE) > -1) {
          setTimeout(function() {
            googletag.pubads().refresh([slot]);
          }, SECONDS_TO_WAIT_AFTER_VIEWABILITY * 1000);
        }
      });
    
      googletag.enableServices();
    });