Beispiele für den Einbau von AMP-HTML Anzeigenblöcken

Überblick

In diesem Artikel findest du verschiedene Beispiele für die Einbindung von AMP-HTML Anzeigenblöcken.

Wenn du die grundlegende Einrichtung noch nicht vorgenommen hast, empfehlen wir dir zuerst den Artikel „Wie baust du einen AMP-HTML Anzeigenblock ein?“.

Anzeigenblock mit fester Größe

Verwende das Layout fixed, wenn dein Anzeigenblock immer mit einer festen Breite und Höhe dargestellt werden soll.

<amp-ad type="aduptech" layout="fixed" width="500" height="200" data-placementkey="07d120d1abbd5f37dc4f1f8feceaebe1"></amp-ad>

Geeignet für:

• klassische Bannerformate

• Desktop-Platzierungen

• feste Werbeflächen

Anzeigenblock mit dynamischer Größe

Mit dem Layout fill passt sich der Anzeigenblock vollständig an seinen umgebenden Container an.

Container definieren

<style amp-custom>#parent { width: 350px; height: 300px; position: relative;}</style>

Anzeigenblock einbinden

<div id="parent"> <amp-ad type="aduptech" layout="fill" data-placementkey="07d120d1abbd5f37dc4f1f8feceaebe1"> </amp-ad></div>

Geeignet für:

• flexible Layouts

• dynamische Container

• moderne Webseiten

Anzeigenblock mit fester Höhe

Mit fixed-height bleibt die Höhe des Anzeigenblocks konstant, während sich die Breite automatisch an den verfügbaren Platz anpasst.

<amp-ad type="aduptech" layout="fixed-height" height="100" data-placementkey="07d120d1abbd5f37dc4f1f8feceaebe1"></amp-ad>

Geeignet für:

• horizontale Banner

• Header- und Footer-Platzierungen

• responsive Webseiten

Anzeigenblock mit festem Seitenverhältnis

Mit responsive passt sich der Anzeigenblock flexibel an den verfügbaren Platz an und behält dabei das definierte Seitenverhältnis bei.

Im folgenden Beispiel wird ein Verhältnis von 16:9 verwendet.

<amp-ad type="aduptech" layout="responsive" width="16" height="9" data-placementkey="07d120d1abbd5f37dc4f1f8feceaebe1"></amp-ad>

Dieses Layout eignet sich besonders für:

• responsive Websites

• mobile Endgeräte

• moderne Content-Layouts

Wann solltest du welches Layout verwenden?

Best Practices

Responsive Layout bevorzugen

Für die meisten modernen Websites empfehlen wir das Layout responsive, da sich Anzeigen flexibel an unterschiedliche Bildschirmgrößen anpassen.

Containergröße beachten

Layouts wie fill benötigen einen Container mit definierten Abmessungen.

Fehlt dieser, kann die Anzeige nicht korrekt dargestellt werden.

Platzierungen testen

Überprüfe jede Anzeigenplatzierung auf:

• Desktop

• Tablet

• Smartphone

So stellst du sicher, dass Anzeigen auf allen Geräten korrekt dargestellt werden.

Testmodus verwenden

Nutze während der Implementierung den Parameter data-adtest, um Anzeigen zu testen, ohne Impressionen oder Klicks zu erfassen.

Häufige Fehlerquellen

Fehlende Containergröße bei fill

Beim Layout fill muss der übergeordnete Container eine definierte Größe besitzen.

Width und Height fehlen

Layouts wie fixed oder responsive benötigen gültige Werte für width und height.

Falsches Layout gewählt

Wähle das Layout passend zum Einsatzzweck, damit Anzeigen optimal dargestellt werden.