Responsive Anzeigen erstellen

Mit Google Publisher Tags (GPT) können Sie responsive Anzeigen erstellen, die auf den Browser abgestimmt sind, mit dem Nutzer Ihre Website aufrufen. Somit sehen Ihre Anzeigen immer gut aus, unabhängig davon, ob Ihre Besucher einen Computer, ein Tablet oder ein Smartphone verwenden.

Publisher University-Schulung zu diesem Thema ansehen

Mit der GPT API können Sie eine oder mehrere Größen als Größensatz für eine Anzeigenfläche festlegen. Darüber hinaus können Sie bei Verwendung der Funktion für responsive Anzeigen auch einen alternativen Größensatz auswählen, der sich an der Größe des Browsers orientiert. Zum Beispiel können Sie festlegen, dass bei Browsern ab einer Größe von 1.024 x 768 entweder Anzeigen im Format 970 x 90 oder 728 x 90 geschaltet werden sollen, während für kleinere Browser ausschließlich Anzeigen im Format 468 x 60 verwendet werden. Sie können auch unterschiedliche Größenkonfigurationen für Desktop-PCs, Tablets und Mobilgeräte festlegen.

Zuordnungen werden automatisch sortiert, sodass das jeweils passende Creative verwendet wird. Sie können eine Standardgröße für den Anzeigenblock festlegen, um eine Anzeige auszuliefern, die für alle Browsergrößen geeignet ist, falls keine der anderen Größen mit der Größe des Browsers Ihres Besuchers übereinstimmt.

Die Funktionen zur Tag-Kennzeichnung der responsiven Anzeigen für GPTs sind sowohl im asynchronen als auch im synchronen Modus nutzbar. Wir empfehlen, synchrone Anfragen nicht zu aktivieren, da sie zu Verzögerungen beim Laden des Seitencontents führen können. 

Bei Nutzern mit langsamen Verbindungen wie 2G kann das dynamische Einfügen externer Skripte über document.write() dazu führen, dass sich das Anzeigen des Contents der Hauptseite mehrere Sekunden verzögert. Dies ist ein weiterer Grund, warum wir die Verwendung asynchroner Tags statt eines synchronen Renderings empfehlen. Weitere Informationen zu den Problemen mit 2G und document.write()

Alle Angaben zur Größe des Browsers beziehen sich genau genommen auf die Größe des Darstellungsbereichs oder der Fläche, auf der der Content zu sehen ist. Browsersymbolleisten, Bildlaufleisten, Ränder und Ähnliches sind hierbei nicht berücksichtigt.

Browser- und Anzeigengrößen festlegen

Rufen Sie zunächst .sizeMapping auf, um die Anzeigengrößen den jeweiligen Browsergrößen zuzuordnen. Rufen Sie anschließend .defineSizeMapping auf, um die Zuordnung zu implementieren:

Die verfügbare Browsergröße ist kleiner als die tatsächliche Größe des Geräts. Ein iPad 2 ist beispielsweise 1.024 x 768 groß, für die Zuordnung von responsiven Anzeigen verwenden Sie allerdings die Browsergröße 980 x 690.

Sehen Sie sich in der Google Publisher Console auf dem Tab "Seitenanfrage" die Browsergröße für Ihr Gerät an.

var mapping = googletag.sizeMapping().
  addSize([1024, 768], [970, 250]).
  addSize([980, 690], [728, 90]).
  addSize([640, 480], [120, 60]).
  addSize([0, 0], [88, 31]).
  // Für Browser kleiner als 640 x 480
  build();
adSlot.defineSizeMapping(mapping);

Die erste Größe, die Sie für addSize angeben, ist die Browsergröße. Bei jeder weiteren Größe handelt es sich um eine Anzeigengröße. Beispiel: Der erste zuvor festgelegte Wert für addSize, [1.024, 768], ist die Browsergröße und [970, 250] die Anzeigengröße.

Das GPT erkennt die Größe des Browsers und verwendet die größte passende Zuordnung. Zur Bestimmung der größtmöglichen Zuordnung berücksichtigt GPT als Erstes die Breite und dann die Höhe, also [100, 10] > [10, 100]. Mit einer Browsergrößenzuordnung von [0, 0] können Sie eine Standardzuordnung festlegen, die für alle Browsergrößen verwendet werden kann.

Wenn Sie eine Anzeige festlegen möchten, die für alle Browsergrößen geeignet ist, ordnen Sie der Browsergröße [0, 0] eine Anzeigengröße zu.

Falls ein Fehler in der Zuordnung vorliegt oder die Browsergröße nicht ermittelt werden kann, werden die in .defineSlot angegebenen Größen verwendet.

Die Methode adslot.defineSizeMapping() erhält eine Abfolge von Zuordnungen in folgender Form: [ [ [ 1024, 768 ], [ [ 970, 250 ] ] ], [ [ 980, 690 ], [ [ 728, 90 ] ] ], ...], (grün – Browsergröße, rot – Größe der Anzeigenfläche). Sie sollten absteigend nach Priorität sortiert sein. Mit der Builder-Syntax können Sie die Zuordnungen mit automatischer Sortierung so festlegen, dass sie besser lesbar sind. Sie können jedoch auch eine andere Prioritätenhierarchie verwenden, indem Sie den Builder umgehen und die Zuordnungsfolge manuell erstellen.

Wenn Sie einige Anzeigen auf bestimmten Geräten ausliefern möchten, können Sie Anzeigen für bestimmte Browsergrößen unterdrücken, sodass diese nicht ausgeliefert werden.

// This mapping will only display ads when user is on desktop sized viewport
var mapping1 = googletag.sizeMapping().
  addSize([0, 0], []).
  addSize([1050, 200], [1024, 120]). // Desktop
  build();
 
// This mapping will only display ads when user is on mobile or tablet sized viewport
var mapping2 = googletag.sizeMapping().
  addSize([0, 0], []).
  addSize([320, 700], [300, 250]). // Tablet
  addSize([1050, 200], []). // Desktop
  build();
 
// GPT-Anzeigenflächen
 var gptAdSlots = [];
 
gptAdSlots[0] = googletag.defineSlot('/123/sample/firstAd', [1024, 120], 'ad-slot-1').
  defineSizeMapping(mapping1).
  setCollapseEmptyDiv(true).
  addService(googletag.pubads());
 
gptAdSlots[1] = googletag.defineSlot('/123/sample/secondAd', [300, 250], 'ad-slot-2').
  defineSizeMapping(mapping2).
  setCollapseEmptyDiv(true).
  addService(googletag.pubads());
 
// Anzeigenabruf starten
googletag.enableServices();

Sie können auch die Position der Anzeigen auf verschiedenen Geräten steuern, indem Sie Anzeigenflächen für alle möglichen Positionen erstellen und dann festlegen, dass bestimmte Anzeigenflächen nur für bestimmte Browserbereiche erscheinen.

Weitere Informationen zur Funktionsweise der Aktualisierungsfunktion in GPT finden Sie im Referenzhandbuch für die Google Publisher Tag API. Ein Beispiel erhalten Sie in den erweiterten GPT-Beispielen unter "Tags für responsives Webdesign implementieren".

Die Größe von responsiven GPT-Anzeigen wird bei einer Änderung der Browsergröße nicht angepasst. Mithilfe von benutzerdefiniertem Code lassen sich die Anzeigenflächen im Falle einer Größenänderung aktualisieren.

Trafficking für responsive Anzeigen durchführen

Wenn Sie responsive Anzeigen mit Google Publisher-Tags verwenden, werden Anzeigen basierend auf der Browsergröße und dem Gerät ausgeliefert. Dank der Zuordnungsfunktion wird von Ad Manager das richtige Anzeigenformat für die Bildschirmgröße des Geräts angefordert, auf der die Anzeige erscheinen soll.

In Ad Manager kann kein Trafficking für responsive AdSense-Tags durchgeführt werden. Stattdessen müssen responsive Tags mithilfe von GPTs auf der entsprechenden Seite implementiert werden. Sie müssen die Höhe und die Breite des AdSense-Tags den von AdSense unterstützten standardmäßigen Anzeigenformaten entsprechend wie in diesen Beispielen für responsive Tags angeben.

Im Folgenden finden Sie ein Beispiel für die Implementierung einer responsiven Anzeige mit AdSense-Tags in den Größen 320 x 100 für Mobilgeräte, 300 x 250 für Tablets und 336 x 280 für Desktop-Computer:

  1. Implementieren Sie Ihre responsiven Google Publisher-Tags (GPT) auf der Seite.
  2. Erstellen Sie eine AdSense-Werbebuchung für die drei Größen 320 x 100, 300 x 250 und 336 x 280 und richten Sie sie auf den Anzeigenblock aus, den Sie zum Erstellen der responsiven Tags verwendet haben.
  3. Fügen Sie der AdSense-Werbebuchung drei Creatives für die entsprechenden Größen hinzu und führen Sie ein Trafficking für den AdSense-Code durch.

Wenn Sie über Ad Manager Ad Exchange-Creatives ausliefern, empfehlen wir Ihnen, ein asynchrones Rendering mit Einzelanfragemodus zu verwenden, damit die Seite schneller geladen wird. Die Anzeigen sollten nicht in einem iFrame gerendert werden, sondern direkt auf der Seite eingebettet sein.

War dieser Artikel hilfreich?
Wie können wir die Seite verbessern?