Spezifikation für AMP für Ads

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:

<meta name="amp4ads-id"
  content="vendor=adsense,type=creative-id,id=1283474">
<meta name="amp4ads-id"
  content="vendor=adsense,type=impression-id,id=xIsjdf921S">

<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>

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

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.

• amp-accordion
• amp-ad-exit
• amp-analytics
• amp-anim
• amp-animation
• amp-audio
• amp-bind
• amp-carousel
• amp-fit-text
• amp-font
• amp-form
• amp-img
• amp-layout
• amp-lightbox
• amp-mraid, auf experimenteller Basis. Wenn du dieses Tag verwenden möchtest, erstelle bitte ein Issue unter wg-monetization.
• amp-mustache
• amp-pixel
• amp-position-observer
• amp-selector
• amp-social-share
• amp-video

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.