Anzeigengrößen

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:

  1. Anzeigenantwort wurde empfangen.
  2. Creative-Inhalte werden in einen iFrame geschrieben, wobei die anfängliche Höhe auf 0px und die Breite auf 100% festgelegt ist.
  3. 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öße 750x200 oder 728x90 ausgeliefert werden.
  • Wenn 1024x768 > Darstellungsbereich >= 640x480 ist, können Anzeigen mit der Größe 300x250 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], []]
]