Anzeigengrößen

Für jede von Ihnen definierte Anzeigenfläche müssen die für die Auslieferung infrage kommenden Anzeigengrößen angegeben werden. Slot. Wie Anzeigengrößen angegeben werden, hängt von der Art der Anzeigen ab. angezeigt werden, sowie die Größe und Flexibilität der Anzeigenflächen selbst.

In einigen Fällen kann die Anzeigengröße auf Werbebuchungsebene Google Ad Manager. Weitere Informationen finden Sie in der Hilfe. mehr.

Den vollständigen Code für die Beispiele in diesem Leitfaden finden Sie auf der Seite Größ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 mit der Größe 300x250 ausgeliefert.

Wichtiger Hinweis: Wenn Sie mit Anzeigen mit fester Größe arbeiten, empfehlen wir Ihnen dringend, Größe des <div>-Elements definieren, in dem das Creative gerendert wird Seit werden Creatives häufig asynchron gerendert, sodass andere Elemente die Seite verschieben, wenn nicht genügend Platz für sie reserviert ist.

Anzeigen mit mehreren Größen

Wenn eine Anzeige mehrere Größen unterstützt, stellen Sie eine Liste der unterstützten Größen bereit, wenn Definition der Anzeigenfläche.

googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [[300, 250], [728, 90], [750, 200], "fluid"],
    "multi-size-ad",
  )
  .addService(googletag.pubads());

In diesem Beispiel können Creatives mit den Größen 300x250, 728x90 und 750x200 ausgeliefert wird. In Ad Manager werden nur Creatives berücksichtigt, die diesen Größen entsprechen bei der Anzeigenauswahl.

Wenn für die Anzeigenfläche <div> in CSS keine Abmessungen angegeben sind, GPT legt die Abmessungen automatisch auf die kürzeste die angegebene Höhe und die breiteste angegebene Breite über 1 px, wenn display() aufgerufen wird. In diesem Fall wäre das 750x90. Diese Größe kann jedoch auftreten, andere Inhalte auf der Seite geladen wurden, wodurch sich diese Inhalte verschieben. Um dies zu vermeiden Layout Shifts, reservieren Sie den Platz mit CSS, wie in den Leitfaden zum Minimieren von Layoutverschiebungen.

Wenn Sie mit Anzeigen in mehreren Größen arbeiten, achten Sie darauf, dass Ihr Layout flexibel genug ist, unterstützen Anzeigen mit der angegebenen größten Größe. Dadurch wird verhindert, dass Creatives unbeabsichtigt zugeschnitten.

Flüssige Anzeigen

Flexible Anzeigen haben keine feste Größe, sondern passen sich dem Creative-Content an, den sie Display. Native Anzeigen sind derzeit die einzige flexible Anzeige Typ, der von Ad Manager unterstützt wird.

Wenn Sie mit flexiblen Anzeigen arbeiten, kann eine benutzerdefinierte Größe für fluid 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 passen Sie die Höhe an den Creative-Inhalt an. Die Schritte für GPT sind folgende Schritte zur Größenanpassung der Anzeigenfläche erforderlich:

  1. Die Anzeigenantwort ist eingegangen.
  2. Creative-Inhalte werden in einen iFrame geschrieben, wobei die anfängliche Höhe auf 0px festgelegt ist. und Breite auf 100% festgelegt.
  3. Sobald alle Ressourcen im iFrame vollständig geladen sind, wird das Creative erstellt. sichtbar ist, indem die Höhe des iFrames der Höhe des <body>-Element des iFrames.
<ph type="x-smartling-placeholder">

Responsive Anzeigen

Responsive Anzeigen sind Anzeigen mit mehreren Größen basierend auf der Größe des Darstellungsbereichs des Browsers, in dem die Mit dieser Funktion lässt sich die Größe der ausgelieferten Creatives steuern, auf verschiedenen Gerätetypen (Desktop, Tablet, Smartphone usw.).

Dazu wird eine Zuordnung zwischen Größe des Darstellungsbereichs und Anzeigengröße festgelegt, und verknüpfen diese Zuordnung mit einer Anzeigenfläche.

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 ein Darstellungsbereich größer als 1024x768, können Anzeigen mit der Größe 750x200 oder 728x90 ausgeliefert werden.
  • Wenn 1024x768 > Darstellungsbereich größer als 640x480 ist, können Anzeigen mit der Größe 300x250 ausgeliefert werden.
  • Wenn Darstellungsbereich < 640x480, es können keine Anzeigen ausgeliefert werden.

GPT erkennt die Größe des Darstellungsbereichs des Browsers, die größte passende Zuordnung. Um den größten Bei der GPT-Zuordnung werden zuerst die Breite und dann die Höhe berücksichtigt (d.h. [100, 10] > [10, 100]). Im Fall eines Fehlers bei der Zuordnung oder wenn der Darstellungsbereich Die Größe kann nicht bestimmt werden. Die in defineSlot() angegebenen Größen werden verwendet.

Die Zuordnung wird dann durch Aufrufen der Methode Slot.defineSizeMapping(). Diese Methode akzeptiert ein Array mit 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 Größen des Darstellungsbereichs innerhalb dieses Arrays bestimmt ihre Priorität. Die SizeMappingBuilder verwendet im Das Beispiel oben ist eine bequeme Möglichkeit, in diesem Format, wobei die Größen automatisch von groß zum kleinsten sortiert werden. Dabei Beispiel: Die Ausgabe SizeMappingBuilder.build() ist:

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