Google verwendet KI-Technologie, um Inhalte in Ihre bevorzugte Sprache zu übersetzen. KI-Übersetzungen können Fehler enthalten.

Accelerated Mobile Pages – erweiterte Konzepte

1. Übersicht

Dieses Codelab setzt die Konzepte fort, die in Grundlagen zu Accelerated Mobile Pages 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 einer 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:

… 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 zum 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.

Option 1: Web Server for Chrome

Die App „Web Server for Chrome“ finden Sie im Chrome Web Store unter diesem Link.

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 Codelab-Beispieldateien 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 Firebase-Hosting für statische Websites 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 Points of Presence (PoPs) auf der ganzen Welt 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, schnell und mit minimalem Aufwand effiziente und responsive Funktionen in unsere Artikel einzubauen. 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 zu AMP-Grundlagen haben wir uns angesehen, wie es mit dem AMP-Layoutsystem zusammenhängt. Im nächsten Kapitel sehen wir uns amp-ad an.

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 eigentlichen Seite 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 das Targeting der Werbung. Für amp-ad geben wir einfach die verschiedenen erforderlichen Optionen als HTML-Attribute an.

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 das 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 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 darauf 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:

Sehen wir uns einige weitere Optionen an, die Sie mit dem Doppelklick verwenden können. Fügen Sie Ihrer Seite die folgenden beiden geografischen Ausrichtungskonfigurationen für Anzeigen 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, nämlich im Vereinigten Königreich und in den USA, ausgeliefert werden.

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 amp-ad flexibel genug für alle Arten von Funktionen der Werbeplattform ist.

Die folgenden Werbenetzwerke werden derzeit unterstützt:

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.

6. Inhalte mit erweiterten Komponenten ausbauen

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

Sehen wir uns also an, welche Komponenten neben den oben genannten Kernkomponenten verfügbar sind, um unser AMP-Dokument auf die nächste Stufe zu heben.

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

YouTube-Videos
Tweets
Zitate in Artikeln

YouTube-Video einbetten

Wir versuchen, 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. Was ist der Grund dafür? Das Video konnte nicht geladen werden, weil die Komponente selbst nicht geladen werden konnte.

Denken Sie daran, dass nicht alle Komponenten in der JavaScript-Datei der AMP-Kernbibliothek enthalten sind. 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>

Aktualisieren Sie 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 „Reaktionsfähig“ festgelegt. Das bedeutet, dass das Video die Breite des übergeordneten Elements ausfüllt.

Weitere Informationen zur YouTube-Komponente

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 auf einfache Weise.

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

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, um der maximalen Schriftgröße zu entsprechen? 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 bietet eine generische Komponente, die genau für diesen Zweck 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 in slides und sehen Sie sich das Ergebnis an. Achten Sie darauf, das Attribut layout des Elements amp-carousel und der darin enthaltenen Bilder ebenfalls auf responsive zu ändern.

Anstelle einer scrollenden Liste von Elementen wird jetzt jeweils nur ein Element angezeigt. Wische horizontal, 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 wiederholt.

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.

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

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

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 amp-analytics-Komponente 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 zum Beschreiben 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: „click on #header trigger“ (auf #header-Trigger klicken):

<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

9. Navigation auf Ihrer Website

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

Sie verlinken zurück zu Ihrer Startseite. Das ist die einfachste Option.
Ein Unterüberschriftenmenü über die Karussellkomponente.

Link zur Startseite

Der einfachste Weg, Nutzern 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.

Eine weitere Möglichkeit, dieses Problem zu beheben, besteht darin, das Navigationsmenü Ihrer Website im AMP-Dokument zu präsentieren. Um den Platzbedarf gering zu halten, 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 Leseerfahrung von Webnutzern. 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 Einbinden 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 die 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 amp-ad und amp-analytics verwendet werden können, um verschiedene Werbeplattformen und Analyseanbieter zu unterstützen. 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.
Seitenermittlung
Nicht zulässige HTML-Tags
Eingeschränkte CSS-Regeln und ‑Animationen
Weitere Informationen zu iFrames
Das AMP-CDN
Liste der verfügbaren AMP-Komponenten