Anzeigenblöcke

Responsive Anzeigenblöcke mit Contentempfehlungen anpassen

Wenn Sie bestimmte Anforderungen an das Aussehen responsiver Anzeigenblöcke mit Contentempfehlungen haben, können Sie den Anzeigencode durch Parameter ergänzen. Damit lässt sich das Layout dieser Anzeigenblöcke ändern und beispielsweise festlegen, wie die Zeilen und Spalten der Empfehlungen angeordnet sein sollen.

Sie haben auch die Möglichkeit, mit den Parametern unterschiedliche Einstellungen für Mobilgeräte und Computer festzulegen. Wenn Sie z. B. für den Layoutparameter nur einen Wert angeben, hat der Anzeigenblock auf Mobilgeräten und Computern das gleiche Layout. Geben Sie dagegen zwei Werte an, hat er auf Mobilgeräten (erster Wert) ein anderes Layout als auf Computern (zweiter Wert).

Diese Optionen stehen nur für responsive Anzeigenblöcke mit Contentempfehlungen zur Verfügung und alle Parameter sind erforderlich, damit die Anpassung funktioniert. Testen Sie nach der Änderung des Anzeigencodes die entsprechenden Anzeigenblöcke auf verschiedenen Geräten und Bildschirmen, um zu sehen, ob alles reibungslos funktioniert.

Die in den folgenden Beispielen genannten Änderungen am Anzeigencode sind richtlinienkonform. Wenn Sie den Code für Anzeigenblöcke mit Contentempfehlungen auf diese Weise ändern, verstoßen Sie also nicht gegen die AdSense-Programmrichtlinien.

Layout ändern

Mit dem Layoutparameter data-matched-content-ui-type wird die Anordnung des Textes und der Bilder in den Anzeigenblöcken mit Contentempfehlungen gesteuert. Sie können z. B. festlegen, ob Bild und Text nebeneinander oder übereinander angeordnet werden.

Folgende Layoutoptionen stehen zur Verfügung:

Bild und Text nebeneinander

Bei diesem Layout werden Bild und Text nebeneinander platziert. Hierfür muss dem Anzeigencode der Parameter data-matched-content-ui-type="image_sidebyside" hinzugefügt werden.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_sidebyside"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Image and text side by side layout

Bild und Text nebeneinander auf einer Karte

Bei diesem Layout werden Bild und Text auf einer Karte nebeneinander platziert. Hierfür muss dem Anzeigencode der Parameter data-matched-content-ui-type="image_card_sidebyside" hinzugefügt werden.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_card_sidebyside"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Image and text side by side with card layout

Bild über dem Text

Bei diesem Layout wird das Bild über dem Text platziert. Hierfür muss dem Anzeigencode der Parameter data-matched-content-ui-type="image_stacked" hinzugefügt werden.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_stacked"
     data-matched-content-rows-num="3"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Image stacked above text layout

Bild über dem Text auf einer Karte

Bei diesem Layout wird das Bild auf einer Karte über dem Text platziert. Hierfür muss dem Anzeigencode der Parameter data-matched-content-ui-type="image_card_stacked" hinzugefügt werden.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="image_card_stacked"
     data-matched-content-rows-num="3"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Image stacked above text with card layout

Nur Text

Dies ist ein reines Textlayout ohne Bild. Hierfür muss dem Anzeigencode der Parameter data-matched-content-ui-type="text" hinzugefügt werden.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="text"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

text-only layout

Text mit Karte

Dies ist ein reines Textlayout für eine Karte. Hierfür muss dem Anzeigencode der Parameter data-matched-content-ui-type="text_card" hinzugefügt werden.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-ui-type="text_card"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Text with card layout

Anzahl der Zeilen und Spalten festlegen

Die Empfehlungen in Anzeigenblöcken mit Contentempfehlungen sind in einem Raster angeordnet. Sie können angeben, wie viele Zeilen und Spalten dieses Raster umfassen soll, z. B. 2 x 2 oder 4 x 1.

Die Anzahl der Zeilen wird mit dem Parameter data-matched-content-rows-num festgelegt und die Anzahl der Spalten mit data-matched-content-columns-num. Beide Parameter und data-matched-content-ui-type müssen angegeben werden.

Hinweis:
  • Es gelten gewisse Einschränkungen im Hinblick auf die Anzahl der Zeilen und Spalten, die festgelegt werden können. Die Gesamtzahl der Empfehlungen im Anzeigenblock muss zwischen 1 und 30 liegen. Wenn Sie weniger als 1 oder mehr als 30 Empfehlungen festlegen, ist der Anzeigenblock als leere Fläche zu sehen.
  • Manchmal ist es nicht möglich, die genaue Anzahl der angegebenen Zeilen bzw. Spalten darzustellen, beispielsweise, wenn Sie viele Spalten festgelegt haben, aber der Anzeigenblock mit Contentempfehlungen nicht breit genug ist, um alle unterzubringen. In solchen Fällen wird die Anzahl der Zeilen bzw. Spalten so angepasst, dass die Empfehlungen in die verfügbare Fläche passen und für Nutzer ansprechend sind.

Beispiele zu Zeilen und Spalten

4 x 1 (Mobilgeräte und Computer)

In diesem Beispiel sehen Sie, wie ein Anzeigenblock mit vier Zeilen und einer Spalte für insgesamt vier Empfehlungen erstellt wird.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="4"
     data-matched-content-columns-num="1"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

4x1 grid

2 x 2 (Mobilgeräte und Computer)

In diesem Beispiel sehen Sie, wie ein Anzeigenblock mit zwei Zeilen und zwei Spalten für insgesamt vier Empfehlungen erstellt wird.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="2"
     data-matched-content-columns-num="2"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

2x2 grid

3 x 3 (Mobilgeräte und Computer)

In diesem Beispiel sehen Sie, wie ein Anzeigenblock mit drei Zeilen und drei Spalten für insgesamt neun Empfehlungen erstellt wird.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="3"
     data-matched-content-columns-num="3"
     data-matched-content-ui-type="image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

3x3 grid

4 x 1 (Mobilgeräte) und 2 x 2 (Computer) für responsive Websites

In diesem Beispiel wird gezeigt, wie ein Anzeigenblock mit einem 4 x 1-Raster für Mobilgeräte und einem 2 x 2-Raster für Computer erstellt wird. Diese Konfiguration ist bei responsiven Websites sinnvoll.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- pbad -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxx"
     data-ad-slot="1234567890"
     data-matched-content-rows-num="4,2"
     data-matched-content-columns-num="1,2"
     data-matched-content-ui-type="image_stacked,image_stacked"
     data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

4x1 grid

2x2 grid

Feedback geben

Wir würden uns sehr über Ihr Feedback zur Anpassung von Anzeigenblöcken mit Contentempfehlungen freuen. Über dieses Formular können Sie uns mitteilen, was Ihnen gefällt und wo Verbesserungen möglich sind.

Fehlerbehebung

Wenn Sie den Anzeigenblock mit Contentempfehlungen angepasst haben, wird er unter Umständen nicht so dargestellt wie erwartet. Hier finden Sie einige häufige Probleme sowie die entsprechenden Lösungen:

Der Anzeigenblock mit Contentempfehlungen ist leer

Dies kann zwei Ursachen haben:

  • Die Gesamtzahl der Empfehlungen im Anzeigenblock ist entweder kleiner als 1 oder größer als 30. Ändern Sie die Anzahl der Zeilen und Spalten so, dass die Gesamtzahl der Empfehlungen in dem Anzeigenblock innerhalb dieser Begrenzungen liegt.
  • Der Anzeigenblock ist zu breit für die festgelegte Anzahl an Contentempfehlungen. In diesem Fall sollten Sie die Breite verringern.

Der Anzeigenblock enthält weniger Empfehlungen als erwartet

Dies kann passieren, wenn nicht genügend Platz vorhanden ist, um die festgelegte Anzahl von Empfehlungen darzustellen, z. B. wenn der Anzeigenblock zu schmal ist oder auf einem kleinen Bildschirm platziert wird. In solchen Fällen wird die Anzahl der Zeilen bzw. Spalten so angepasst, dass diese optimal in die verfügbare Fläche passen. Sie können die Breite des Anzeigenblocks ändern oder für Mobilgeräte eine andere Zeilen- und Spaltenanzahl festlegen als für Computer.

Die Contentempfehlungen enthalten nur Text

Das kann passieren, wenn der Anzeigenblock für die festgelegte Anzahl von Empfehlungen zu schmal ist. In diesem Fall sollten Sie die Breite erhöhen.

Mithilfe der Konsole Fehler in Anzeigenblöcken mit Contentempfehlungen finden

Sie können im Browser mithilfe der Konsole überprüfen, ob Sie den Code für die Anzeigenblöcke richtig geändert haben. So lässt sich beispielsweise feststellen, ob im Anzeigencode ein erforderlicher Parameter fehlt oder ein Parameter einen ungültigen Wert enthält.

Wenn Sie Chrome verwenden, können Sie den Anzeigencode in der DevTools-Konsole testen:

  1. Rufen Sie die Seite mit den Anzeigenblöcken mit Contentempfehlungen auf.
  2. Drücken Sie die Tastenkombination Strg + Umschalttaste + J (Windows/Linux) bzw. Cmd + Opt + J (Mac).
  3. Sehen Sie nach, ob das Steuerfeld der Konsole Fehlermeldungen enthält.

 

War das hilfreich?
Wie können wir die Seite verbessern?