Laden und Aktualisieren von Anzeigen steuern

In unseren Einführungs- und grundlegenden Konzepten wird die Methode display() der Google Publisher-Tag-Bibliothek (GPT) verwendet, um eine Anzeigenfläche zu registrieren und anzuzeigen. Manchmal kann es jedoch sinnvoller oder sogar notwendig sein, diese Aktionen zu trennen, um genauer zu steuern, wann der Anzeigeninhalt geladen wird. Das ist beispielsweise der Fall, wenn Sie mit einer Plattform zur Einwilligungsverwaltung arbeiten oder Anzeigeninhalte als Folge einer Nutzeraktion anfordern.

In diesem Leitfaden stellen wir die von GPTs bereitgestellten Mechanismen vor, um das Laden von Anzeigeninhalten zu steuern und bei Bedarf neue Anzeigeninhalte abzurufen. Den vollständigen Code für dieses Beispiel finden Sie auf der Beispielseite zu ereignisbasierten Anfragen.

Laden von Anzeigen steuern

Mit der Methode display() werden Anzeigeninhalte standardmäßig registriert, angefordert und in einer Anzeigenfläche gerendert. Das automatische Anfordern und Rendern von Anzeigencontent kann über die Methode PubAdsService.disableInitialLoad() deaktiviert werden.

Wenn das anfängliche Laden deaktiviert ist, wird bei Aufrufen von display() nur die Anzeigenfläche registriert. Es werden erst Anzeigeninhalte geladen. So können Sie genau steuern, wann Anzeigenanfragen erfolgen.

Um unbeabsichtigte Anzeigenanfragen zu vermeiden, muss disableInitialLoad() vor dem Aktivieren des Dienstes und vor dem Aufruf von display() aufgerufen werden.

<!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>

In diesem Beispiel wird das anfängliche Laden deaktiviert, damit keine Anzeigenanfrage gesendet und kein Anzeigencontent gerendert wird, wenn display() aufgerufen wird. Die Anzeigenfläche ist bereit, eine Anzeige anzunehmen und anzuzeigen, aber eine Anzeigenanfrage wird erst gestellt, wenn die Anzeigenfläche aktualisiert wird.

Aktualisieren

Die Methode PubAdsService.refresh() wird verwendet, um eine Anzeigenfläche mit neuem Anzeigeninhalt zu füllen. Diese Methode kann für Slots verwendet werden, die noch keine Inhalte haben (aufgrund von disableInitialLoad()) oder den Inhalt eines bereits ausgefüllten Slots ersetzen. Es können jedoch nur Slots aktualisiert werden, die durch den Aufruf von display() registriert wurden.

<!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>

Wenn ein Nutzer in diesem geänderten Beispiel auf die Schaltfläche „Anzeige anzeigen/aktualisieren“ klickt, wird die Methode refresh() aufgerufen. Dadurch wird eine Anfrage ausgelöst, mit der neuer Anzeigeninhalt abgerufen und in die registrierte Anzeigenfläche geladen wird. Dabei werden vorhandene Inhalte überschrieben.

Im Beispiel oben wird die Methode refresh() ohne Parameter aufgerufen. Dadurch werden alle registrierten Anzeigenflächen aktualisiert. Es ist aber auch möglich, bestimmte Anzeigenflächen zu aktualisieren, indem Sie ein Array von Slots an die Methode refresh() übergeben. Ein Beispiel hierzu finden Sie im Beispiel Anzeigenflächen aktualisieren.

Best Practices

Bei der Arbeit mit refresh() gibt es einige Best Practices, die befolgt werden sollten.

  1. Aktualisieren Sie die Seite nicht zu schnell.

    Wenn Sie die Anzeigenflächen zu schnell aktualisieren, werden Ihre Anzeigenanfragen möglicherweise gedrosselt. Um dies zu vermeiden, sollten Sie die Slots nicht öfter als einmal alle 30 Sekunden aktualisieren.

  2. clear() nicht unnötig anrufen

    Rufen Sie beim Aktualisieren einer Anzeigenfläche nicht zuerst PubAdsService.clear() auf. Dies ist nicht erforderlich, da refresh() den Inhalt des angegebenen Slots ersetzt, unabhängig davon, ob zuvor Anzeigencontent geladen wurde. Wenn clear() direkt vor refresh() aufgerufen wird, verlängert sich nur die Zeit, in der ein leerer Slot für den Nutzer sichtbar ist.

  3. Nur sichtbare Anzeigenflächen aktualisieren

    Wenn Sie die Inhalte von Anzeigenflächen, die nie sichtbar sind, durch refresh() ersetzen, kann die ActiveView-Rate erheblich sinken. Mit ImpressionViewableEvent lässt sich wie im Beispiel unten ermitteln, wann eine Anzeigenfläche sichtbar ist.

    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();
    });