Accelerated Mobile Pages – erweiterte Konzepte

1. Übersicht

Dieses Codelab setzt die Konzepte fort, die in Accelerated Mobile Pages Foundations eingeführt wurden. Sie sollten das vorherige Codelab bereits abgeschlossen haben, bevor Sie mit diesem Lab beginnen, oder zumindest die grundlegenden Konzepte von AMP kennen.

In diesem Codelab erfahren Sie, wie AMP mit Werbung, Analysen, Videoeinbettung, Einbindung von sozialen Medien, Bilderkarussells und mehr umgeht. Dazu bauen Sie auf dem Beispiel aus dem Codelab zu den Grundlagen auf und fügen diese Funktionen über die verschiedenen AMP-Komponenten hinzu.

Lerninhalte

• Displayanzeigen mit amp-ad
• YouTube-Videos, Twitter-Karten und responsive Textelemente einbetten
• Mit amp-carousel können Sie Karussells mit Bildern und Kombinationen von Inhalten erstellen.
• Einfache Tracking-Muster mit amp-analytics.
• Möglichkeiten zum Hinzufügen der Website-Navigation zu Ihrer Seite
• So funktionieren Schriftarten mit AMP.

Voraussetzungen

• Der Beispielcode
• Chrome oder ein gleichwertiger Browser, mit dem die JavaScript-Konsole geprüft werden kann
• Python (vorzugsweise 2.7) oder die Chrome-Erweiterung „200 OK Web Server“
• Code-Editor (z. B. Atom, Sublime, Notepad++)

2. Beispielcode abrufen

Sie können den gesamten Beispielcode auf Ihren Computer herunterladen:

Zip-Datei herunterladen

… oder klonen Sie das GitHub-Repository über die Befehlszeile:

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-advanced.git

Sie laden eine ZIP-Datei mit mehreren Beispielressourcendateien und der Startseite article.html herunter.

Entpacken Sie den Ordner und wechseln Sie über die Befehlszeile auf Ihrem Computer in das Verzeichnis.

3. Beispielseite ausführen

Um unsere Beispielseite zu testen, müssen wir über einen Webserver auf die Dateien zugreifen. Es gibt verschiedene Möglichkeiten, einen temporären lokalen Webserver für Testzwecke zu erstellen. In diesem Codelab werden Anleitungen für drei verfügbare Optionen bereitgestellt:

• Die Google Chrome-App „Web Server for Chrome“: Dies ist der empfohlene Ansatz, da es sich um die einfachste und plattformübergreifende Lösung handelt. Hinweis: Für diese Methode muss Google Chrome installiert sein.
• Firebase Hosting: Eine alternative Option, wenn Sie auch unsere neue Hostingplattform für statische Assets „Firebase Hosting“ ausprobieren möchten. Standardmäßig SSL-fähig.
• Lokaler HTTP-Python-Server: Hierfür ist Zugriff auf die Befehlszeile erforderlich.

Hinweis: Es wird dringend empfohlen, HTTPS in Produktionsumgebungen zu verwenden. HTTPS bietet neben der Sicherheit auch andere Vorteile, z. B. für die Suchmaschinenoptimierung. Weitere Informationen

Option 1: Web Server for Chrome

Die App „Web Server for Chrome“ finden Sie über diesen Link im Chrome Web Store.

Nach der Installation der Chrome-App müssen Sie über die Schaltfläche „Ordner auswählen“ einen bestimmten Ordner für die App festlegen. Wählen Sie für dieses Codelab den Ordner aus, in dem Sie die Beispieldateien für das Codelab entpackt haben.

Außerdem sollten Sie die Option „index.html automatisch anzeigen“ aktivieren und den Port auf „8000“ festlegen. Sie müssen den Webserver neu starten, damit diese Änderungen wirksam werden.

Rufen Sie diese URL auf:

http://localhost:8000/article.amp.html

Wenn die oben genannte URL erfolgreich geladen wird, können Sie mit dem nächsten Abschnitt fortfahren.

Option 2: Firebase Hosting

Wenn Sie unser neues statisches Webhosting von Firebase ausprobieren möchten, folgen Sie dieser Anleitung, um Ihre AMP-Website auf einer Firebase-Hosting-URL bereitzustellen.

Firebase Hosting ist ein Anbieter für statisches Hosting, mit dem Sie schnell eine statische Website und ihre Assets, einschließlich HTML-, CSS- und JavaScript-Dateien, bereitstellen und hosten können. Nutzer profitieren von einer geringeren Latenz, da statische Inhalte in einem Content Delivery Network (CDN) mit weltweit verteilten Points of Presence (PoPs) im Cache gespeichert werden.

Firebase Hosting wird immer über SSL bereitgestellt. Das ist ideal für AMP und das Web im Allgemeinen. Wenn Sie sich nur auf AMP konzentrieren möchten, ignorieren Sie diese Option einfach.

Option 3: HTTP-Python-Server

Wenn Sie Chrome nicht verwenden oder Probleme bei der Installation der Chrome-Erweiterung haben, können Sie auch Python über die Befehlszeile verwenden, um einen lokalen Webserver zu starten.

Um den integrierten HTTP-Server von Python über die Befehlszeile auszuführen, führen Sie einfach Folgendes aus:

python -m SimpleHTTPServer

Rufen Sie diese URL auf:

http://localhost:8000/article.amp.html

4. AMP-Kernkomponenten kennenlernen

Das Komponentensystem von AMP ermöglicht es uns, effiziente und responsive Funktionen für unsere Artikel zu entwickeln – und das mit minimalem Aufwand. Die AMP-Kern-JavaScript-Bibliothek im <head>-Tag enthält mehrere Kernkomponenten:

• amp-ad: Container zum Anzeigen einer Anzeige.
• amp-img: Ersatz für das HTML-Tag „img“.
• amp-pixel: Wird als Tracking-Pixel verwendet, um Seitenaufrufe zu zählen.
• amp-video: Ersatz für das HTML5-Video-Tag.

Alle oben genannten Kernkomponenten können sofort in einem AMP-Dokument verwendet werden. In unserem Beispielcode wird amp-img bereits auf unserer Seite verwendet. Im Codelab „AMP Foundations“ haben wir uns angesehen, wie es mit dem AMP-Layoutsystem zusammenhängt. Im nächsten Kapitel sehen wir uns amp-ad an.

Hinweis: Das Einbetten von HTML5-Videos und Tracking-Pixeln sind wichtige Funktionen in der Webentwicklung. Wenn Sie diese Komponenten einbetten möchten, können Sie sich die entsprechenden Referenzseiten hier und hier ansehen.

5. Anzeige hinzufügen

Die Beispielseite article.amp.html sollte so aussehen:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script type="application/ld+json">
    {
     "@context": "http://schema.org",
     "@type": "NewsArticle",
     "mainEntityOfPage":{
       "@type":"WebPage",
       "@id":"https://example.com/my-article.html"
     },
     "headline": "My First AMP Article",
     "image": {
       "@type": "ImageObject",
       "url": "https://example.com/article_thumbnail1.jpg",
       "height": 800,
       "width": 800
     },
     "datePublished": "2015-02-05T08:00:00+08:00",
     "dateModified": "2015-02-05T09:20:00+08:00",
     "author": {
       "@type": "Person",
       "name": "John Doe"
     },
     "publisher": {
       "@type": "Organization",
       "name": "⚡ AMP Times",
       "logo": {
         "@type": "ImageObject",
         "url": "https://example.com/amptimes_logo.jpg",
         "width": 600,
         "height": 60
       }
     },
     "description": "My first experience in an AMPlified world"
    }
    </script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

Die obige Seite ist einfach gehalten. Das Interessanteste daran ist, dass sie sowohl die AMP-Validierung als auch die Validierung der Schema.org-Metadaten für Suchmaschinen besteht. Wenn diese Seite auf einer Nachrichtenwebsite bereitgestellt würde, käme sie für die Aufnahme in das neue Google-Suchkarussell für AMP-Inhalte infrage. Sie ist also ein guter Ausgangspunkt für unsere Arbeit.

Bevor wir die Seite ändern, öffnen wir die Chrome-Entwicklertools. Wenn Sie an einer Website arbeiten (insbesondere an einer für Mobilgeräte optimierten Website), ist es in der Regel sinnvoll, beim Testen im Browser eine mobile Umgebung zu simulieren. Beginnen Sie, indem Sie die Entwicklerkonsole in Chrome über Menu > More Tools > Developer Tools öffnen:

Sehen Sie sich nun die JavaScript-Ausgabe in der Entwicklerkonsole an. Achten Sie darauf, dass der Tab „Console“ ausgewählt ist:

Klicken Sie nun in der Entwicklerkonsole auf die Schaltfläche für die Gerätesimulation. Es wird durch ein Smartphone und ein Tablet dargestellt, die nebeneinander liegen:

Stellen Sie im angezeigten Menü das Gerät auf „Nexus 5X“ ein:

Jetzt können wir mit der Arbeit an der Seite selbst beginnen. Wir fügen jetzt eine Anzeige in unseren AMP-Artikel ein.

Alle Anzeigen in AMP werden mit der Komponente amp-ad erstellt. Mit dieser Komponente können wir unsere Anzeigen auf verschiedene Arten konfigurieren, z. B. Breite, Höhe und Layoutmodus. Bei vielen Werbeplattformen ist jedoch eine zusätzliche Konfiguration erforderlich, z. B. die Konto-ID für das Werbenetzwerk, welche Anzeige ausgeliefert werden soll oder Optionen für die Ausrichtung der Werbung. Für amp-ad werden die verschiedenen erforderlichen Optionen einfach als HTML-Attribute angegeben.

Hier sehen Sie ein Beispiel für eine Double Click-Anzeige:

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/image/static">
</amp-ad>

Wie Sie sehen, ist dies eine sehr einfache Konfiguration. Achten Sie auf das Attribut type. Es gibt der amp-ad-Komponente an, welche Anzeigenplattform Sie verwenden möchten. In diesem Fall wollten wir die Plattform von Double Click und der Typwert war daher doubleclick.

Das Attribut data-slot ist eindeutiger. Alle Attribute, die in amp-ad mit data- beginnen, sind anbieterspezifische Attribute. Das bedeutet, dass nicht alle Anbieter dieses Attribut benötigen und nicht alle Anbieter reagieren, wenn es angegeben wird. Vergleichen Sie beispielsweise das obige DoubleClick-Beispiel mit einer Testanzeige von der A9-Plattform:

<amp-ad
  width="300"
  height="250"
  type="a9"
  data-aax_size="300x250"
  data-aax_pubname="test123"
  data-aax_src="302">
</amp-ad>

Fügen Sie beide oben genannten Beispiele direkt nach dem <header>-Tag in Ihren Artikel ein. Aktualisieren Sie die Seite. Es sollten zwei Testanzeigen angezeigt werden:

Wichtig: In der Entwicklerkonsole können Fehler wie „Mixed Content“ (Gemischte Inhalte) oder „XMLHttpRequest cannot load“ (XMLHttpRequest kann nicht geladen werden) angezeigt werden. Ersteres hängt wahrscheinlich mit der A9-Anzeige zusammen, da nicht alle geladenen Inhalte sicher sind. Dies ist eine wichtige Anforderung für alle Anzeigen, die auf AMP ausgeliefert werden.

Sehen wir uns einige weitere Optionen an, die Sie mit dem Doppelklick verwenden können. Fügen Sie Ihrer Seite die folgenden beiden Konfigurationen für geografisches Targeting hinzu:

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/uk">
  <div fallback>No ad appeared because you're not browsing from the UK!</div>
</amp-ad>

<amp-ad
  width="300"
  height="250"
  type="doubleclick"
  data-slot="/35096353/amptesting/geo/us">
  <div fallback>No ad appeared because you're not browsing from the US!</div>
</amp-ad>

Leider kann das Geotargeting nicht über den Code der Seite selbst gesteuert werden. Diese Testanzeigen wurden jedoch bereits im DoubleClick-Dashboard so konfiguriert, dass sie nur in bestimmten Ländern ausgeliefert werden, nämlich im Vereinigten Königreich und in den USA.

Aktualisieren Sie die Seite und sehen Sie nach. Der folgende Screenshot wurde in Australien aufgenommen. Daher wird keine Anzeige geladen:

Das obige Beispiel für geografisches Targeting zeigt, dass das amp-ad-Tag flexibel genug für alle Arten von Funktionen der Werbeplattform ist.

Hinweis: Möglicherweise sehen Sie in diesen amp-ad-Tags zusätzliche div-Tags mit einem Attribut namens „fallback“. Können Sie erraten, was das Fallback-Attribut angibt? Das AMP-Ladesystem wird dadurch angewiesen, den Inhalt dieses Elements nur dann anzuzeigen, wenn das übergeordnete Element nicht geladen werden kann. Das bedeutet, dass das übergeordnete Element auf das untergeordnete Element zurückgreift – daher der Begriff „Fallback“.

Die folgenden Werbenetzwerke werden derzeit unterstützt:

• A9
• Adblade
• Adform
• AdReactor
• AdSense
• AdTech
• Criteo
• Dot und Medien
• DoubleClick
• Flite
• Industrybrains
• OpenX
• plista
• Smart AdServer
• Yieldmo
• Revcontent
• TripleLift
• Teads
• I-Mobile
• Webediads

Informationen zu den neuesten unterstützten Anzeigenplattformen finden Sie auf der Dokumentationsseite zur AMP-Anzeigenkomponente.

Im nächsten Kapitel sehen wir uns erweiterte AMP-Komponenten an und erfahren, wie wir sie in unsere AMP-Dokumente einfügen.

Hinweis: Im AMP-Dokument darf kein JavaScript von Werbenetzwerken ausgeführt werden. Stattdessen lädt die AMP-Laufzeit einen iFrame aus einer anderen Quelle (über die iFrame-Sandbox) als das AMP-Dokument und führt den JS-Code des Anzeigennetzwerks in dieser iFrame-Sandbox aus.

Wichtig: Die Spezifikation von amp-ad wird sich im Laufe der Zeit wahrscheinlich erheblich weiterentwickeln. Der aktuelle Ansatz soll das Format so vorbereiten, dass Anzeigen ausgeliefert werden können.

6. Inhalte mit erweiterten Komponenten maximieren

Sie haben jetzt ein einfaches AMP-Dokument mit Text, einem Bild und sogar einer auf der Seite eingebetteten Anzeige. Das sind die wichtigsten Elemente, um eine Geschichte zu erzählen und Ihre Inhalte zu monetarisieren. Moderne Websites bieten jedoch oft mehr Funktionen als nur Bilder und Text.

Wir wollen unser AMP-Dokument auf die nächste Stufe heben und uns ansehen, welche Komponenten über die oben genannten Kernkomponenten hinaus verfügbar sind.

In diesem Kapitel fügen wir einige erweiterte Webfunktionen hinzu, die häufig in Nachrichtenartikeln zu finden sind:

• YouTube-Videos
• Tweets
• Zitate aus Artikeln

YouTube-Video einbetten

Versuchen wir, ein YouTube-Video in das Dokument einzubetten. Mit dem folgenden Code wird ein Video eingebettet und auf Ihrer Seite hinzugefügt:

<amp-youtube
  data-videoid="mGENRKrdoGY"
  layout="responsive"
  width="480"
  height="270">
  <div fallback>
    <p>The video could not be loaded.</p>
  </div>
</amp-youtube>

Aktualisieren Sie die Seite und sehen Sie sie sich an. Statt eines Videos sollte der Text „Das Video konnte nicht geladen werden.“ angezeigt werden.

Auch wenn dein Browser YouTube-Videos problemlos wiedergeben kann, wird dieser Fehler angezeigt. Warum? Das Video konnte nicht geladen werden, weil die Komponente selbst nicht geladen werden konnte.

Nicht alle Komponenten sind in der JavaScript-Datei der AMP-Kernbibliothek enthalten. Wir müssen eine zusätzliche JavaScript-Anfrage für die YouTube-Komponente einfügen. Für alle Komponenten mit Ausnahme eines Kernsatzes sind diese zusätzlichen JavaScript-Referenzen erforderlich.

Fügen Sie dem <head>-Tag die folgende Anfrage hinzu:

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Aktualisiere die Seite. Das YouTube-Video sollte jetzt angezeigt werden:

Wir haben noch einmal die Breite und Höhe des Videos angegeben, damit das Seitenverhältnis vom AMP-Layoutsystem berechnet werden kann. Außerdem wurde der Layouttyp auf „Responsiv“ festgelegt. Das Video füllt also die Breite des übergeordneten Elements aus.

Weitere Informationen zur YouTube-Komponente

Hinweis: Neben der YouTube-Komponente enthält AMP eine generische HTML5-Videokomponente mit dem Namen amp-video und eine AMP-Komponente für den Brightcove Video Cloud- oder Perform-Player mit dem Namen amp-brightcove. Weitere Beispiele für die Videowiedergabe, einschließlich Facebook-, Instagram-, Vine-, Twitter- und Dailymotion-Videos, finden Sie unter AMP By Example.

Hinweis: Das Fallback-Attribut ist nützlich, um Informationen bereitzustellen, falls eine Komponente nicht geladen werden kann. Was passiert, wenn der Browser des Nutzers eine bestimmte AMP-Komponente nicht unterstützt? Es ist besser für die Nutzer, wenn sie darüber informiert werden, warum bestimmte Funktionen möglicherweise fehlen.

Tweet anzeigen

Das Einbetten vorformatierter Tweets von X (ehemals Twitter) ist eine gängige Funktion von Nachrichtenartikeln. Die AMP-Twitter-Komponente bietet diese Funktionalität ganz einfach.

Fügen Sie zuerst die folgende JavaScript-Anfrage in das <head>-Tag Ihres Dokuments ein:

<script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>

Fügen Sie nun in Ihrem Artikel diesen Code ein, um den Tweet einzubetten:

<amp-twitter
  width="486"
  height="657"
  layout="responsive"
  data-tweetid="638793490521001985">
</amp-twitter>

Das Attribut data-tweetid ist ein weiteres Beispiel für ein benutzerdefiniertes Attribut, das von einem bestimmten Plattformanbieter benötigt wird. In diesem Fall erkennt Twitter das Attribut data-tweetid als entsprechenden Tweet, der in die Seite eingebettet werden soll.

Aktualisieren Sie Ihren Browser und sehen Sie sich die Seite an. Der Tweet sollte angezeigt werden:

Weitere Informationen zur Twitter-Komponente

Hinweis: AMP enthält noch mehr Komponenten zum Einbetten von Inhalten aus sozialen Netzwerken. Instagram-Komponente und Vine-Komponente

Zitat aus einem Artikel hervorheben

Ein gängiges Element in Nachrichtenartikeln ist es, besonders ansprechende Textausschnitte aus dem Artikel hervorzuheben. So kann beispielsweise ein Zitat aus einer bestimmten Quelle oder eine wichtige Tatsache in einer größeren Schriftart wiederholt werden, um die Aufmerksamkeit des Lesers zu erregen.

Da jedoch nicht alle Zitate oder Textausschnitte unbedingt die gleiche Länge haben, kann es schwierig sein, die größere Schriftgröße mit dem Platz in Einklang zu bringen, den der jeweilige Text auf der Seite einnimmt.

AMP enthält eine weitere Komponente speziell für diese Art von Situation, nämlich amp-fit-text. Damit können Sie ein Element mit fester Breite und Höhe sowie eine maximale Schriftgröße definieren. Die Schriftgröße wird von der Komponente automatisch so skaliert, dass der Text des Zitats in die verfügbare Breite und Höhe passt.

Probieren wir es aus. Fügen Sie zuerst die Bibliothek der Komponente in das <head>-Tag ein:

<script async custom-element="amp-fit-text" src="https://cdn.ampproject.org/v0/amp-fit-text-0.1.js"></script>

Fügen Sie Ihrer Seite Folgendes hinzu:

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  Big, bold article quote goes here.
</amp-fit-text>

Aktualisieren Sie die Seite und sehen Sie sich das Ergebnis an.

Jetzt können Sie weiter experimentieren. Was passiert, wenn das Angebot viel kürzer ist?

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
  #YOLO
</amp-fit-text>

Oder wie wäre es mit einem längeren Zitat?

<amp-fit-text width="400" height="75" layout="responsive" max-font-size="42">
   And the Raven, never flitting, still is sitting, still is sitting. On the pallid bust of Pallas just above my chamber door; And his eyes have all the seeming of a demon's that is dreaming, And the lamp-light o'er him streaming throws his shadow on the floor; And my soul from out that shadow that lies floating on the floor. Shall be lifted—nevermore!
</amp-fit-text>

Als letztes Experiment mit amp-fit-text können Sie einen kurzen Text wie #YOLO mit einer viel größeren Höhe (z. B. 400) erstellen und den Attributwert „max-font-size“ von 42 beibehalten. Wie würde die resultierende Seite aussehen? Wird der Text vertikal zentriert oder wird die Höhe des amp-fit-text-Tags verkleinert, damit er der maximalen Schriftgröße entspricht? Versuchen Sie, die Frage zu beantworten, bevor Sie das Dokument bearbeiten.

7. Komplexe Karussells

Ein weiteres gängiges Feature in der Webentwicklung ist ein Karussell. AMP enthält eine generische Komponente, die genau dafür entwickelt wurde. Beginnen wir mit einem einfachen Beispiel, z. B. einem Karussell mit Bildern.

Denken Sie daran, die Karussellkomponentenbibliothek einzubinden, indem Sie dem <head>-Tag Ihres Dokuments die folgende JavaScript-Anfrage hinzufügen:

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Als Nächstes betten wir ein einfaches Bildkarussell mit einem responsiven Layout und einer vordefinierten Breite und Höhe ein. Fügen Sie Ihrer Seite Folgendes hinzu:

<amp-carousel layout="fixed-height" height="168" type="carousel" >
  <amp-img src="mountains-1.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168"></amp-img>
</amp-carousel>

Aktualisieren Sie die Seite. Sie sollten jetzt ein Karussell sehen:

Die Karussellkomponente kann auf verschiedene Arten konfiguriert werden. Ändern Sie den Typ stattdessen in slides und sehen Sie sich das Ergebnis an. Ändern Sie das Attribut layout des amp-carousel-Elements und der darin enthaltenen Bilder ebenfalls in responsive.

Anstelle einer scrollenden Liste von Elementen wird jetzt jeweils nur ein Element angezeigt. Versuchen Sie, horizontal zu wischen, um die Elemente durchzugehen. Wenn Sie zum dritten Element wischen, können Sie nicht weiter wischen.

Fügen Sie als Nächstes das Attribut loop hinzu. Aktualisieren Sie die Seite und wischen Sie sofort nach links. Das Karussell wird in einer Endlosschleife wiedergegeben.

Schließlich soll das Karussell alle 2 Sekunden automatisch abgespielt werden. Fügen Sie der Seite das Attribut autoplay und das Attribut „delay“ mit dem Wert 2000 hinzu, z. B. so: delay="2000".

Das Endergebnis sollte in etwa so aussehen:

<amp-carousel layout="responsive" width="300" height="168" 
         type="slides" autoplay delay="2000" loop>
  <amp-img src="mountains-1.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-2.jpg" width="300" height="168" layout="responsive"></amp-img>
  <amp-img src="mountains-3.jpg" width="300" height="168" layout="responsive"></amp-img>
</amp-carousel>

Aktualisieren Sie die Seite und probieren Sie es aus.

Hinweis: Im Karussell wird der Layouttyp fixed-height verwendet. Das ist eine Anforderung des Typs carousel, während für den Typ slides der Layouttyp responsive erforderlich ist. Elemente mit fester Höhe nehmen den verfügbaren Platz ein, behalten aber ihre Höhe bei. Das Attribut „height“ muss definiert sein, während das Attribut „width“ nicht vorhanden sein oder auf „auto“ gesetzt sein sollte, damit fixed-height funktioniert.

Bildkarussells sind zwar toll, aber was ist, wenn wir komplexere Inhalte in unserem Karussell präsentieren möchten? Wir können auch eine Anzeige, Text und ein Bild in einem einzigen Karussell kombinieren. Kann amp-carousel wirklich eine solche Mischung gleichzeitig verarbeiten? Ja, werden sie.

Fügen Sie zuerst diesen Stil der Seite hinzu, damit die Komponenten „amp-fit-text“ und „amp-carousel“ sicher zusammenarbeiten:

amp-fit-text {
    white-space: normal;
}

Fügen Sie nun den folgenden Karussellcode in Ihre Seite ein:

<amp-carousel layout="fixed-height" height="250" type="carousel" >
    <amp-img src="blocky-mountains-1.jpg" width="300" height="250"></amp-img>

    <amp-ad width="300" height="250"
      type="doubleclick"
      data-slot="/35096353/amptesting/image/static">
        <div placeholder>This advert is still loading.</div>
    </amp-ad>

    <amp-fit-text width="300" height="250" layout="fixed">
        Big, bold article quote goes here.
    </amp-fit-text>
</amp-carousel>

Aktualisieren Sie die Seite. Sie sollten dann Folgendes sehen:

Weitere Informationen zur Karussellkomponente

Hinweis: Im letzten Beispiel enthält die amp-ad-Komponente ein untergeordnetes div-Element mit dem Attribut placeholder. Wir hatten bereits im Codelab mit dem fallback-System ein ähnliches Szenario mit amp-ad. Was ist der Unterschied zwischen einem Platzhalter und einem Fallback? Fallback-Elemente werden angezeigt, wenn das übergeordnete Element nicht geladen werden kann, z.B. wenn keine Anzeige verfügbar war. placeholder-Elemente werden anstelle des übergeordneten Elements angezeigt, während es geladen wird. Jedes Attribut begrenzt den Ladevorgang des übergeordneten Elements.

Wichtig: Leider wird für die amp-ad-Komponente im Hintergrund ein iFrame verwendet, der die Wischbewegungen des Karussells beeinträchtigen kann. Dieses Problem ist uns bekannt und wir arbeiten an einer Lösung.

8. Tracking mit amp-analytics

Analytics-Plattformen werden in der Regel über Inline-JavaScript-Snippets und Funktionsaufrufe in Websites eingebunden. Dadurch werden Ereignisse ausgelöst, die an das Analytics-System zurückgesendet werden. AMP bietet eine flexible JSON-Konfigurationssyntax, um diesen Prozess für mehrere Analysepartner zu wiederholen.

Im Folgenden sehen Sie ein Beispiel für das herkömmliche Google Analytics-Tracking mit JavaScript, das wir in das JSON-Format von amp-analytics umschreiben werden. Zuerst der herkömmliche JavaScript-Ansatz:

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>

Das obige Beispiel ist recht einfach. Es wird eine Benachrichtigung für das zu erfassende Seitenaufrufereignis gesendet.

Um all das in der Komponente „amp-analytics“ zu replizieren, binden wir zuerst die Komponentenbibliothek in den <head> unseres Dokuments ein:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

Anschließend fügen wir die Komponente so ein:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    }
  }
}
</script>
</amp-analytics>

Es mag komplizierter erscheinen, ist aber tatsächlich ein sehr flexibles Format zur Beschreibung verschiedener Arten von Ereignissen. Außerdem enthält das JSON-Format nicht den Blob mit JavaScript-Code aus dem herkömmlichen Beispiel, was zu Fehlern führen könnte, wenn er versehentlich geändert wird.

Im JSON-Format enthält der Schlüssel „triggers“ eine Reihe von Schlüsseln, die alle Ereignistrigger darstellen, die wir erfassen. Die Schlüssel dieser Trigger sind Beschreibungen des Ereignisses, z. B. „default pageview“ (Standardseitenaufruf) oben. Der Schlüsselwert für den Titel bezieht sich auf den Namen der angezeigten Seite.

Wenn wir das obige Beispiel erweitern, können wir einen weiteren Trigger hinzufügen: „Klicken Sie auf #header trigger“:

<amp-analytics type="googleanalytics">
<script type="application/json">
{
  "vars": {
    "account": "UA-YYYY-Y"
  },
  "triggers": {
    "default pageview": {
      "on": "visible",
      "request": "pageview",
      "vars": {
        "title": "Name of the Article"
      }
    },
    "click on #header trigger": {
      "on": "click",
      "selector": "#header",
      "request": "event",
      "vars": {
        "eventCategory": "examples",
        "eventAction": "clicked-header"
      }
    }
  }
}
</script>
</amp-analytics>

Dieser Trigger funktioniert genau wie beschrieben: Mit dem DOM-Selektor „#header“ können wir nach einem Tag mit der ID „header“ suchen. Wenn darauf geklickt oder auf dem Gerät getippt wird, senden wir die Ereignisaktion „clicked-header“ mit dem Kategorielabel „examples“ an die Analyseplattform.

Wenn Sie eine benutzerdefinierte Tracking-Plattform haben, die Sie einbinden möchten, können Sie weiterhin amp-analytics verwenden und eigene personalisierte URL-Endpunkte für die Tracking-Informationen definieren. Weitere Informationen zur amp-analytics-Komponente

Hinweis: In allen diesen Analytics-Beispielen sollte „UA-YYYY-Y“ durch den Google Analytics-Tracking-Code Ihrer eigenen Website ersetzt werden.

Hinweis: Wenn Sie an einfacheren Tracking-Systemen interessiert sind, sollten Sie sich amp-pixel ansehen. Wenn Sie nur Seitenaufrufe erfassen müssen, ist das eine schlankere Lösung als „amp-analytics“, da sie nur die Anforderungen des herkömmlichen Pixel-Trackings erfüllt. Weitere Informationen

Wichtig: Die Analysekomponente befindet sich noch in der Entwicklung. Im Zuge der Weiterentwicklung der amp-analytics-Komponente werden weitere Analyseplattformen und Ereignistypen hinzukommen. Die neuesten Informationen finden Sie im Referenzdokument.

9. Navigation auf Ihrer Website

Eine gängige Anforderung für mobile Websites ist das Einbinden eines Navigationsmenüs. Diese Menüs können viele verschiedene Formen annehmen. Hier einige Beispiele für die Darstellung der Navigation in einem AMP-Dokument:

1. Link zurück zur Startseite – die einfachste Option.
2. Ein Unterüberschriftenmenü über die Karussellkomponente.

Link zur Startseite

Der einfachste Weg, Nutzern den Zugriff auf die regulären Navigationsoptionen Ihrer Website zu ermöglichen, besteht darin, sie einfach zurück zur regulären Website-Oberfläche zu leiten.

Fügen Sie diesen HTML-Link dem <header>-Tag hinzu:

<header>
  <a href="homepage.html">
    <amp-img class="home-button" src="icons/home.png" width="36" height="36"></amp-img>
  </a>

  News Site
</header>

Fügen Sie diese Regel in Ihr Inline-CSS ein:

.home-button {
  float: left;
}

Aktualisieren Sie nun die Seite. Oben links auf der Seite sollte ein Link zu homepage.html zu sehen sein. Wenn Sie auf diesen Link klicken, werden Sie feststellen, dass er nirgendwohin führt.

Dieser Link kann durch die URL der Startseite Ihrer Website ersetzt werden, damit Nutzer über die reguläre Navigation Ihrer Website zu anderen Bereichen Ihrer Website gelangen können.

Wie bereits erwähnt, ist dies der einfachste Ansatz, da Sie die vorhandene Navigation Ihrer Website nutzen. Als Nächstes sehen wir uns zwei Alternativen an.

Menü mit Unterüberschriften

Eine weitere Möglichkeit, dieses Problem zu umgehen, besteht darin, das Navigationsmenü Ihrer Website im AMP-Dokument zu präsentieren. Um den Platzbedarf zu begrenzen, können wir ein Karussell verwenden, um ein scrollbares Menü unter der Kopfzeile der Website zu präsentieren.

Da wir die Karussellkomponente benötigen, müssen Sie das JavaScript der Komponente dem <head>-Tag Ihrer Seite hinzufügen:

<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>

Fügen Sie dieses HTML-Snippet direkt unter dem <header>-Tag ein:

...
</header>
<div class="sub-menu">
  <amp-carousel layout="fixed-height" height="38" type="carousel">
    <a href="#example1">Example 1</a>
    <a href="#example2">Example 2</a>
    <a href="#example3">Longer Named Example 3</a>
    <a href="#example4">Example 4</a>
    <a href="#example5">Example 5</a>
    <a href="#example6">Example 6</a>
  </amp-carousel>
</div>
<article>
...

Fügen Sie diese Regeln in Ihr Inline-CSS ein:

.sub-menu {
  background: black;
}

.sub-menu a {
  display: block;
  background: tomato;
  margin: 5px;
  padding: 5px;
  color: white;
  text-decoration: none;
}

Aktualisieren Sie nun die Seite. Unter dem Titel des Artikels sollte ein Menü mit Links angezeigt werden. In diesem Menü kann horizontal gescrollt werden, um viele Navigationslinks zu speichern.

Mit dieser Art von Untermenünavigation können Sie viele Links speichern, ohne zu viel Platz auf Ihrer Seite zu beanspruchen.

10. Schriftarten hinzufügen

Wie bereits erwähnt, sind in AMP-Dokumenten keine externen Stylesheet-Anfragen zulässig. Es gibt jedoch eine Ausnahme von dieser Regel: Schriftarten.

Schriftarten sind ein wichtiger Bestandteil der Nutzererfahrung beim Lesen von Artikeln im Web. Da Webbrowser Schriftartdateien über externe Stylesheet-Anfragen abrufen, ist dieser Ausschluss in AMP erforderlich.

Versuchen wir, dem Dokument einen Verweis auf die Schriftart „Raleway“ hinzuzufügen:

<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Raleway">

Aktualisieren Sie nun Ihr CSS, um einen Verweis auf Raleway einzufügen:

body {
  width: auto;
  margin: 0;
  padding: 0;
  font-family: 'Raleway', sans-serif;
}

Aktualisieren Sie die Seite, um das neue Design zu sehen. Sehen Sie sich auch die Ausgabe des Validators an. Sie werden feststellen, dass es keine Beschwerden bezüglich dieser externen Anfrage gibt.

Hinweis: Für das Einbetten einer Schriftart in Ihr Dokument sind keine zusätzlichen Komponenten erforderlich. Es gibt jedoch eine Komponente namens „amp-font“. Sie wird nicht zum Laden von Webfonts verwendet, sondern kann dazu genutzt werden, zu erkennen, ob ein Webfont erfolgreich geladen wurde oder nicht, und bei Bedarf entsprechend zu reagieren.

Mit dieser Funktion können Sie Ihren Text ausblenden, bis Ihre Schriftart vollständig geladen ist. So wird verhindert, dass der Nutzer sieht, wie der Text von der temporären Schriftart zur eigentlichen Schriftart wechselt. Wenn die Schriftart dann nicht funktioniert, können Sie stattdessen die temporäre Schriftart anzeigen. Schließlich wäre es am schlimmsten, wenn der Nutzer überhaupt keinen Text lesen könnte. Weitere Informationen

11. Glückwunsch!

Sie haben das Codelab zu AMP für Fortgeschrittene abgeschlossen und viele wichtige Komponenten von AMP kennengelernt.

Wir hoffen, dass Sie jetzt wissen, wie Sie mit amp-ad und amp-analytics verschiedene Werbeplattformen und Analyseanbieter unterstützen können. Hier finden Sie eine vollständige Liste der verfügbaren AMP-Komponenten.

Im Folgenden finden Sie einige zusätzliche Themen und Links, mit denen Sie Ihre Fähigkeiten noch weiter ausbauen können.

• AMP By Example: Ein umfangreicher Katalog mit Beispielen für AMP-Komponenten und Komponentenmuster.
• DoubleClick-Anzeigenbeispiele: Ein umfangreicher Katalog mit amp-ad-Beispielen.
• Seite „Entdeckung“
• Nicht zulässige HTML-Tags
• Eingeschränkte CSS-Regeln und ‑Animationen
• Weitere Informationen zu iFrames
• Das AMP-CDN
• Liste der verfügbaren AMP-Komponenten