AMP Dokumentation ohne Headerbidding
Die Abkürzung "AMP" steht für Accelerated Mobile Pages.
Mit dem Projekt möchte Google die mobilen Versionen von Webseiten schlanker machen, sodass die Nutzer weniger Datenvolumen verbrauchen und die Seiten schneller geladen werden.
Dadurch ist die Einbindung von eigenem JavaScript-Code auf diesen Seite sehr beschränkt.
Bitte beachten Sie, dass diese Beispiele auf keinen Fall in einer produktiven Seite verwendet werden können.
Übersicht
- 1 Übersicht
- 2 Glossar
- 3 Standard-Setup
- 4 Platzierungsempfehlung der AMP-Tags
- 5 Automatischer Reload der Slots
- 5.1 Hinweis
- 6 Erstellen der AMP-Tags
- 7 Besonderheit topmobile5 (b5) / mobile sticky ad
Glossar
Begriff | Erklärung |
|---|---|
Adslots | Beschreibt einen Platz auf einer HTML Seite, welcher mit Werbemitteln befüllt werden kann. Je nachdem wo der AdSlot auf der Webseite platziert wird, wird dem Slot ein Name zugewiesen. Beispiel: Ein Adslot wird am Anfang der Seite entweder vor oder nach der Navigation platziert. Dieser wird als topmobile bezeichnet. |
Adslot Size | Ein Adslots beinhaltet ein oder mehrere Formatgrößen. Beispiel: Über den topmobile Slot können folgende Formatgrößen ausgespielt werden - 300x250,320x150,320x100,320x75,320x50 |
Netzwerk ID | Jeder Adserver von Google Ad Manager 360 bekommt eine eindeutige ID zugewiesen. Als Netzwerk-ID wird die ID '4444' verwendet. |
Adunit / Anzeigenblock | Die Adunit bestimmt die technische Seite im Adserver. Beispiel: m.amp_IHRSEITENNAME |
Zone | Die Zone bestimmt die Rubrik Ihrere Seite. Dadurch kann die Auslieferung rubrikenspezifisch bestimmt werden. Beispiel: IHRSEITENNAME_startseite |
Postfix | Der Postfix wird am Ende der Zone angehängt. Diese sind notwendig, um Kampagne auf einen bestimmten Slot zu buchen. Beispiel: Der AMP-Tag für einen topmobile Slot wird mit dem Postfix "b1" angehängt. (topmobile2 = 'b2', topmobile3 = 'b3') |
Standard-Setup
Best practice
AMP empfiehlt den ersten Slot, in diesem Fall ist das der topmobile2 (b2), nicht im sichtbaren Bereich einzubauen, sondern "below the fold".
Für das Implementieren der AMP Tags empfehlen wir Ihnen folgendes Setup:
Adslot | Formatgrößen |
|---|---|
topmobile2 (b2) | 300x252,300x250,320x150,320x100,320x75,320x50,37x32 |
topmobile3 (b3) | 300x253,300x250,320x150,320x100,320x75,320x50,37x33 |
topmobile4 (b4) | 300x254,300x250,320x150,320x100,320x75,320x50,37x34 |
topmobile5 (b5) / mobile sticky ad | 320x50,37x35 |
Platzierungsempfehlung der AMP-Tags
Wir empfehlen folgende Platzierung der Tags auf der AMP-Seite:
Adslot | Platzierungsempfehlung |
|---|---|
topmobile2 (b2) | Nach dem Einleitungstext oder erstem Bild. |
topmobile3 (b3) | Je nach Länge eines Artikels nach jedem Absatz. |
topmobile4 (b4) | Je nach Länge eines Artikels nach jedem Absatz. |
topmobile5 (b5) / mobile sticky ad | Am unteren Bildschirmrand. |
Hier ein Beispiel für die Positionierung der Slots topmobile2 (b2), topmobile3 (b3) und topmobile5 (b5) / mobile sticky ad.
Automatischer Reload der Slots
AMP bietet Ihnen die Möglichkeit, die Slots nach einer selbst definierten Sekundenanzahl automatisch neuzuladen.
Beim Reload wird es zwischen zwei verschiedenen Konfigurationen unterschieden.
1 - Reload für einzelne Slots (empfohlen für den b5)
Beispiel für eine Reload vom topmobile5 Slot (30 Sekunden)
***___topmobile5___***
<amp-ad ...
type="doubleclick"
data-enable-refresh="30"
data-slot="/4444/m.amp_IHRSEITENNAME.de/ZONE_amp_b5"
...
</amp-ad>Um die Refresh-Funktion für einzelne Slots vorzunehmen, muss das Attribut data-enable-refresh innerhalb des amp-ad Tags eingefügt werden.
Der Wert für das Attribut darf nicht kleiner als 30 sein.
2 - Reload für alle Slots
Beispiel für einen Reload der Ads von 30 Sekunden
<meta name="amp-ad-enable-refresh" content="doubleclick=30">Dieser Codeblock muss im head des Dokuments eingefügt werden.
Wir empfehlen die Sekundenanzahl auf 30 zu setzen. Dazu muss der Wert unter content auf "doubleclick=30" gesetzt werden und darf nicht kleiner als 30 sein.
Erstellen der AMP-Tags
Im Folgenden wird erläutert, wie der Aufbau des AMP-Tags aussieht und welche Eigenschaften innerhalb des AMP-Tags verändert werden müssen bzw. unverändert bleiben.
Beispiel für topmobile2
<amp-ad width=320 height=252
type="doubleclick"
data-slot="/4444/m.amp_IHRSEITENNAME.de/ZONE_amp_b2"
data-multi-size="300x252,300x250,320x150,320x100,320x75,320x50,37x32"
data-multi-size-validation="false"
json='{"targeting": {"kw": "amp","keywords": ["b2", "amp"],"adslot": "topmobile2","af": ["moad2x1", "moad3x1", "moad4x1", "moad6x1", "mrec"],"as": "topmobile2"}}'>
</amp-ad>Es sind viele verschiedene AMP-Tags vorhanden. Wenn wir jedoch von einem AMP-Tag sprechen, dann ist damit der Tag für das Ausspielen eines Werbemittels gemeint. → <amp-ad...></amp-ad>
Jegliche Konfigurationen wird nur innerhalb des öffnenden AMP-Tags durchgeführt.
Im Anschluss folgt eine Erklärung der Eigenschaften und ob diese ausgefüllt werden oder unverändert bleiben.
width / height
Der öffnende AMP Tag beginnt mit der Breite "width" und der Höhe "height". Um diese Eigenschaften mit Werten zu befüllen, muss in Erfahrung gebracht werden, welche Größen der AMP-Tag, in dem Beispiel der topmobile, beinhaltet.
Standardmäßig hat topmobile2 folgende Größen: 300x252, 300x250, 320x150, 320x100, 320x75, 320x50
Im ersten Schritt wird der höchste WIDTH-Wert überprüft. In dem Fall ist es 320. Dieser Wert wird nun unter "width" im AMP Tag eingetragen.
Im nächsten Schritt wird dasselbe mit dem HEIGHT-Wert durchgeführt. Hier ist der höchste Wert 252 und wird im Feld "height" eingetragen.
type
Der "type" bestimmt in dem Fall den Dienstleitster "doubleclick". Diese Eigenschaft darf NICHT verändert werden.
data-slot / AnzeigenblockID
Der "data-slot" bezieht sich auf die Anzeigenblock ID. Die ID wird von uns bereitgestellt und muss im jeden AMP-Tag vorhanden sein.
Hier gibt es nur einen Punkt, auf den besonders geachtet werden muss:
ZONE: Hier wird die Zone der aktuellen Seite eingetragen → Als Beispiel /artikel oder /rest
data-muli-size / Größen
Beispiel für den topmobile-Slot
Wie oben erwähnt, kann jeder Ad-Slot ein oder mehrere Sizes enthalten. Hier müssen unsere Standardgrößen für den jeweiligen Slot eingetragen werden.
Falls Sie beispielsweise keine rectangle-Größe im topmobile2 verwenden möchten, muss die Größe 300x250 im "data-multi-size" entfernt werden.
data-muli-size-validation
Beispiel für den topmobile-Slot
Diese Eigenschaft muss IMMER den Wert 'false' haben, da es ansonsten Komplikationen mit den Multi-sizes gibt.
json
Beispiel für den topmobile-Slot
In der Eigenschaft "json" sind standardmäßig unsere Keywords definiert. Diese dürfen NICHT verändert werden. Falls weitere Keywords benötigt werden, ist es erforderlich dies mit uns abzusprechen.
Besonderheit topmobile5 (b5) / mobile sticky ad
Beim topmobile5 / mobile sticky ad gibt es kleinere Unterschiede, die zu beachten sind.
Dieser Slot besitzt lediglich die Größe 320x50. Hier wird also kein "Multisize" verwendet.
Der amp-ad Tag wird von dem amp-sticky-ad umschlossen. Dieser bekommt eine weitere Eigenschaft "layout=nodisplay".
Für die Sticky-Funktionalität muss zusätzlich folgendes Script im <head> verbaut werden:
Beispielvorlage topmobile2, topmobile3, topmobile4 und topmobile5
Ansprechpartner |
|---|
@Baran Özbek |
@Arne Peters |