Anzeigencode des responsiven Anzeigenblocks ändern

Sollte der von unserem System generierte Code für die responsive Anzeige nicht den Anforderungen Ihrer responsiven Website entsprechen, können Sie den Code anpassen. Die Beispiele in diesem Artikel zeigen, wie Sie diese Änderungen korrekt vornehmen.

Vorbereitung:

• Falls Sie sich noch nicht mit CSS-Medienabfragen und Änderungen am Anzeigencode auskennen, erhalten Sie hier Beispiele zu den Größen von Anzeigenblöcken für bestimmte Bildschirmbreiten.
• Sie kennen sich bereits mit CSS-Medienabfragen aus und wissen, wie der Anzeigencode geändert wird? Dann könnte der folgende Abschnitt interessant für Sie sein: Beispiele zu erweiterten Funktionen für responsiven Anzeigencode.

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="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     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-1234567890123456
   • 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-1234567890123456 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.
   Tipp: Sie sollten die Anzeigen auf verschiedenen Geräten und Bildschirmen testen, um sich zu vergewissern, dass der responsive Anzeigencode wie vorgesehen funktioniert.

Beispiele für erweiterte 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 Code für responsive Anzeigen ändern und eine feste Höhe von 90 Pixel sowie eine variable Breite von 400 bis 970 Pixel festlegen:
<ins class="adsbygoogle"
   style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></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. Das folgende Beispiel zeigt, wie Sie Ihren Anzeigencode so ä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:block;"
    data-ad-client="ca-pub-1234567890123456"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Die Regeln vom Typ @media entsprechen einer CSS3-Syntax und werden von allen aktuellen Browserversionen unterstützt. Das Festlegen der Größe des Anzeigenblocks 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. Im folgenden Beispiel sehen Sie, wie Sie den Anzeigencode so ändern, dass mithilfe von CSS3-Mediaabfragen Anzeigen für bestimmte Bildschirmgrößen ausgeblendet werden:
<style type="text/css">
.adslot_1 { display: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-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

In diesem Beispiel werden keine Anzeigen ausgeliefert, wenn die Bildschirmbreite weniger als 400 Pixel beträgt.

Hinweis: Trotz dieser gestalterischen Freiheiten ist es immer erforderlich, dass Sie die Richtlinien für Anzeigen-Placements einhalten. Gemäß den AdSense-Programmrichtlinien sind Änderungen am AdSense-Anzeigencode nur eingeschränkt zulässig.