Geschrieben von

Passback mit Google Ad Manager

MarTech

Was sind Passback Tags?

Bei einem Passback Tag bzw. Rücksendungs-Tag handelt es sich um Google Publisher Tags mit einer Rücksendungsfunktion. Sollten über den initialen Ad-Request keine Anzeigen ausgeliefert werden können, so sorgt das Passback Tag, dass weitere Anzeigenanfragen gestellt werden bis eine Anzeige zurück geliefert wird. Am besten lässt sich das an einem konkreten Use Case erklären:

Use Case

Es gibt Advertiser, die zum Ausliefern von Creatives einen Ad Server eines Drittanbieters nutzen. In diesem Fall wird im Google Ad Manager kein Standard-Bild-Creative getraffickt, sondern stattdessen das Creative vom Typ “Drittanbieter” gewählt:

Das heißt, dass bei einer Anfrage an den Google Ad Manager über den Anzeigenblock statt einem Bild ein Drittanbietercode zurückgeliefert wird. Über diesen Code fragt der Browser beim Drittanbieterserver das Ad Creative an. Jedoch kann es passieren, dass der Drittanbieterserver kein passendes Creative hat, da die Anfrage nicht zu den Aufträgen passt. In diesem Fall möchte man als Publisher dennoch sicherstellen, dass der Anzeigenblock befüllt wird, um den Umsatz zu steigern. Dabei helfen entsprechend Passback Tags. Diese befüllen den Anzeigenblock, nachdem der Drittanbieterserver kein Creative zurückgeliefert hat.

Der Ablauf lässt sich wie folgt visualisieren (Erklärung direkt unter dem Abbild):

  1. Der Nutzer landet auf der Seite und der Anzeigenblock sendet über die Google Publisher Tags eine Anfrage an den Google Ad Manager. Dabei fordert der Browser eine Ad an.
  2. Google Ad Manager sucht nun nach passenden Line Items und Creatives. Dabei wird etwas passendes gefunden: Eine Werbebuchung, die ein Creative vom Typ “Drittanbieter” hat.
  3. Der Drittanbieter-Code wird nun zum Browser geschickt.
  4. Der Browser nimmt den Response entgegen, rendert den Drittanbieter-Code und führt den Code aus.
  5. Dabei wird ein Request zum Ad Server des Drittanbieters ausgelöst. Dieser Request fordert eine Ad an.
  6. Der Ad Server des Drittanbieters verarbeitet den Request, kann jedoch keine passende Anzeigen finden und ausliefern.
  7. Der Ad Server des Drittanbieters schickt dann ein Signal an den Browser (das Passback Tag direkt oder ein “Signal”), dass keine Ad ausgeliefert werden kann.
  8. Im Browser des Nutzer wird diese Information nun verarbeitet, das Passback Tag wird im DOM gerendert.
  9. Das führt dazu, dass wieder ein Request an den Google Ad Manager geschickt wird (Passback).
  10. Google Ad Manager findet nun eine passende Anzeige und liefert diese an den Browser zurück.
  11. Der Browser empfängt das Creative und fügt es in die Seite ein. Der Nutzer sieht nun die Ad.

Code-Beispiel

Das Passback Tag für den Google Ad Manager wird wie jedes andere GPT-Tag generiert. Empfohlen wird, dass Passback Tag in einem gesonderten iFrame zu rendern, damit es nicht mit anderen GPT-Einstellungen in die Quere kommt. Hier ein einfaches Beispiel eines Passback Tags:

<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<div id="gpt-passback">
  <script>
    window.googletag = window.googletag || {cmd: []};
    googletag.cmd.push(function() {
        googletag.defineSlot('/6355419/Travel/Europe', [300, 250], 'gpt-passback')
          .addService(googletag.pubads());
        googletag.enableServices();
        googletag.display('gpt-passback');
    });
  </script>
</div>

Implementierung von Passback Tags

Wie das Passback Tag implementiert wird, hängt auch davon ab wie der Ad Server des Drittanbieters damit umgehen kann. Initial fordert ein schon vorhandener Anzeigenblock auf der Website des Publishers das Drittanbieter-Creative über die Google Publisher Tags an:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Google Ad Manager - Passback Main</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>
<body>

</body>
</html>

Im Body kann dann auch auf ein iFrame verwiesen werden, wo dann das Passback Tag später implementiert wird:

<iframe id="psb" src="passback-bsp.html" style="height: 250px; width: 300px;"></iframe>>

Wie das Passback Tag im Detail implementiert wird, hängt stark von den Möglichkeiten des Drittanbieter-Servers ab. Unter Schritt 7 bei “Use Case” hatte ich dazu folgendes genannt: “Der Ad Server des Drittanbieters schickt dann ein Signal an den Browser (das Passback Tag direkt oder ein “Signal”), dass keine Ad ausgeliefert werden kann.”.

Eine Möglichkeit ist es also, dass der Ad Server des Drittanbieters direkt das Passback Tag zurückliefert. Dazu muss das Passback Tag auch dort getraffickt werden. Die andere Möglichkeit ist es, dass der Reponse des Drittanbieter-Servers nur ein “Signal” sendet, dass keine Ad ausgeliefert werden konnte. Im Anschluss fügt der Browser das Passback Tag ins DOM, welcher dann eine Fallback-Ad anfordert. Bitte beachte, dass es hier verschiedene, weitere Möglichkeiten gibt. Für die zwei erwähnten, zeige ich nachfolgend wie eine technische Implementierung aussehen könnte, damit du eine Idee davon bekommst.

Passback Tag wird vom Ad Server des Drittanbieters zurückliefert
Wenn das Passback Tag in einem iFrame auf Publisher-Seite gerendert werden soll, reicht es nicht das Passback Tag wie oben unter “Code-Beispiel” gezeigt einfach zu trafficken. Man muss noch etwas JavaScript-Logik mitgeben, damit man auf dem im HTML erstellten iFrame verweist und es genau dort hinzufügt. Hier ein einfaches Beispiel:

var ifr = document.getElementById('psb').contentWindow;

var passback = `<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"><\/script>
  <div id="gpt-passback">
    <script>
      window.googletag = window.googletag || {cmd: []};
      googletag.cmd.push(function() {
      googletag.defineSlot('/6355419/Travel/Europe', [300, 250], 'gpt-passback').addService(googletag.pubads());
      googletag.enableServices();
      googletag.display('gpt-passback');
      });
    <\/script>
  <\/div>`
    
    ifr.document.write(passback);

Das iFrame wird mittels der Methode “getElementById” und über die iFrame-ID “psb” geholt und anschließend wird es über die document.write Methode in das HTML gerendert. Dies hat jedoch 2 Nachteile:

  • Das iFrame muss vorher schon im HTML definiert und mit einer festen Größe versehen werden. Das führt dazu, dass es einen fixen Platz einnimmt, auch wenn es nicht zum Einsatz kommt (wenn z.B. beim initialen Request schon eine Ad ausgeliefert wird).
  • Die fix gesetzten Größen zu entfernen, würde den fix eingenommenen Platz auf den Screen beseitigen, man kann dann jedoch Probleme mit dem CLS bekommen.

Daher macht es Sinn das iFrame dynamisch zu rendern und diese Logik inkl. dem Google Publisher Passback-Tag auf dem Ad Server des Drittanbieters zu trafficken. Hier ein Beispiel:

var passback = `<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"><\/script>
  <div id="gpt-passback">
    <script>
      window.googletag = window.googletag || {cmd: []};
      googletag.cmd.push(function() {
      googletag.defineSlot('/6355419/Travel/Europe', [300, 250], 'gpt-passback').addService(googletag.pubads());
      googletag.enableServices();
      googletag.display('gpt-passback');
      });
    <\/script>
  <\/div>`

var iframe = document.createElement('iframe');
document.getElementById("banner-ad").appendChild(iframe);
iframe.setAttribute("style","height:100%;width:100%;display:block;");
iframe.setAttribute("scrolling","no");
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(passbackTag);
iframe.contentWindow.document.close();

Einige Anmerkungen dazu:

  • In der passback-Variable ist das Google Publisher Tag deklariert.
  • Wichtig ist, dass das iFrame eine Höhe und Breite von je 100% bekommen, damit es die fix definierten Div-Größen von 300×250 Pixel füllt.
  • Ebenfalls ist “display:block” wichtig, um eventuelle White Spaces zwischen Div und iFrame zu beseitigen.
  • Mittels “scrolling=no” verhindert man, dass das iFrame eine Scrollbar bekommt (was man in der Regel nicht haben möchte).

Wenn also das Drittanbieter-Creative mit dem Code keine Ad vom Ad Server bekommt, dann sollte der Drittanbieter-Server diesen Code zurückliefern, damit im Browser wieder ein Request zum Google Ad Manager des Publishers gehen kann, damit der Anzeigenblock mit einem Fallback befüllt wird. Falls du beim Testen feststellst, dass im iFrame selbst ein White Space vorhanden ist und es die Anzeige darin verschiebt (was oft vorkommen kann), dann solltest du alle möglichen Abstände eliminieren. Oft reicht es bspw., dass man in der passback-Variable (was im Grunde das HTML für den iFrame darstellt) nochmal explizit das Body-Tag mitgibt und dabei die Abstände auf 0 setzt. Hier der angepasste Code von oben:

var passbackTag = `<head><script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"><\/script><\/head><body style="margin:0;padding:0">
  <div id="gpt-passback">
    <script>
      window.googletag = window.googletag || {cmd: []};
      googletag.cmd.push(function() {
      googletag.defineSlot('/6355419/Travel/Europe', [300, 250], 'gpt-passback').addService(googletag.pubads());
      googletag.enableServices();
      googletag.display('gpt-passback');
      });
    <\/script>
  <\/div><\/body>`;
    
var iframe = document.createElement('iframe');
document.getElementById("banner-ad").appendChild(iframe);
iframe.setAttribute("style","height:100%;width:100%;display:block;");
iframe.setAttribute("scrolling","no");
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(passbackTag);
iframe.contentWindow.document.close();

Ad Server des Drittanbieters sendet Signal
Die andere Möglichkeit hängt vom Drittanbieter-Code ab. Manche Drittanbieter-Tags bieten die Möglichkeit eine Callback-Funktion auszuführen, falls keine Anzeige ausgeliefert werden kann. Die aufgerufene Callback-Funktion sollte dann die Logik für das Rendern und Ausführen des Google Publisher Passback-Tags bereitstellen. Auch hier folgt ein einfaches Beispiel, welches für den Eigenbedarf adaptiert werden muss.

Beim Trafficking des Drittanbieter-Creatives im Google Ad Manager wird man feststellen, dass einige Advertiser neben dem Tag auch ein Window-Objekt erstellen. Zum Beispiel hier fiktiv:

<script>
window.advertiserObject = window.advertiserObject  || [];
window.advertiserObject.push({
   ad_unit_id: '123456',
   callbacks: {
   no_ad_delivered: noAdCallback
}
});
</script>
<script type="text/javascript" src="https://tag.eines-advertisers.com/tag.js"></script>

Wie man sehen kann existiert innerhalb des callbacks-Objekts eine Property namens “no_ad_delivered”, die eine Callback-Funktion aufruft. Diese wird dann aufgerufen, falls der Drittanbieter-Server keine Anzeige zurückliefern kann. Um den Aufruf der Funktion kümmert sich dann meist in der Regel das entsprechende Tag – in unserem Beispiel das von https://tag.eines-advertisers.com/tag.js geladene. Auf Publisher-Seite muss nur sichergestellt werden, dass so eine Funktion existiert und die Logik dann bereithält. Wird das iFrame wie oben dynamisch generiert, reicht es den Code von oben innerhalb der Callback-Funktion zu platzieren:

function noAdCallback() {
 var passbackTag = `<head><script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"><\/script><\/head><body style="margin:0;padding:0">
   <div id="gpt-passback">
     <script>
       window.googletag = window.googletag || {cmd: []};
       googletag.cmd.push(function() {
       googletag.defineSlot('/6355419/Travel/Europe', [300, 250], 'gpt-passback').addService(googletag.pubads());
       googletag.enableServices();
       googletag.display('gpt-passback');
       });
     <\/script>
   <\/div><\/body>`;
    
 var iframe = document.createElement('iframe');
 document.getElementById("banner-ad").appendChild(iframe);
 iframe.setAttribute("style","height:100%;width:100%;display:block;");
 iframe.setAttribute("scrolling","no");
 iframe.contentWindow.document.open();
 iframe.contentWindow.document.write(passbackTag);
 iframe.contentWindow.document.close();
}

Sobald die Funktion dann aufgerufen wird, fordert das Passback Tag das Fallback-Creative an. Alternativ, falls du ein fixes iFrame für den Passback reserviert hast, wie hier…:

<iframe id="psb" src="passback-bsp.html" style="height: 250px; width: 300px;"></iframe>

…musst du sicherstellen, dass iFrame und Parent miteinander kommunizieren. Auf der Hauptseite, kannst du dann den Aufruf der Callback-Funktion an den iFrame weitergeben. Hier ein Beispiel:

function noAdCallback() {

 document.getElementById('psb').contentWindow.postMessage('callPassback', '*');

}

Über die postMessage-Methode wird dem iframe lediglich mitgeteilt, dass das Passback Tag im iFrame gerendert werden kann. Im iFrame selbst gibt es a) das Passback-Tag und b) einen Event-Listener, der die Nachricht annimmt und darauf basierend das Passback Tag rendert. Hier ein Beispiel, wie das im iFrame aussehen kann:

<script>
  function callPassback() {
     var passback = `<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"><\/script>
  <div id="gpt-passback">
    <script>
      window.googletag = window.googletag || {cmd: []};
      googletag.cmd.push(function() {
      googletag.defineSlot('/6355419/Travel/Europe', [300, 250], 'gpt-passback').addService(googletag.pubads());
      googletag.enableServices();
      googletag.display('gpt-passback');
      });
    <\/script>
  <\/div>`
    document.write(passback);
  }  

   window.addEventListener("message", (event) => {
    if(event.data == 'callPassback') {
      callPassback();
    }
}, false);
</script>

URL des Parents mitgeben

Beim Setzen eines statischen iFrames wird in der Regel die URL des iFrames und nicht des Parents mitgegeben. Die wichtigen Kontextinformationen sind jedoch im Parent vorhanden. Damit der Google Ad Manager die richtige URL mit den entsprechenden Kontextinformationen bekommt, sollte man im Passback Tag die URL selbst setzen. Das geschieht über das page_url-Attribut:

googletag.pubads().set('page_url', 'URL');

Last modified: 24. Januar 2023