Geschrieben von

Google Ad Manager: Responsive Anzeigen ausliefern

MarTech

Bei der Definition von Anzeigenflächen bzw. Ad-Slots über die Google Publisher Tags (GPT) wird auch standardmäßig die Anzeigengröße (oder mehrere Anzeigengrößen) mitgegeben. Im ausgehenden Request werden diese dann über den Parameter “prev_iu_szs” an den Ad-Server übergeben. Mit dieser Information weiß dann der Google Ad Manager wie groß die Anzeigenfläche ist und kann das Creative mit den passenden Größe wieder zurückspielen. Über das Google Publisher Tag können aber nicht nur fixe Anzeigengrößen mitgegeben werden. GPT ist da flexibler. Es können auch mehrere fixe Größen mitgegeben werden, oder auch über eine entsprechende Methode responsive Größen. Über letzteres ist der Google Ad Manager in der Lage immer die richtige Größe, die auf den Browser und das Endgerät des Nutzers abgestimmt sind, auszuliefern. GPT sendet dabei den Viewport des Nutzers über die Parameter “biw” (Breite) und “bih” (Höhe). über die dann die richtige Anzeige zurückgespielt werden kann. Wie man responsive Anzeigengrößen im Google Publisher Tag definieren kann, zeige ich in diesem Artikel. Als Einleitung zeige ich kurz wie man fixe Größen setzt, da auf dieser Basis auch responsive Größe gesetzt werden.

Fixe Anzeigengrößen setzen

Wenn man einen Ad-Slot für eine fixe Größe reservieren möchte, dann geschieht das in der Regel über den folgenden Funktionsaufruf:

googletag.defineSlot('/6355419/Travel/Europe/France/Paris', [300, 250], 'banner-ad')
         .addService(googletag.pubads());

Hier wird ein Ad-Slot in der Größe 300×250 reserviert. Für die Darstellung wird dann die display()-Methode im dafür vorgesehenen div-Container verwendet:

googletag.cmd.push(function() {
  googletag.display('banner-ad');
});

Mehrere fixe Anzeigengrößen setzen

Um nicht nur eine Anzeigengröße – wie ich vorherigen Beispiel – zu definieren, sondern gleich mehrere fixe Ad-Slots, müssen die Größenangaben in einem mehrdimensionalen Array mitgegeben werden. Hier ein Beispiel:

googletag.defineSlot('/6355419/Travel/Europe/France/Paris', [[728, 90], [750, 200]], 'banner-ad')
         .addService(googletag.pubads());

Darüber wird entweder eine 728×90- oder 750×200-große Anzeige zurück geliefert. Auf dieser Basis können nun responsive Anzeigengrößen definiert werden.

Responsive Anzeigengrößen setzen

Das vorherige Beispiel erweitere ich nun um eine weitere Anzeigengröße, um damit 4 fixe Anzeigengrößen zu setzen:

googletag.defineSlot('/6355419/Travel/Europe/France/Paris', [[750, 200], [728, 90], [300, 250], [100, 100]], 'banner-ad')
         .addService(googletag.pubads());

Über die display()-Methode wird nun entweder ein 750×200-, 728×90-, 300×250- oder 100×100-großes Creative zurückgegeben. GPT erlaubt es nun auf dieser Basis zu bestimmen, welche Größe abhängig vom Viewport des verwendeten Browsers des Nutzers ausgeliefert werden soll. Dazu muss auf dem Ad-Slot die defineSizeMapping()-Methode aufgerufen werden. Dieser Methode muss auch ein Parameter mit den Größen-Zuordnungen je Viewport mit übergeben werden:

googletag.defineSlot('/6355419/Travel/Europe/France/Paris', [[750, 200], [728, 90], [300, 250], [100, 100]], 'banner-ad')
         .addService(googletag.pubads())
         .defineSizeMapping(mapping);

Der Parameter “mapping” muss eine Liste der Größen-Zuordnungen sein. Der genaue Typ lautet “SizeMappingArray”. Das Array enthält weiter einzelne Arrays vom Typ “SizeMapping[]”. Diese werden mittels der Methode addSize() zum SiteMappingArray hinzugefügt. SizeMapping[] muss wiederum dem Typ “[SingleSizeArray, GeneralSize]” folgen. Heißt:

  • Das SingleSizeArray ist ein Array mit zwei Zahlen, die Breite und Höhe des Viewports darstellen – also vom Typ [number, number].
  • GeneralSize ist dann die Größenkonfiguration für die Anzeigenfläche. Dieses Array kann eine oder mehrere Größen enthalten.

SizeMappingArray hat also folgendes Format:

[ // SizeMappingArray 
  [ // SizeMapping[]
    [viewport-width, viewport-height], // SingleSizeArray
    [[ad-width, ad-height], [ad-width, ad-height], ...] // GeneralSize
  ] // SizeMapping[] 
] // SizeMappingArray 

Die einfachste Möglichkeit das notwendige Array zu erstellen ist es die von GPT zur Verfügung gestellte Methode sizeMapping() zu nutzen, die den SizeMappingBuilder zurückgibt. Dieser besitzt 2 Methoden:

  • addSize: Fügt zwei Arrays hinzu. Zuerst ein Array mit der Viewport-Größe als SingleSizeArray und dann ein Array mit den Slot-Größen vom Typ GeneralSize.
  • build: Diese Methode erstellt dann die Größen, die den Builder hinzugefügt worden sind. Dabei werden die konfigurierten Größen letztendlich der defineSizeMapping-Methode übergeben.

Praktisch heißt das nun, dass wir den übergebenen Parameter “mapping” als Variable zunächst definieren müssen und dabei die sizeMapping()-Methode aufrufen, um den SizeMappingBuilder zu initialisieren:

var mapping = googletag.sizeMapping();

googletag.defineSlot('/6355419/Travel/Europe/France/Paris', [[750, 200], [728, 90], [300, 250], [100, 100]], 'banner-ad')
         .addService(googletag.pubads())
         .defineSizeMapping(mapping);

Mit der addSize()-Methode können nun die Viewport-Konfigurationen hinzugefügt werden. Im Grunde setzen wir zunächst die gewünschten Viewports in das SingleSizeArray:

var mapping = googletag.sizeMapping()
                       .addSize([1024, 768])
                       .addSize([640, 480])
                       .addSize([320, 240])
                       .build();

googletag.defineSlot('/6355419/Travel/Europe/France/Paris', [[750, 200], [728, 90], [300, 250], [100, 100]], 'banner-ad')
         .addService(googletag.pubads())
         .defineSizeMapping(mapping);

Die build()-Methode darf am Ende nicht vergessen werden. Im nächsten Schritt müssen noch die Größen, die initial über die defineSlot()-Methode definiert werden, auf die einzelnen Viewport-Größen verteilt werden, da ansonsten der Code nicht funktionieren würde:

var mapping = googletag.sizeMapping()
                       .addSize([1024, 768], [[750, 200], [728, 90]])
                       .addSize([640, 480], [300, 250])
                       .addSize([320, 240], [100, 100])
                       .build();

googletag.defineSlot('/6355419/Travel/Europe/France/Paris', [[750, 200], [728, 90], [300, 250], [100, 100]], 'banner-ad')
         .addService(googletag.pubads())
         .defineSizeMapping(mapping);

Wie man sehen kann haben wir folgendes Setup:

  • Wenn der Viewport größer oder gleich 1024×768 ist, dann wird eine Anzeige der Größe 750×200 oder 728×90 angefragt.
  • Wenn der Viewport kleiner als 1024×768 ist, aber größer oder gleich 640×480, dann wird eine Anzeige der Größe 300×250 angefragt.
  • Wenn der Viewport kleiner als 640×480 ist, aber größer oder gleich 320×240, dann wird eine Anzeige der Größe 100×100 angefragt.

Man kann nun auch final mitgeben, dass wenn der Viewport kleiner als 320×240 ist, dann soll keine Ad angefragt werden:

var mapping = googletag.sizeMapping()
                       .addSize([1024, 768], [[750, 200], [728, 90]])
                       .addSize([640, 480], [300, 250])
                       .addSize([320, 240], [100, 100])
                       .addSize([0, 0], [])
                       .build();

googletag.defineSlot('/6355419/Travel/Europe/France/Paris', [[750, 200], [728, 90], [300, 250], [100, 100]], 'banner-ad')
         .addService(googletag.pubads())
         .defineSizeMapping(mapping);

Über die build()-Methode des SizeMappingBuilders wird nun im Hintergrund von GPT folgendes Array gebaut und der defineSizeMapping()-Methode übergeben:

[
  [[1024, 768], [[750, 200], [728, 90]]],
  [[640, 480], [[300, 250]]],
  [[320, 240], [[100, 100]]],
  [[0, 0], []]
]

Nun kann man das Setup relativ einfach testen. Dazu muss man im Hinterkopf behalten wie die Google Publisher Tags bestimmen, welche Viewport-Angabe Vorrang hat. Dabei gilt:

  • Die Reihenfolge der Größen im Array ist auch zugleich die Priorität. In unserem Beispiel hat der Viewport 1024×768 die höchste Prio.
  • Geht es um Width- und Height-Angaben – also 1024×768 – dann prüft GPT zuerst die Breite, dann die Höhe und holt sich dann die größtmögliche Ad.

Testen kann man es indem man die Fenstergröße des Browser verschiebt und einen Pagereload durchführt. Über die Befehle…

window.innerWidth // Viewport-Breite ausgehen
window.innerHeight // Viewport-Höhe ausgeben

..kann man sich dabei in der Console immer gleich die Breite und Höhe des Viewports anzeigen lassen, um es dann mit der entsprechenden Anzeige abzugleichen. Zunächst der erste Test:

Wie man sehen kann wird bei einer Viewport-Width von über 1280×768 entweder eine 750×200- oder 728×90-große Anzeige ausgespielt. Der nächste Viewport-Bereich wäre zwischen 1024×768 und 640×480, wo eine Ad der Größe 300×250 ausgespielt werden müsste:

Dann folgt der nächste Viewport-Bereich zwischen 640×480 und 320×240, wo eine Ad der Größe 100×100 zurück geliefert wird:

Unter 320 Breite oder 240 Höhe, darf dann nichts ausgespielt werden:

Responsive Anzeigen ohne Mapping-Methode

Wie anfangs geschrieben schickt das GPT-Tag über die Parameter “biw” und “bih” den Viewport des Nutzers mit und kann darüber zusammen mit der Mapping-Methode den Abgleich machen sowie die korrekte responsive Anzeige ausliefern. Wenn man sich jedoch nicht auf diese Logik verlassen bzw. wenn man das Verhalten client-seitig selbst steuern möchte, dann lässt sich das auch über andere (Nicht-GPT-)Methoden umsetzen. Hierzu kann die matchMedia()-Methode genutzt werden. Diese Methode gibt ein MediaQueryList-Objekt zurück inkl. der Property “matches”, die Informationen darüber enthält, ob der übergebene Wert in der matchMedia()-Methode mit dem Viewport des Nutzer übereinstimmt.

Um z.B. die passende Anzeigengröße für einen Viewport auf Basis der Höhe zwischen 320 Pixel und 639 Pixel (also noch unter 640 Pixel) auszuliefern, könnte man die matchMedia()-Methode wie folgt einsetzen:

if (window.matchMedia("(min-height: 320px)").matches && window.matchMedia("(max-height: 639px)").matches) {
  googletag.defineSlot('/6355419/Travel/Europe', [100, 100], 'banner-ad')
           .addService(googletag.pubads())
}

Damit GPT keine Fehlermeldung für alle anderen Viewport-Höhen zurückgibt, braucht es für alle anderen Viewports, die nicht über einen if-Bedingung abgefangen werden einen Fallback wie z.B. hier:

if (window.matchMedia("(min-height: 320px)").matches && window.matchMedia("(max-height: 639px)").matches) {
  googletag.defineSlot('/6355419/Travel/Europe', [100, 100], 'banner-ad')
           .addService(googletag.pubads())
} else {
  googletag.defineSlot('/6355419/Travel/Europe', [], 'banner-ad')
           .addService(googletag.pubads())
}

Last modified: 27. Januar 2023