Die Angabe von Anzeigengrößen mit den Google Publisher Tags sind einer der wichtigsten Tagging-Konfigurationen. Die Größenangaben werden dazu genutzt, die definierte Anzeigenfläche mit der richtigen Anzeige zu befüllen und darüber hinaus sind die Anzeigengrößen für das Targeting relevant. Beim Tagging gibt es jedoch verschiedene Aspekte zu beachten – Hintergrund sind die verschiedenen Größen-Typen, die immer einem bestimmten Schema folgen. Dabei handelt es sich im Grunde um TypeScript-Tupel, also einer Art vordefinierter Arrays. In diesem Beitrag gehe ich auf die verschiedenen Größen-Typen ein und gebe eine Übersicht wie diese funktionieren und eingesetzt werden können. Folgende Themen werde ich behandeln:
- In welchen GPT-Methoden werden Größenangaben genutzt?
- Beschreibung der verschiedenen Größen-Typen
- Größen-Typen für das Size Mapping
Größenangaben in Methoden
Es gibt verschiedene Methoden aus der Google Publisher Tags-Bibliothek, die Größen-Typen übergeben. Die wichtigste ist die defineSlot-Methode, die eine Anzeigenfläche erstellt. Unter anderem wird dabei die Anzeigenblockgröße mitgegeben. Ein Beispiel:
googletag.defineSlot('/1234567/Sports', [728, 90], 'div-1');
Die Syntax lautet dabei:
defineSlot(adUnitPath, size, div);
Wie man sehen kann ist der zweite Parameter eine Größenangabe. Der Typ dabei lautet “GeneralSize” (dazu später mehr). Die verschiedenen Größen-Typen werden zudem beim Size Mapping für responsive Anzeigen genutzt (siehe dazu auch mein Artikel “Google Ad Manager: Responsive Anzeigen ausliefern”). Zu Size Mapping komme ich auch später zurück.
Größen-Typen erklärt
Grundsätzlich gibt es zunächst 2 Größen-Typen für die Google Publisher Tags:
Das “SingleSizeArray” ist ein Tupel, welches zwei Zahlen beinhalten kann und hat folgendes Format:
[number, number]
Die erste Zahl stellt die Breite des Ad Slots dar (also “width”), während die zweite Zahl die Höhe (“height”) darstellt. Wie im obigen Beispiel mit der defineSlot-Methode zu sehen ist, haben wir bspw. ein Ad Slot mit 728 Pixel Breite und 90 Pixel Höhe definiert:
googletag.defineSlot('/1234567/Sports', [728, 90], 'div-1');
Die Angabe “[728, 90]” entspricht dem Typ “[number, number]”. Beim Typ “NamedSize” handelt es sich um eine Größe für flexible Anzeigen. Eingesetzt wird NamedSize für native Anzeigen. Dabei nimmt der Ad Slot 100 % der Breite des übergeordneten div-Elements an. Hierbei sind 2 Werte zulässig:
"fluid" // 1. Möglichkeit ["fluid"] // 2. Möglichkeit
Der Wert wird also entweder als String oder als String in einem Array angegeben. Ein konkretes Beispiel wäre:
.defineSlot('/1234567/Sports', ['fluid'], 'native-ad');
Auch wenn es zunächst nur diese zwei Größen-Typen gibt, existieren weitere Kombinationen und Verweise darauf, die wiederum weitere Typen hervorbringen. Wenn wir an dieser Stelle zunächst einmal von den zwei Size Mapping-Typen absehen (dazu später mehr), stehen uns folgende Typen zur Verfügung:
- GeneralSize
- SingleSize
- MultiSize
- SingleSizeArray
- NamedSize
Die zwei letzteren habe ich soeben erläutert. Diese zwei Typen sind diejenigen, die letztenendes auch die Werte für Width und Height bereitstellen. Dennoch, auf der ersten Ebene steht zunächst “GeneralSize”. Schaut man sich die Syntax der defineSlot-Methode an, dann wird folgendes ersichtlich:
defineSlot(adUnitPath: string, size: GeneralSize, div?: string): Slot | null
Wir sehen zunächst einmal den Verweis auf den Typ “GeneralSize” als zweiten Funktionsparameter. Hinter diesem Typen verbirgt sich wiederum ein Union:
SingleSize | MultiSize
Sprich, entweder kann “GeneralSize” den Typ “SingleSize” oder “MultiSize” annehmen. Bei “SingleSize” handelt es sich wiederum um ein Union, welches entweder den Typ “SingleSizeArray” oder “NamedSize” annehmen kann. Damit wären wir wieder bei den zwei initial beschriebenen Typen, die dann auch die tatsächlichen Werte beinhalten. “MultiSize” auf der anderen Seite ist ein Array, welches den Typen “SingleSize” enthält. Das heißt, dass MultiSize min. einen (aber auch mehrere) “SingleSize”-Typen enthalten kann. Dadurch ergeben sich verschiedene Verweise und Möglichkeiten, die ich hier versucht hab visuell aufzubereiten:
Größen-Typen für das Size Mapping
Die soeben gezeigte Grafik ist jedoch nicht vollständig, wenn es um die verschiedenen Größen-Typen geht. Wenn das Size Mapping noch mit ins Spiel kommt, dann haben wir noch die Typen “SizeMappingArray” und “SizeMapping”:
- SizeMappingArray: Dies ist eine Liste an Größenzuordnungen vom Typ “SizeMapping”.
- SizeMapping: Das ist dann wiederum ein Array, welches den Typ “[SingleSizeArray, GeneralSize]” aufweist. Also dann wieder ein Verweis zu anderen Typen.
Schauen wir uns “SizeMapping” einmal an:
[SingleSizeArray, GeneralSize]
“SingleSizeArray” könnten wir nun direkt mit dem entsprechenden Typ ersetzen:
[[1024, 768], GeneralSize]
Von “GeneralSize” wissen wir, dass es entweder der Typ “SingleSize” oder “MultiSize” sein kann. Würden wir uns für “SingleSize” entscheiden, dann hätten wir es mit “SingleSizeArray” oder “NamedSize” zu tun. Heißt:
[[1024, 768], [750, 200]] // Mit SingleSizeArray [[1024, 768], ["fluid"]] // Mit NamedSize
Wählen wir stattdessen “MultiSize” als zweite Angabe, dann wissen wir, dass “MultiSize” eine Liste von SingleSize-Typen ist. Dann hätten wir folgende Angabe:
[[1024, 768], [[750, 200], [728, 90]]]
Der Typ “SizeMappingArray” wäre dann einfach eine Liste dieser Angaben, wie z.B. hier:
[ // Start SizeMappingArray [[1024, 768], [[750, 200], [728, 90]]], // Erstes SizeMapping [[1024, 768], [[750, 200], [728, 90]]] // Zweites SizeMapping ] // Ende SizeMappingArray
Als erweiterte Grafik würde die Verweis-Logik wie folgt aussehen:
