Für jede Anzeigenfläche, die Sie definieren, müssen die Anzeigengrößen angegeben werden, die in dieser Anzeigenfläche ausgeliefert werden dürfen. Wie Anzeigengrößen festgelegt werden, hängt vom Typ der anzuzeigenden Anzeigen sowie von der Größe und Flexibilität der Anzeigenflächen selbst ab.
In einigen Fällen kann die Anzeigengröße in Google Ad Manager auf Werbebuchungsebene überschrieben werden. Weitere Informationen finden Sie in der Hilfe.
Den vollständigen Code für die Beispiele in diesem Leitfaden finden Sie auf der Beispielseite für Anzeigengrößen.
Anzeigen mit fester Größe
Sie können eine Anzeigenfläche mit einer einzelnen festen Größe definieren.
googletag
.defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "fixed-size-ad")
.addService(googletag.pubads());
In diesem Beispiel werden nur Creatives der Größe 300x250
ausgeliefert.
Wichtig: Wenn Sie mit Anzeigen mit fester Größe arbeiten, sollten Sie unbedingt die Größe des <div>
-Elements definieren, in dem das Creative gerendert wird. Da Creatives häufig asynchron gerendert werden, können andere Elemente auf der Seite verschoben werden, wenn nicht genügend Platz für sie reserviert ist.
Anzeigen in mehreren Größen
Wenn für eine Anzeige mehrere Größen unterstützt werden, geben Sie beim Definieren der Anzeigenfläche eine Liste der unterstützten Größen an.
googletag
.defineSlot(
"/6355419/Travel/Europe",
[
[300, 250],
[728, 90],
[750, 200],
],
"multi-size-ad",
)
.addService(googletag.pubads());
In diesem Beispiel können Creatives in den Größen 300x250
, 728x90
und 750x200
ausgeliefert werden. In Ad Manager werden bei der Anzeigenauswahl nur Creatives berücksichtigt, die diesen Größen entsprechen.
Wenn in CSS keine Abmessungen für die Anzeigenfläche <div>
angegeben sind, legt GPT beim Aufruf von display()
automatisch die kürzeste deklarierte Höhe und die breiteste deklarierte Breite über 1 Pixel fest.
In diesem Fall wäre das 750x90
. Diese Größenanpassung kann jedoch erfolgen, nachdem andere Inhalte auf der Seite geladen wurden, wodurch sich der Inhalt verschiebt. Reservieren Sie Platz mit CSS, um Layoutverschiebungen zu vermeiden, wie in der Anleitung zum Minimieren von Layoutverschiebungen beschrieben.
Wenn Sie mit Anzeigen in mehreren Größen arbeiten, muss Ihr Layout flexibel genug sein, um eine Anzeige mit der größten angegebenen Größe zu unterstützen. So wird verhindert, dass Creatives versehentlich zugeschnitten werden.
Flexible Anzeigen
Flexible Anzeigen haben keine feste Größe, sondern passen sich an den jeweiligen Creative-Content an. Native Anzeigen sind derzeit der einzige flexible Anzeigentyp, der in Ad Manager unterstützt wird.
Wenn Sie mit flexiblen Anzeigen arbeiten, kann eine benutzerdefinierte fluid
-Größe angegeben werden.
googletag
.defineSlot("/6355419/Travel", ["fluid"], "native-ad")
.addService(googletag.pubads());
In diesem Beispiel hat die Anzeigenfläche die Breite des übergeordneten Containers und ihre Höhe wird an den Creative-Inhalt angepasst. Mit GPTs wird die Größe der Anzeigenfläche folgendermaßen angepasst:
- Anzeigenantwort wurde empfangen.
- Creative-Inhalte werden in einen iFrame geschrieben, wobei die anfängliche Höhe auf
0px
und die Breite auf100%
festgelegt ist. - Sobald alle Ressourcen im iFrame geladen wurden, wird das Creative sichtbar, indem die Höhe des iFrames der Höhe des iFrame-Elements
<body>
entspricht.
Responsive Anzeigen
Responsive Anzeigen eignen sich für Anzeigen in mehreren Größen und ermöglichen es Ihnen, die Größe der auszuliefernden Creatives basierend auf der Größe des Darstellungsbereichs des Browsers anzugeben, von dem die Anfrage gesendet wird. Mit dieser Funktion lässt sich die Größe von Creatives steuern, die auf verschiedenen Gerätetypen (Computer, Tablet, Smartphone usw.) ausgeliefert werden.
Dazu wird eine Zuordnung zwischen der Größe des Darstellungsbereichs und der Anzeigengröße definiert und diese Zuordnung dann einer Anzeigenfläche zugeordnet.
const responsiveAdSlot = googletag .defineSlot( "/6355419/Travel/Europe", [ [300, 250], [728, 90], [750, 200], ], "responsive-ad", ) .addService(googletag.pubads()); const mapping = googletag .sizeMapping() .addSize( [1024, 768], [ [750, 200], [728, 90], ], ) .addSize([640, 480], [300, 250]) .addSize([0, 0], []) .build(); responsiveAdSlot.defineSizeMapping(mapping);
In diesem Beispiel gibt die Zuordnung Folgendes an:
- Ist der Darstellungsbereich größer als
1024x768
, können Anzeigen mit der Größe750x200
oder728x90
ausgeliefert werden. - Wenn
1024x768
> Darstellungsbereich >=640x480
ist, können Anzeigen mit der Größe300x250
ausgeliefert werden. - Wenn der Darstellungsbereich kleiner als
640x480
ist, können keine Anzeigen ausgeliefert werden.
GPT erkennt die Größe des Darstellungsbereichs des Browsers, von dem die Anfrage gesendet wird, und verwendet die größte passende Zuordnung. Um die größte Zuordnung zu ermitteln, berücksichtigt GPT zuerst die Breite und dann die Höhe (d.h. [100,
10]
> [10, 100]
). Falls ein Fehler bei der Zuordnung auftritt oder die Größe des Darstellungsbereichs nicht ermittelt werden kann, werden die in defineSlot()
angegebenen Größen verwendet.
Die Zuordnung wird dann durch Aufrufen der Methode Slot.defineSizeMapping() einer Anzeigenfläche zugeordnet. Diese Methode akzeptiert ein Array von Zuordnungen im folgenden Format:
[ [ [viewport-width-1, viewport-height-1], [[ad-width-1, ad-height-1], [ad-width-2, ad-height-2], ...] ], [ [viewport-width-2, viewport-height-2], [[ad-width-3, ad-height-3], [ad-width-4, ad-height-4], ...] ], ... ]
Die Reihenfolge der Darstellungsbereichgrößen innerhalb dieses Arrays definiert ihre Priorität. Das
SizeMappingBuilder
im Beispiel oben verwendete
Beispiel oben ist eine bequeme Möglichkeit, ein Array
dieses Formats zu generieren, wobei die Größen automatisch vom größten zum kleinsten Wert sortiert werden. In diesem Beispiel sieht die Ausgabe von SizeMappingBuilder.build()
so aus:
[
[[1024, 768], [[750, 200], [728, 90]]],
[[640, 480], [[300, 250]]],
[[0, 0], []]
]