Anzeigenblöcke

Anzeigencode des responsiven Anzeigenblocks ändern

Sollte der von unserem System generierte Anzeigencode für den responsiven Anzeigenblock nicht den Anforderungen Ihrer responsiven Website entsprechen, können Sie den Code anpassen. In den nachfolgenden Abschnitten haben wir hierzu Beispiele für Sie bereitgestellt.

Wichtiger Hinweis:

Hinweis: Die in den folgenden Beispielen genannten Änderungen am AdSense-Anzeigencode sind richtlinienkonform. Sie verstoßen nicht gegen die AdSense-Programmrichtlinien, wenn Sie den Code entsprechend ändern.

Größen von Anzeigenblöcken für bestimmte Bildschirmbreiten

Mit dem Code für responsive Anzeigenblöcke haben Sie die Möglichkeit, genau die richtige Größe für Smartphones, Tablets und Desktop-Computer festzulegen. Wie der Code geändert werden muss, zeigen wir Ihnen in einem Beispiel. Den Code können Sie auch dann anpassen, wenn Sie noch keine Erfahrungen mit CSS-Medienabfragen oder Änderungen des AdSense-Anzeigencodes haben.

Nachfolgend finden Sie Größenangaben für bestimmte Bildschirmbreiten und ein Beispiel für einen responsiven Anzeigenblock:

  • Für Bildschirmbreiten bis zu 500 Pixel: Anzeigenblock 320 x 100
  • Für Bildschirmbreiten zwischen 500 und 799 Pixel: Anzeigenblock 468 x 60
  • Für Bildschirmbreiten ab 800 Pixel: Anzeigenblock 728 x 90
<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

So passen Sie diesen Beispielcode für Ihre eigene Website an:

  1. Erstellen Sie einen Displayanzeigenblock in Ihrem AdSense-Konto und belassen Sie die Auswahl unter "Anzeigengröße" auf Responsiv. Notieren Sie sich die folgenden Informationen des responsiven Anzeigencodes:
    • Die Publisher-ID, zum Beispiel ca-pub-1234567891234567
    • Die ID des Anzeigenblocks (data-ad-slot), zum Beispiel 1234567890
  2. So ändern Sie den Beispielcode:
    • Ersetzen Sie alle Vorkommen von example_responsive_1 durch einen eindeutigen Namen, z. B. Startseite oder Titelseite_123.
      Hinweise:
      • Der Name, den Sie wählen darf nur aus Buchstaben (A-Z), Zahlen und Unterstrichen bestehen. Das erste Zeichen muss ein Buchstabe sein.
      • Jedes Mal, wenn Sie diesen Beispielcode verwenden, müssen Sie einen neuen Namen wählen.
    • Ersetzen Sie ca-pub-XXXXXXX11XXX9 mit Ihrer Publisher-ID.
    • Ersetzen Sie 8XXXXX1 mit der ID Ihres Anzeigenblocks.
  3. So legen Sie die Größen des Anzeigenblocks für die unterschiedlichen Bildschirmbreiten fest:
    • Sollte der Beispielcode genau die von Ihnen gewünschten Größen des Anzeigenblocks enthalten, sind keine Änderungen erforderlich.
    • Wenn Sie jedoch andere Größen des Anzeigenblocks für die Bildschirmbreiten festlegen möchten, folgen Sie dieser Anleitung:
      • Ersetzen Sie 320px und 100px mit den Pixelangaben, die Sie für die Breite und Höhe des Anzeigenblocks für Bildschirmbreiten bis zu 500 Pixel festlegen möchten.
      • Ersetzen Sie 468px und 60px mit den Pixelangaben, die Sie für die Breite und Höhe des Anzeigenblocks für Bildschirmbreiten zwischen 500 und 799 Pixel festlegen möchten.
      • Ersetzen Sie 728px und 90px mit den Pixelangaben, die Sie für die Breite und Höhe des Anzeigenblocks für Bildschirmbreiten ab 800 Pixel festlegen möchten.
  4. Kopieren Sie den geänderten Anzeigencode in den HTML-Quellcode der Seite, auf der die Anzeigen ausgeliefert werden sollen.
    Hinweis: Sie sollten die Anzeigen auf verschiedenen Geräten und Bildschirmen testen, um sich zu vergewissern, dass der responsive Anzeigencode wie vorgesehen funktioniert.

Beispiele zu erweiterten Funktionen für responsiven Anzeigencode

Wenn unser responsiver Anzeigencode nicht alle Funktionen unterstützt, die Sie benötigen, ist es möglich, den Code anzupassen, um per CSS eine genaue Größe für den Anzeigenblock anzugeben.

Hinweis: Nutzen Sie diese erweiterten Funktionen nur, wenn Sie Erfahrung mit dem Ändern von Anzeigencode haben.

Anzeigenblock mit maximierbarer Breite und fester Höhe festlegen

Sie können den responsiven Anzeigencode ändern, um mithilfe von CSS festzulegen, dass der Anzeigenblock eine maximierbare Breite und eine feste Höhe haben soll. Im folgenden Beispiel wird gezeigt, wie Sie diese Änderungen vornehmen:

Beispiel für Anzeigen mit maximierbarer Breite und fester Höhe
In diesem Beispiel sehen Sie, wie Sie den responsiven Anzeigencode anpassen können, um eine feste Höhe von 90 Pixeln und eine variable Breite zwischen 400 und 970 Pixeln festzulegen:
<ins class="adsbygoogle"
   style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Genaue Größe auf Basis der Bildschirmbreite angeben

Sie können den responsiven Anzeigencode so ändern, dass die genaue Größe des Anzeigenblocks anhand von CSS festgelegt wird. Wie genau das funktioniert, sehen Sie im folgenden Beispiel:

Beispiel für Anzeigen, deren Größe auf der Bildschirmbreite basiert
Wenn Sie die genaue Größe des optimalen Anzeigenblocks für die responsive Website auf den einzelnen Geräten kennen, können Sie die Größen Blocks mit CSS3-Medienabfragen festlegen. Im folgenden Beispiele sehen Sie, wie Sie den Anzeigencode dahingehend ändern, dass CSS3-Medienabfragen verwendet werden:
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }

@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
    style="display:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
Die Regeln vom Typ @media entsprechen einer CSS3-Syntax und werden von allen aktuellen Browserversionen unterstützt. Wenn ältere Browser unterstützt werden sollen, beispielsweise Internet Explorer 7 oder frühere Versionen, legen Sie zuerst eine Standardgröße fest. So stellen Sie sicher, dass eine Anzeige gerendert wird, selbst wenn keine Medienabfragen unterstützt werden. Das Festlegen der Größe des Anzeigencodes mit CSS in externen Stylesheets wird offiziell nicht unterstützt.

Anzeigenblock ausblenden

In gewissen Fällen soll eine Anzeige möglicherweise überhaupt nicht geschaltet werden, zum Beispiel auf Mobilgeräten mit einem vergleichsweise kleinen Bildschirm. Damit keine Anzeigenanfrage erfolgt und keine Anzeige ausgeliefert wird, richten Sie einen Parameter mit CSS-Medienabfragen ein und der Anzeigenblock wird dann entsprechend ausgeblendet. Im folgenden Beispiel sehen Sie, wie Sie diese Änderungen an Ihrem Anzeigencode vornehmen:

Beispiel für das Ausblenden von Anzeigen für bestimmte Bildschirmgrößen
Falls Anzeigen nur für bestimmte Bildschirmgrößen geschaltet werden sollen, setzen Sie CSS ein. Anhand des folgenden Beispiels erklären wir, wie Sie den Anzeigencode mit CSS3-Medienabfragen ändern, um Anzeigen für bestimmte Bildschirmgrößen auszublenden:
<style type="text/css">
.adslot_1 { display:inline-block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

In diesem Beispiel erscheinen keine Anzeigen, wenn der Bildschirm weniger als 400 Pixel breit ist.

Trotz dieser gestalterischen Freiheiten ist es immer erforderlich, dass Sie die Richtlinien für Anzeigen-Placements einhalten. Gemäß unseren Programmrichtlinien sind Änderungen am Code nur eingeschränkt zulässig.
War das hilfreich?
Wie können wir die Seite verbessern?