AMP

Spezifikation für AMP für Ads

Important: this documentation is not applicable to your currently selected format stories!

Wenn du Änderungen am Standard vorschlagen möchtest, hinterlasse bitte einen Kommentar bei Intent to Implement.

AMPHTML Ads sind ein Mechanismus zum Rendern schneller, leistungsfähiger Ads auf AMP Seiten. Um sicherzustellen, dass AMPHTML Ad Dokumente ("AMP Creatives") schnell und reibungslos im Browser gerendert werden können und die Benutzererfahrung nicht beeinträchtigen, müssen AMP Creatives gewisse Validierungsregeln erfüllen. Ähnlich wie bei den Regeln für das AMP Format erlauben AMPHTML Ads nur eine begrenzte Anzahl von Tags, Funktionen und Erweiterungen.

Regeln für das Format von AMPHTML Ads

Sofern nachstehend nicht anders angegeben, muss das Creative alle Regeln erfüllen, die im Dokument Regeln für das AMP Format angeführt sind und auf die hier Bezug genommen wird. Beispielsweise weicht die Boilerplate für AMPHTML Ads von der standardmäßigen AMP Boilerplate ab.

Zusätzlich dazu müssen Creatives die folgenden Regeln befolgen:

Regel Begründung
Sie müssen von den Tags <html ⚡4ads> oder <html amp4ads> eingeschlossen sein. Ermöglicht Validierungstools, ein Creative Dokument entweder als allgemeines AMP Dokument oder als eingeschränktes AMPHTML Ad Dokument zu identifizieren und entsprechend abzufertigen.
Als Runtime Skript muss <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script> anstelle von https://cdn.ampproject.org/v0.js eingebunden sein. Das ermöglicht maßgeschneidertes Runtime Verhalten für AMPHTML Ads, die in Cross-Origin iframes bereitgestellt werden.
Das Tag <link rel="canonical"> darf nicht verwendet werden. Ad Creatives haben keine "kanonische Nicht-AMP Version" und werden nicht unabhängig für die Suche indexiert, was eine Selbstreferenzierung unnötig macht.
Optionale Meta Tags können im HTML Kopf als Kennung im Format <meta name="amp4ads-id" content="vendor=${vendor},type=${type},id=${id}"> verwendet werden. Solche Meta Tags müssen vor dem Skript amp4ads-v0.js platziert werden. Die Werte von vendor und id sind Strings, die nur die Zeichen [0-9a-zA-Z_-] enthalten. Der Wert von type ist entweder creative-id oder impression-id. Mit diesen benutzerdefinierten Kennungen können Impressionen und Creatives identifiziert werden. Das kann bei der Berichterstellung und Fehlersuche hilfreich sein.

Beispiel:

<meta name="amp4ads-id"
  content="vendor=adsense,type=creative-id,id=1283474">
<meta name="amp4ads-id"
  content="vendor=adsense,type=impression-id,id=xIsjdf921S">
Das Nachverfolgen der Sichtbarkeit mit <amp-analytics> darf nur den Selektor full-ad via "visibilitySpec": { "selector": "amp-ad" } zum Ziel haben (siehe dazu Issue #4018 und PR #4368). Insbesondere darf die Komponente keine Selektoren zum Ziel haben, um auf Elemente innerhalb des Ad Creative zuzugreifen. In manchen Fällen werden AMPHTML Ads ein Ad Creative in einem iframe rendern. In solchen Fällen kann das Analysetool der Hostseite trotzdem nur das gesamte iframe zum Ziel haben und erhält keinen Zugriff auf Selektoren unterer Ebenen.

Beispiel:

<amp-analytics id="nestedAnalytics">
  <script type="application/json">
  {
    "requests": {
      "visibility": "https://example.com/nestedAmpAnalytics"
    },
    "triggers": {
      "visibilitySpec": {
      "selector": "amp-ad",
      "visiblePercentageMin": 50,
      "continuousTimeMin": 1000
      }
    }
  }
  </script>
</amp-analytics>

Diese Konfiguration sendet eine Anfrage an die URL https://example.com/nestedAmpAnalytics, wenn 50 % der umschließenden Ad 1 Sekunde lang ununterbrochen auf dem Bildschirm sichtbar waren.

Boilerplate

AMPHTML Ad Creatives erfordern eine andere, wesentlich einfachere Zeile für Boilerplate Stil als die allgemeinen AMP Dokumente:

<style amp4ads-boilerplate>
  body {
    visibility: hidden;
  }
</style>

Begründung: Der Stil amp-boilerplate blendet den Inhalt des Hauptteils aus, bis die AMP Runtime bereit ist und ihn wieder einblenden kann. Wenn JavaScript deaktiviert ist oder die AMP Runtime nicht geladen werden kann, stellt die standardmäßige Boilerplate sicher, dass der Inhalt letztendlich trotzdem angezeigt wird. Für AMPHTML Ads gilt jedoch: Wenn JavaScript vollständig deaktiviert ist, werden AMPHTML Ads nicht ausgeführt und die Ad wird niemals eingeblendet. Das macht die Sektion <noscript> in diesem Fall überflüssig. Ohne die AMP Runtime sind die meisten Mechaniken, auf die AMPHTML Ads angewiesen sind (z. B. Analysetools zur Sichtbarkeitsverfolgung oder amp-img für die Inhaltsanzeige), nicht verfügbar. Somit ist es besser, auf die Anzeige der Ad gänzlich zu verzichten, als eine fehlerhafte Ad anzuzeigen.

Und zu guter Letzt verwendet die AMPHTML Ad Boilerplate amp-a4a-boilerplate anstelle von amp-boilerplate, damit Validationstools sie einfacher identifizieren und präzisere Fehlermeldungen erstellen können, die Entwicklern weiterhelfen.

Beachte, dass für Mutationen im Text der Boilerplate die gleichen Regeln gelten wie für Mutationen in der allgemeinen AMP Boilerplate.

CSS

Regel Begründung
position:fixed und position:sticky sind im CSS von Creatives nicht zulässig. Mit position:fixed wird das Shadow DOM, vom dem AMPHTML Ads abhängig sind, verlassen. Außerdem dürfen Ads in AMP keine feste Position haben.
touch-action ist nicht zulässig. Eine Ad, die touch-action manipulieren kann, kann die Fähigkeit der Benutzer beeinträchtigen, durch das Hostdokument zu scrollen.
Das CSS des Creatives ist auf 20.000 Byte begrenzt. Große CSS Blöcke blähen das Creative unnötig auf, erhöhen die Netzwerklatenz und beeinträchtigen die Leistung der Seite.
Übergänge und Animationen unterliegen zusätzlichen Einschränkungen. AMP muss in der Lage sein, alle zu einer Ad gehörenden Animationen zu kontrollieren, damit sie angehalten werden können, wenn die Ad nicht mehr auf dem Bildschirm angezeigt wird oder die Systemressourcen sehr niedrig sind.
Anbieterspezifische Präfixe werden zum Zweck der Validierung als Aliase für dasselbe Symbol ohne Präfix gehandhabt. Das bedeutet: Wenn das Symbol foo von CSS Validierungsregeln verboten ist, dann ist das Symbol -vendor-foo ebenfalls verboten. Einige Eigenschaften mit Anbieterpräfix bieten äquivalente Funktionen zu Eigenschaften, die gemäß diesen Regeln verboten oder eingeschränkt sind.

Beispiel: -webkit-transition und -moz-transition werden beide als Aliase für transition gehandhabt. Sie sind nur in Kontexten zulässig, in denen auch transition zulässig wäre (siehe Abschnitt Selektoren weiter unten).

CSS Animationen und Übergänge

Selektoren

Die Eigenschaften transition und animation sind nur für Selektoren zulässig, die:

  • nur die Eigenschaften transition, animation, transform, visibility oder opacity enthalten.

    Begründung: Auf diese Weise kann die AMP Runtime diese Klasse aus dem Kontext entfernen, um Animationen zu deaktivieren, wenn dies für die Seitenleistung erforderlich ist.

Gut

.box {
  transform: rotate(180deg);
  transition: transform 2s;
}

Schlecht

Die Eigenschaft ist nicht in der CSS Klasse zulässig.

.box {
  color: red; // non-animation property not allowed in animation selector
  transform: rotate(180deg);
  transition: transform 2s;
}
Eigenschaften für Übergänge und Animationen

Die einzigen Eigenschaften, die einen Übergang haben können, sind "opacity" und "transform". (Begründung)

Gut

transition: transform 2s;

Schlecht

transition: background-color 2s;

Gut

@keyframes turn {
  from {
    transform: rotate(180deg);
  }

  to {
    transform: rotate(90deg);
  }
}

Schlecht

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%;
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Zulässige AMP Erweiterungen und Builtins

Die folgenden AMP Erweiterungsmodule und integrierten AMP Tags sind in einem AMPHTML Ad Creative zulässig. Erweiterungen und integrierte Tags, die nicht explizit aufgeführt sind, sind verboten.

Den meisten Auslassungen liegt entweder der Gedanke der Leistungssteigerung oder der Vereinfachung der Analyse von AMPHTML Ads zugrunde.

Beispiel: <amp-ad> ist in dieser Liste nicht aufgeführt. Das Tag ist ausdrücklich verboten, da die Verwendung von <amp-ad> innerhalb von <amp-ad> zu einer unbegrenzten Kaskade von geladenen Ads führen kann, was den Leistungszielen von AMPHTML Ads widerspricht.

Beispiel: <amp-iframe> ist in dieser Liste nicht aufgeführt. Das Tag ist verboten, weil Ads damit beliebiges JavaScript ausführen und externe Inhalte laden könnten. Wenn Ads solche Funktionen nutzen möchten, dann sollte der Eintrag a4aRegistry den Wert false zurückgeben und sie sollten den bereits vorhandenen Mechanismus '3p iframe' zum Rendern von Ads verwenden.

Beispiel: <amp-facebook>, <amp-instagram>, <amp-twitter> und <amp-youtube> sind aus demselben Grund wie <amp-iframe> nicht aufgeführt: Sie alle erstellen iframes und können darin potenziell unbegrenzte Ressourcen verbrauchen.

Beispiel: Die Tags <amp-ad-network-*-impl> sind in dieser Liste nicht aufgeführt. Das Tag <amp-ad> übernimmt die Delegation an diese Implementierungstags. Creatives sollten nicht versuchen, sie direkt einzubinden.

Beispiel: <amp-lightbox> ist noch nicht in der Liste aufgeführt, da auch einige AMPHTML Ad Creatives in einem iframe gerendert werden könnten und es derzeit keinen Mechanismus gibt, mit dem eine Ad über einen iframe hinaus erweitert werden kann. Die Unterstützung dafür könnte in Zukunft implementiert werden, falls Bedarf besteht.

HTML Tags

Die folgenden Tags sind in einem AMPHTML Ad Creative zulässig. Tags, die nicht ausdrücklich erlaubt sind, sind verboten. Diese Liste ist eine Teilmenge der allgemeinen ergänzenden Zulassungsliste für AMP Tags. Genau wie die Zulassungsliste orientiert sich auch diese Liste in ihrer Anordnung an der HTML5 Spezifikation im Abschnitt 4 von The Elements of HTML.

Den meisten Auslassungen liegt entweder der Gedanke der Leistungssteigerung oder die Tatsache zugrunde, dass die Tags nicht dem HTML5 Standard entsprechen. Zum Beispiel wurde <noscript> weggelassen, weil AMPHTML Ads aktiviertes JavaScript voraussetzen. Der Block <noscript> würde also niemals ausgeführt werden und bläht das Creative auf Kosten von Bandbreite und Latenz nur unnötig auf. Ähnlich dazu sind auch <acronym>, <big> und andere verboten, da sie nicht HTML5 kompatibel sind.

4.1 Das Stammelement

4.1.1 <html>

  • Muss die Typen <html ⚡4ads> oder <html amp4ads> verwenden

4.2 Metadaten des Dokuments

4.2.1 <head>

4.2.2 <title>

4.2.4 <link>

  • Die Tags <link rel=...> sind nicht zulässig, mit Ausnahme von <link rel=stylesheet>.

  • Hinweis: Anders als bei allgemeinem AMP sind die Tags <link rel="canonical"> verboten.

    4.2.5 <style> 4.2.6 <meta>

4.3 Sektionen

4.3.1 <body> 4.3.2 <article> 4.3.3 <section> 4.3.4 <nav> 4.3.5 <aside> 4.3.6 <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> 4.3.7 <header> 4.3.8 <footer> 4.3.9 <address>

4.4 Gruppieren von Inhalten

4.4.1 <p> 4.4.2 <hr> 4.4.3 <pre> 4.4.4 <blockquote> 4.4.5 <ol> 4.4.6 <ul> 4.4.7 <li> 4.4.8 <dl> 4.4.9 <dt> 4.4.10 <dd> 4.4.11 <figure> 4.4.12 <figcaption> 4.4.13 <div> 4.4.14 <main>

4.5 Semantische Tags für Text

4.5.1 <a> 4.5.2 <em> 4.5.3 <strong> 4.5.4 <small> 4.5.5 <s> 4.5.6 <cite> 4.5.7 <q> 4.5.8 <dfn> 4.5.9 <abbr> 4.5.10 <data> 4.5.11 <time> 4.5.12 <code> 4.5.13 <var> 4.5.14 <samp> 4.5.15 <kbd > 4.5.16 <sub> and <sup> 4.5.17 <i> 4.5.18 <b> 4.5.19 <u> 4.5.20 <mark> 4.5.21 <ruby> 4.5.22 <rb> 4.5.23 <rt> 4.5.24 <rtc> 4.5.25 <rp> 4.5.26 <bdi> 4.5.27 <bdo> 4.5.28 <span> 4.5.29 <br> 4.5.30 <wbr>

4.6 Bearbeitung

4.6.1 <ins> 4.6.2 <del>

4.7 Eingebettete Inhalte

  • Eingebettete Inhalte werden nur über AMP Tags wie <amp-img> oder <amp-video> unterstützt.

4.7.4 <source>

4.7.18 SVG

SVG Tags befinden sich nicht im HTML5 Namespace. Sie sind unten ohne Sektions-IDs aufgeführt.

<svg>``<g>``<path>``<glyph>``<glyphref>``<marker>``<view>``<circle>``<line>``<polygon>``<polyline>``<rect>``<text>``<textpath>``<tref>``<tspan>``<clippath>``<filter>``<lineargradient>``<radialgradient>``<mask>``<pattern>``<vkern>``<hkern>``<defs>``<use>``<symbol>``<desc>``<title>

4.9 Tabellendaten

4.9.1 <table> 4.9.2 <caption> 4.9.3 <colgroup> 4.9.4 <col> 4.9.5 <tbody> 4.9.6 <thead> 4.9.7 <tfoot> 4.9.8 <tr> 4.9.9 <td> 4.9.10 <th>

4.10 Formen

4.10.8 <button>

4.11 Skripte

  • Genau wie in einem allgemeinen AMP Dokument muss das Tag <head> des Creatives das Tag <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script> enthalten.
  • Im Gegensatz zu allgemeinem AMP ist <noscript> verboten.
    • Begründung: Da JavaScript für die Funktion von AMPHTML Ads aktiviert sein muss, erfüllt der Block <noscript> in einer AMPHTML Ad keinen Zweck und verbraucht nur unnötig Bandbreite.
  • Im Gegensatz zu allgemeinem AMP ist <script type="application/ld+json"> verboten.
    • Begründung: JSON LD wird für das Markup strukturierter Daten auf Hostseiten verwendet. Ad Creatives sind jedoch keine eigenständigen Dokumente und enthalten keine strukturierten Daten. Darin enthaltene JSON LD Blöcke würden nur unnötig Bandbreite verbrauchen.
  • Alle anderen Skriptregeln und Ausnahmen werden von allgemeinem AMP übernommen.