Erstelle ein Gerüst für die Ad

Der für eine AMPHTML Ad erforderliche HTML Code ist eine Variante des AMPHTML Codes für AMP Seiten. Erstellen wir das Gerüst der AMPHTML Ad, um den erforderlichen Code kennenzulernen.

Erstelle mit deinem bevorzugten Texteditor eine HTML Datei mit dem Namen my-amphtml-ad.html. Kopiere das folgende HTML Markup in diese Datei:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>My amphtml ad</title>
    <meta name="viewport" content="width=device-width" />
  </head>
  <body></body>
</html>

Dieses Markup gilt für eine einfache, gültige HTML Datei. Beachte, dass wir das Ansichtsfenstertag meta eingefügt haben, um das Ansichtsfenster responsiv zu machen.

Jetzt können wir den HTML Code abändern und in eine AMPHTML Ad verwandeln.

Füge im Tag <html> das Attribut ⚡4ads hinzu, um das Dokument als AMPHTML Ad zu kennzeichnen. Alternativ kannst du das ebenfalls gültige Attribut amp4ads angeben.

<!DOCTYPE html>
<html ⚡4ads>
  <head>
    ...
  </head>
</html>

HINWEIS: Im Gegensatz zu AMP Seiten benötigen AMPHTML Ads das Tag <link rel="canonical"> nicht.

Für AMPHTML Ads ist eine eigene Version der AMP Runtime erforderlich. Füge daher das folgende Tag <script> im Abschnitt <head> deines Dokuments hinzu:

<script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>

AMPHTML Ad Creatives erfordern eine andere, wesentlich einfachere Zeile für Boilerplate Stil als AMP Seiten. Füge im Abschnitt <head> den folgenden Code hinzu:

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

Um den Stil deiner AMPHTML Ad festzulegen, muss dein CSS mithilfe der Tags <style amp-custom> im Abschnitt <head> inline in das AMPHTML Dokument eingebettet werden. Da wir eine einfache Ad rendern, die aus einem Bild besteht, benötigen wir kein CSS und werden diese Tags daher nicht hinzufügen.

HINWEIS: Bei AMPHTML Ads beträgt die maximale Größe für ein Inline Stylesheet 20 Kilobyte. Weitere Informationen zu den Anforderungen an CSS findest du in der Spezifikation für AMPHTML Ads.

Nachfolgend findest du den vollständigen Code für deine HTML Datei:

<!DOCTYPE html>
<html ⚡4ads>
  <head>
    <meta charset="utf-8" />
    <title>My amphtml ad</title>
    <meta name="viewport" content="width=device-width" />
    <script async src="https://cdn.ampproject.org/amp4ads-v0.js"></script>
    <style amp4ads-boilerplate>
      body {
        visibility: hidden;
      }
    </style>
  </head>
  <body></body>
</html>

Jetzt hast du eine gültige AMPHTML Ad, wenn auch eine ziemlich leere. Erstellen wir nun die Bildanzeige.

Erste Schritte