Przyspieszone strony mobilne – informacje zaawansowane

1. Przegląd

Te warsztaty to kontynuacja koncepcji przedstawionych w artykule Podstawy przyspieszonych stron mobilnych. Zanim rozpoczniesz ten moduł, musisz ukończyć poprzedni lub przynajmniej znać podstawowe koncepcje AMP.

Z tego kursu dowiesz się, jak AMP obsługuje reklamy, statystyki, osadzanie filmów, integrację z mediami społecznościowymi, karuzele obrazów i inne elementy. Aby to osiągnąć, rozbudujesz przykład z kursu podstawowego, dodając te funkcje za pomocą różnych komponentów AMP.

Czego się nauczysz

• Wyświetlanie reklam displayowych za pomocą tagu amp-ad.
• Osadzaj filmy z YouTube, karty Twittera i elastyczne elementy tekstowe.
• Twórz karuzele z obrazami i kombinacjami treści za pomocą komponentu amp-carousel.
• Proste wzorce śledzenia za pomocą amp-analytics.
• Sposoby dodawania nawigacji w witrynie do strony.
• Jak czcionki działają na stronach AMP.

Czego potrzebujesz

• Przykładowy kod
• Chrome (lub równoważna przeglądarka, która może sprawdzać konsolę JavaScript)
• Python (najlepiej w wersji 2.7) lub rozszerzenie Chrome 200 OK Web Server
• Edytor kodu (np. Atom, Sublime, Notepad++)

2. Pobieranie przykładowego kodu

Możesz pobrać cały przykładowy kod na komputer:

Pobierz plik ZIP

…lub sklonuj repozytorium GitHub z wiersza poleceń:

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

Pobierzesz plik ZIP zawierający kilka przykładowych plików zasobów i stronę początkową article.html.

Rozpakuj folder i przejdź do katalogu za pomocą wiersza poleceń na komputerze.

3. Uruchamianie przykładowej strony

Aby przetestować naszą przykładową stronę, musimy uzyskać dostęp do plików z serwera WWW. Istnieje kilka sposobów utworzenia tymczasowego lokalnego serwera WWW na potrzeby testowania. W tym module przedstawiamy instrukcje do 3 dostępnych opcji:

• Aplikacja Google Chrome „Web Server for Chrome” – jest to zalecane rozwiązanie, ponieważ jest najprostsze i działa na różnych platformach. Uwaga: ta metoda wymaga zainstalowania Google Chrome.
• Hosting Firebase – alternatywna opcja, jeśli chcesz poznać naszą nową platformę hostingu zasobów statycznych „Hosting Firebase”. Domyślnie włączone jest SSL.
• Lokalny serwer HTTP w Pythonie – wymaga dostępu do wiersza poleceń.

Uwaga: w środowiskach produkcyjnych zdecydowanie zalecamy korzystanie z protokołu HTTPS. HTTPS ma wiele zalet, nie tylko w zakresie bezpieczeństwa, ale też SEO. Więcej informacji na ten temat znajdziesz tutaj.

Opcja 1. Web Server for Chrome

Aplikację „Web Server for Chrome” znajdziesz w Chrome Web Store pod tym linkiem.

Po zainstalowaniu aplikacji Chrome musisz wskazać jej konkretny folder, klikając przycisk „Wybierz folder”. W tym module wybierz folder, w którym rozpakowano przykładowe pliki.

Dodatkowo zaznacz opcję „Automatycznie wyświetlaj plik index.html” i ustaw port na „8000”. Aby te zmiany zaczęły obowiązywać, musisz ponownie uruchomić serwer WWW.

Dostęp do tego adresu URL możesz uzyskać:

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

Jeśli powyższy adres URL wczytuje się prawidłowo, możesz przejść do następnej sekcji.

Opcja 2. Hosting Firebase

Jeśli chcesz wypróbować nasz nowy hosting statycznych stron internetowych w Firebase, postępuj zgodnie z instrukcjami dostępnymi tutaj, aby wdrożyć witrynę AMP pod adresem URL hostingu Firebase.

Hosting Firebase to dostawca hostingu statycznego, którego możesz używać do szybkiego wdrażania i hostowania witryny statycznej oraz jej zasobów, w tym plików HTML, CSS i JavaScript. Użytkownicy korzystają z mniejszych opóźnień, ponieważ statyczne treści są buforowane w sieci dostarczania treści (CDN) z punktami obecności (PoP) rozmieszczonymi na całym świecie.

Hosting Firebase zawsze korzysta z protokołu SSL, dlatego świetnie sprawdza się w przypadku AMP i ogólnie w internecie. Jeśli chcesz skupić się wyłącznie na AMP, zignoruj tę opcję.

Opcja 3. Serwer HTTP w Pythonie

Jeśli nie używasz Chrome lub masz problem z zainstalowaniem rozszerzenia do Chrome, możesz też użyć Pythona z wiersza poleceń, aby uruchomić lokalny serwer WWW.

Aby uruchomić wbudowany serwer HTTP Pythona z wiersza poleceń, wykonaj to polecenie:

python -m SimpleHTTPServer

i otwórz ten adres URL:

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

4. Poznaj podstawowe komponenty AMP

System komponentów AMP umożliwia nam szybkie tworzenie wydajnych i elastycznych funkcji w naszych artykułach przy minimalnym wysiłku. Podstawowa biblioteka JavaScript AMP w tagu <head> zawiera kilka podstawowych komponentów:

• amp-ad – kontener do wyświetlania reklamy.
• amp-img – zamiennik tagu HTML img.
• amp-pixel – używany jako piksel śledzący do zliczania wyświetleń strony.
• amp-video – zamiennik tagu wideo HTML5.

Wszystkie wymienione wyżej podstawowe komponenty można od razu wykorzystać w dokumencie AMP. W naszym przykładowym kodzie na stronie używamy już elementu amp-img. W ramach kursu podstawowego AMP omówiliśmy jego związek z systemem układu AMP, więc w następnym rozdziale przyjrzymy się elementowi amp-ad.

Uwaga: umieszczanie filmów HTML5 i pikseli śledzących to ważne funkcje w tworzeniu stron internetowych. Jeśli chcesz osadzić te komponenty, możesz zapoznać się z odpowiednimi stronami referencyjnymi tutaj i tutaj.

5. Dodawanie reklamy

Przykładowa strona article.amp.html powinna wyglądać tak:

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

Powyższa strona jest prosta. Najciekawsze jest to, że przechodzi zarówno weryfikację AMP, jak i weryfikację metadanych wyszukiwarki Schema.org. Gdyby ta strona została wdrożona w witrynie z wiadomościami, kwalifikowałaby się do uwzględnienia w nowej karuzeli wyszukiwarki Google przeznaczonej dla treści AMP, więc jest to świetny punkt wyjścia do naszej pracy.

Zanim zmienimy stronę, otwórzmy Narzędzia deweloperskie w Chrome. Podczas pracy nad witryną (zwłaszcza zoptymalizowaną pod kątem urządzeń mobilnych) warto symulować działanie na urządzeniu mobilnym podczas testowania w przeglądarce. Zacznij od otwarcia Konsoli Play w Chrome za pomocą Menu > More Tools > Developer Tools:

Teraz sprawdź dane wyjściowe JavaScriptu w konsoli dewelopera. Upewnij się, że wybrana jest karta Konsola:

Teraz w konsoli dewelopera kliknij przycisk symulacji urządzenia. Jest on reprezentowany przez telefon i tablet leżące obok siebie:

W wyświetlonym menu ustaw urządzenie „Nexus 5X”:

Teraz możemy zacząć pracować nad samą stroną. Spróbujmy dodać reklamę do naszego artykułu AMP.

Wszystkie reklamy w AMP są tworzone za pomocą komponentu amp-ad. Za pomocą tego komponentu możemy skonfigurować reklamy na kilka sposobów, np. ustawić szerokość, wysokość i tryb układu. Wiele platform reklamowych wymaga jednak dodatkowej konfiguracji, np. podania identyfikatora konta sieci reklamowej, określenia, która reklama ma się wyświetlać, lub ustawienia opcji kierowania reklam. W przypadku amp-ad po prostu wypełniamy różne opcje wymagane jako atrybuty HTML.

Oto przykład reklamy Double Click:

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

Jak widać, jest to bardzo prosta konfiguracja. Zwróć uwagę na atrybut type. Informuje on komponent amp-ad, której platformy reklamowej chcesz używać. W tym przypadku chcieliśmy użyć platformy Double Click, więc wartość typu to doubleclick.

Atrybut data-slot jest bardziej unikalny. Wszystkie atrybuty w komponencie amp-ad zaczynające się od znaku data- są atrybutami specyficznymi dla dostawcy. Oznacza to, że nie wszyscy dostawcy będą wymagać tego konkretnego atrybutu ani niekoniecznie zareagują, jeśli zostanie on podany. Porównaj na przykład powyższy przykład Double Click z reklamą testową z platformy A9:

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

Spróbuj dodać oba powyższe przykłady do artykułu tuż po tagu <header>. Odśwież stronę. Powinny się na niej pojawić 2 reklamy testowe:

Ważne: w konsoli dewelopera mogą pojawić się błędy, np. „Mixed Content” (Treści mieszane) lub „XMLHttpRequest cannot load” (Nie można wczytać XMLHttpRequest). Pierwszy problem jest prawdopodobnie związany z reklamą A9, ponieważ nie wszystkie wczytywane przez nią treści są bezpieczne. Jest to istotne wymaganie w przypadku wszystkich reklam wyświetlanych na stronach AMP.

Przyjrzyjmy się kilku dodatkowym opcjom, które można stosować w przypadku DoubleClick. Spróbuj dodać do strony te 2 konfiguracje reklam kierowanych geograficznie:

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

Niestety nie można kontrolować kierowania geograficznego z poziomu kodu strony. Te reklamy testowe zostały już jednak skonfigurowane na panelu DoubleClick tak, aby wyświetlały się tylko w określonych krajach, a mianowicie w Stanach Zjednoczonych i Wielkiej Brytanii.

Odśwież stronę i sprawdź. Poniższy zrzut ekranu został zrobiony w Australii, więc żadna reklama się nie wczytuje:

Powyższy przykład kierowania geograficznego pokazuje, że format amp-ad jest wystarczająco elastyczny, aby obsługiwać wszystkie rodzaje funkcji platform reklamowych.

Uwaga: w tych tagach amp-ad mogą się znajdować dodatkowe tagi div z atrybutem o nazwie fallback. Czy potrafisz odgadnąć, co oznacza atrybut zastępczy? Informuje system wczytywania AMP, aby wyświetlał zawartość tego elementu tylko wtedy, gdy nie uda się wczytać elementu nadrzędnego. Oznacza to, że element nadrzędny wraca do elementu podrzędnego – stąd nazwa „fallback” (powrót).

Obecnie obsługiwane są te sieci reklamowe:

• A9
• Adblade
• Adform
• AdReactor
• AdSense
• AdTech
• Criteo
• Dot and Media
• Doubleclick
• Flite
• Industrybrains
• OpenX
• plista
• Smart AdServer
• Yieldmo
• Revcontent
• TripleLift
• Teads
• I-Mobile
• Webediads

Najnowsze informacje o obsługiwanych platformach reklamowych znajdziesz na stronie dokumentacji komponentu reklamy AMP.

W następnym rozdziale omówimy bardziej zaawansowane komponenty AMP i sposób ich dodawania do dokumentów AMP.

Uwaga: w dokumencie AMP nie można uruchamiać kodu JavaScript dostarczonego przez żadną sieć reklamową. Zamiast tego środowisko uruchomieniowe AMP wczytuje element iframe z innego źródła (za pomocą piaskownicy iframe) jako dokument AMP i wykonuje kod JS sieci reklamowej w tej piaskownicy iframe.

Ważne: specyfikacja amp-ad prawdopodobnie będzie się z czasem znacznie zmieniać. Obecne podejście ma na celu uruchomienie formatu, aby można było wyświetlać w nim reklamy.

6. Rozwijanie treści za pomocą rozszerzonych komponentów

Masz już podstawowy dokument AMP z tekstem, obrazem, a nawet reklamą umieszczoną na stronie – wszystkie kluczowe elementy, które pozwalają opowiedzieć historię i zarabiać na treściach. Nowoczesne strony internetowe często zawierają jednak więcej funkcji niż tylko zdjęcia i tekst.

Przenieśmy więc nasz dokument AMP na wyższy poziom i sprawdźmy, jakie komponenty są dostępne poza wspomnianymi wcześniej komponentami podstawowymi.

W tym rozdziale spróbujemy dodać bardziej zaawansowane funkcje internetowe, które często można znaleźć w artykułach prasowych:

• Filmy w YouTube
• Tweety
• cytaty z artykułów,

Umieszna stronie filmu z portalu YouTube

Spróbujmy umieścić w dokumencie film na YouTube. Poniższy kod umieści film na stronie:

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

Odśwież stronę i sprawdź, czy się zmieniła. Zamiast filmu powinien pojawić się tekst: „Nie udało się wczytać filmu”.

Ten błąd może się pojawić nawet wtedy, gdy przeglądarka wyświetla filmy w YouTube bez problemów. Dlaczego? Nie udało się wczytać nie filmu, ale samego komponentu.

Pamiętaj, że nie wszystkie komponenty są uwzględnione w pliku JavaScript podstawowej biblioteki AMP. Musimy dodać dodatkowe żądanie JavaScript dla komponentu YouTube. Wszystkie komponenty z wyjątkiem podstawowego zestawu będą wymagać tych dodatkowych odwołań do JavaScriptu.

Do tagu <head> dodaj to żądanie:

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

Odśwież stronę. Powinien pojawić się film na YouTube:

Ponownie określiliśmy szerokość i wysokość filmu, aby system układu AMP mógł obliczyć współczynnik proporcji. Typ układu został ustawiony na elastyczny, co oznacza, że film będzie zajmował całą szerokość elementu nadrzędnego.

Dowiedz się więcej o komponencie YouTube.

Uwaga: oprócz komponentu YouTube AMP zawiera ogólny komponent wideo HTML5 o nazwie amp-video oraz komponent AMP przeznaczony dla odtwarzacza Brightcove Video Cloud lub Perform o nazwie amp-brightcove. Więcej przykładów odtwarzania filmów, w tym filmów z Facebooka, Instagrama, Vine, Twittera i Dailymotion, znajdziesz w artykule „AMP By Example”.

Uwaga: atrybut rezerwowy przydaje się do podawania informacji w przypadku, gdy komponent nie wczyta się prawidłowo. Co się stanie, jeśli przeglądarka użytkownika nie obsługuje określonego komponentu AMP? Dla użytkownika wygodniej jest wiedzieć, dlaczego niektóre funkcje mogą być niedostępne.

Wyświetlanie tweeta

Osadzanie wstępnie sformatowanych tweetów z Twittera to powszechna funkcja artykułów z wiadomościami. Komponent AMP Twittera może z łatwością zapewnić tę funkcjonalność.

Zacznij od dodania do tagu <head> w dokumencie tego żądania JavaScript:

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

Teraz w artykule dodaj ten kod, aby osadzić tweeta:

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

Atrybut data-tweetid to kolejny przykład atrybutu niestandardowego, który jest wymagany przez konkretnego dostawcę platformy. W tym przypadku Twitter rozpoznaje atrybut data-tweetid jako odpowiadający konkretnemu tweetowi, który ma zostać umieszczony na stronie.

Odśwież przeglądarkę i sprawdź stronę. Powinien pojawić się tweet:

Więcej informacji o komponencie Twitter

Uwaga: AMP zawiera jeszcze więcej komponentów do osadzania treści z sieci społecznościowych. Sprawdź komponent Instagram i komponent Vine.

Wyróżnianie cytatu z artykułu

Częstym elementem artykułów informacyjnych jest wyróżnianie szczególnie angażujących fragmentów tekstu. Na przykład cytat z określonego źródła lub ważny fakt może być powtórzony większą czcionką, aby przyciągnąć uwagę czytelnika.

Jednak ponieważ nie wszystkie cytaty ani fragmenty tekstu mają taką samą długość, trudno jest zachować równowagę między większym rozmiarem czcionki a ilością miejsca, jaką zajmuje dany tekst na stronie.

AMP zawiera inny komponent przeznaczony specjalnie do tego typu sytuacji, o nazwie amp-fit-text. Umożliwia zdefiniowanie elementu o stałej szerokości i wysokości oraz maksymalnego rozmiaru czcionki. Komponent inteligentnie skaluje rozmiar czcionki, aby dopasować tekst cytatu do dostępnej szerokości i wysokości.

Spróbujmy. Najpierw dodaj bibliotekę komponentu do tagu <head>:

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

Dodaj do strony te informacje:

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

Odśwież stronę i sprawdź wynik.

Teraz eksperymentuj dalej. Co się stanie, jeśli cytat będzie znacznie krótszy?

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

A może dłuższy cytat?

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

Na koniec wypróbuj jeszcze jeden eksperyment z komponentem amp-fit-text. Utwórz krótki tekst, np. #YOLO, z dużo większą wysokością, np. 400, i zachowaj wartość atrybutu max-font-size równą 42. Jak będzie wyglądać wynikowa strona? Czy tekst jest wyśrodkowany w pionie, czy wysokość tagu amp-fit-text zmniejsza się, aby dopasować się do maksymalnego rozmiaru czcionki? Zanim zaczniesz edytować dokument, spróbuj odpowiedzieć na pytanie na podstawie swojej wiedzy o systemie układu AMP.

7. Złożone karuzele

Kolejną popularną funkcją w tworzeniu stron internetowych jest karuzela. AMP zawiera ogólny komponent, który spełnia tę potrzebę. Zacznijmy od prostego przykładu, takiego jak karuzela obrazów.

Pamiętaj, aby dołączyć bibliotekę komponentów karuzeli, dodając do tagu <head> w dokumencie to żądanie JavaScript:

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

Następnie umieścimy prostą karuzelę obrazów z układem elastycznym oraz wstępnie zdefiniowaną szerokością i wysokością. Dodaj do strony te informacje:

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

Odśwież stronę. Powinna się na niej pojawić karuzela:

Komponent karuzeli można skonfigurować na różne sposoby. Spróbuj zmienić typ na slides i sprawdź wynik. Pamiętaj, aby zmienić atrybut layout elementu amp-carousel i obrazów w nim na responsive.

Zamiast przewijanej listy elementów zobaczysz teraz po jednym elemencie naraz. Spróbuj przesuwać palcem w poziomie, aby przechodzić między elementami. Jeśli przesuniesz palcem do trzeciego elementu, nie będzie można przesunąć dalej.

Następnie dodaj atrybut loop. Odśwież stronę i od razu przesuń palcem w lewo. Karuzela jest powtarzana w nieskończoność.

Na koniec ustawmy automatyczne odtwarzanie karuzeli co 2 sekundy. Dodaj do strony atrybut autoplay i atrybut opóźnienia o wartości 2000 w ten sposób: delay="2000".

Wynik powinien wyglądać mniej więcej tak:

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

Odśwież stronę i sprawdź, jak to działa.

Uwaga: w karuzeli używamy typu układu fixed-height. Jest to wymagane w przypadku typu carousel, a typ slides wymaga typu układu responsive. Elementy o stałej wysokości zajmują dostępną przestrzeń, ale ich wysokość pozostaje niezmieniona. Aby element fixed-height działał, atrybut wysokości musi być zdefiniowany, a atrybut szerokości nie powinien być obecny lub powinien mieć wartość auto.

Karuzela obrazów jest świetna, ale co zrobić, jeśli chcemy, aby w niej pojawiały się bardziej złożone treści? Spróbujmy trochę urozmaicić tę karuzelę, umieszczając w niej reklamę, tekst i obraz. Czy amp-carousel naprawdę poradzi sobie z taką mieszanką naraz? Bez problemu.

Najpierw dodajmy ten styl do strony, aby zapewnić bezpieczną współpracę komponentów amp-fit-text i amp-carousel:

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

Teraz spróbuj umieścić na stronie ten kod karuzeli:

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

Odśwież stronę. Powinien pojawić się ekran podobny do tego:

Więcej informacji o komponencie karuzeli.

Uwaga: w ostatnim przykładzie możesz zauważyć, że komponent amp-ad zawierał element podrzędny div z atrybutem placeholder. Pamiętasz, że podobny scenariusz wystąpił w przypadku komponentu amp-ad we wcześniejszej części tego laboratorium z kodem z systemem fallback. Czym się różni element zastępczy od elementu rezerwowego? Elementy Fallback pojawiają się, gdy nie uda się wczytać elementu nadrzędnego, np. gdy nie ma dostępnej reklamy. Elementy placeholder pojawiają się w miejscu elementu nadrzędnego podczas jego wczytywania. W pewnym sensie każdy atrybut ogranicza proces ładowania elementu nadrzędnego.

Ważne: komponent reklamy AMP używa w tle elementu iframe, który może powodować zakłócenia w gestach przesuwania w samej karuzeli. Jest to znany problem, którego przyczynę obecnie badamy.

8. Śledzenie za pomocą AMP Analytics

Platformy analityczne są zwykle integrowane z witrynami za pomocą wbudowanych fragmentów kodu JavaScript i wywołań funkcji, które wywołują zdarzenia odsyłane do systemu analitycznego. AMP udostępnia elastyczną składnię konfiguracji JSON, która umożliwia powielanie tego procesu w przypadku kilku partnerów analitycznych.

Poniżej znajdziesz przykład tradycyjnego śledzenia w Google Analytics opartego na JavaScript, które przekształcimy na format JSON w komponencie amp-analytics. Najpierw tradycyjne podejście JavaScript:

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

Powyższy kod jest dość prosty – wysyła powiadomienie o zdarzeniu odsłony strony, które ma być śledzone.

Aby odtworzyć wszystkie powyższe elementy w komponencie amp-analytics, najpierw umieszczamy bibliotekę komponentów w sekcji <head> dokumentu:

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

Następnie dodajemy komponent w ten sposób:

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

Może się to wydawać bardziej skomplikowane, ale w rzeczywistości jest to bardzo elastyczny format opisywania kilku różnych typów zdarzeń. Dodatkowo format JSON nie zawiera bloku kodu JavaScript w tradycyjnym przykładzie, co może prowadzić do błędów w przypadku przypadkowej zmiany.

W formacie JSON klucz „triggers” zawiera zestaw kluczy reprezentujących wszystkie reguły zdarzeń, które będziemy śledzić. Klucze tych reguł to opisy zdarzeń, np. „default pageview” (domyślna odsłona) w przykładzie powyżej. Wartość klucza tytułu odnosi się do nazwy wyświetlanej strony.

Rozwijając powyższy przykład, możemy dodać kolejną regułę „kliknięcie #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>

Ten czynnik wywołujący działa dokładnie tak, jak sugeruje jego nazwa. Za pomocą selektora DOM „#header” możemy wysłać zapytanie o tag z identyfikatorem „header”, a gdy zostanie on „kliknięty” lub dotknięty na urządzeniu, wysyłamy do platformy analitycznej działanie zdarzenia „clicked-header” z etykietą kategorii „examples”.

Jeśli masz niestandardową platformę śledzenia, którą chcesz zintegrować, możesz nadal używać amp-analytics i definiować własne spersonalizowane punkty końcowe adresu URL dla informacji o śledzeniu. Więcej informacji o komponencie amp-analytics znajdziesz tutaj.

Uwaga: we wszystkich tych przykładach kodu „UA-YYYY-Y” należy zastąpić własnym kodem śledzenia Google Analytics witryny.

Uwaga: jeśli interesują Cię prostsze systemy śledzenia, zapoznaj się z informacjami o amp-pixel. Jeśli musisz tylko śledzić wyświetlenia stron, jest to lżejsze rozwiązanie niż amp-analytics, ponieważ ma na celu jedynie spełnienie wymagań tradycyjnego śledzenia za pomocą pikseli. Więcej informacji znajdziesz tutaj.

Ważne: komponent analityczny jest w trakcie opracowywania. Wraz z rozwojem komponentu amp-analytics będzie on obsługiwał więcej platform analitycznych i więcej typów zdarzeń do śledzenia. Najnowsze informacje znajdziesz w dokumencie referencyjnym.

9. Poruszanie się po witrynie

Częstym wymaganiem dotyczącym witryn mobilnych jest uwzględnienie menu nawigacyjnego. Te menu mogą mieć różne formy. Oto kilka przykładów, jak można przedstawić nawigację w dokumencie AMP:

1. Link do strony głównej – najprostsza opcja.
2. Menu podtytułów w komponencie karuzeli.

Link do strony głównej

Najprostszym sposobem na umożliwienie użytkownikom dostępu do standardowych opcji nawigacji w witrynie jest przekierowanie ich z powrotem do zwykłego interfejsu witryny.

Spróbuj dodać ten link HTML do tagu <header>:

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

  News Site
</header>

Następnie dodaj tę regułę do wbudowanego kodu CSS:

.home-button {
  float: left;
}

Teraz odśwież stronę. W lewym górnym rogu strony powinien być widoczny link do homepage.html. Jeśli go klikniesz, szybko się przekonasz, że nie prowadzi on do żadnej strony.

Ten link możesz zastąpić adresem URL strony głównej witryny, aby umożliwić użytkownikom przechodzenie do innych części witryny za pomocą zwykłej nawigacji.

Jak już wspomnieliśmy, jest to najprostsze dostępne podejście, które wykorzystuje istniejącą nawigację w witrynie. Następnie omówimy 2 alternatywne rozwiązania.

Menu podnagłówka

Innym rozwiązaniem tego problemu jest wyświetlanie menu nawigacyjnego witryny w dokumencie AMP. Aby ograniczyć menu do niewielkiej części strony, możemy użyć karuzeli, która będzie wyświetlać przewijane menu pod nagłówkiem witryny.

Potrzebujemy komponentu karuzeli, więc dodaj kod JavaScript tego komponentu do tagu <head> na stronie:

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

Spróbuj dodać ten fragment kodu HTML tuż pod tagiem <header>:

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

Następnie dodaj te reguły do wbudowanego CSS:

.sub-menu {
  background: black;
}

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

Teraz odśwież stronę. Pod tytułem artykułu powinno pojawić się menu z linkami. To menu można przewijać w poziomie, aby przechowywać wiele linków nawigacyjnych.

To podmenu to świetny sposób na przechowywanie wielu linków bez zajmowania zbyt dużej ilości miejsca na stronie.

10. Dodawanie czcionek

Jak wspomnieliśmy wcześniej, w dokumentach AMP nie są dozwolone żądania zewnętrzne arkuszy stylów. Od tej reguły jest jednak jeden wyjątek: czcionki.

Czcionki są ważnym elementem komfortu czytania artykułów przez użytkowników internetu, a przeglądarki pobierają pliki czcionek za pomocą zewnętrznych żądań arkusza stylów, dlatego wykluczenie w AMP jest konieczne.

Spróbujmy dodać do dokumentu odwołanie do czcionki Raleway:

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

Teraz zaktualizuj CSS, aby zawierał odwołanie do Raleway:

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

Odśwież stronę i sprawdź jej nowy wygląd. Sprawdź też dane wyjściowe walidatora. Zobaczysz, że nie ma żadnych zastrzeżeń dotyczących tego żądania zewnętrznego.

Uwaga: dołączenie czcionki do dokumentu nie wymaga żadnych dodatkowych komponentów. Jest jednak komponent o nazwie amp-font. Nie służy on do wczytywania czcionek internetowych, ale możesz go używać do wykrywania, czy czcionka internetowa została wczytana, i w razie potrzeby odpowiednio reagować.

Możesz użyć tej funkcji, aby ukryć tekst do czasu pełnego załadowania czcionki. Dzięki temu użytkownik nie zobaczy, jak tekst przełącza się z czcionki tymczasowej na właściwą. Jeśli czcionka nie działa, możesz po prostu wyświetlić czcionkę tymczasową. Najgorszy scenariusz to brak możliwości odczytania tekstu przez użytkownika. Więcej informacji o amp-font znajdziesz tutaj.

11. Gratulacje!

Ukończono zaawansowany kurs dotyczący AMP i poznaliśmy wiele kluczowych komponentów AMP.

Mamy nadzieję, że rozumiesz już, jak amp-ad i amp-analytics mogą być używane do obsługi różnych platform reklamowych i dostawców usług analitycznych. Zapoznaj się z pełną listą dostępnych komponentów AMP.

Poniżej znajdziesz dodatkowe tematy i linki, które mogą Ci pomóc w dalszym rozwoju.

• AMP By Example – obszerny katalog przykładów komponentów AMP i wzorców komponentów.
• Przykłady reklam DoubleClick – obszerny katalog przykładów reklam AMP.
• Wszystko o wyświetlaniu strony
• Niedozwolone tagi HTML
• Ograniczone reguły CSS i animacje
• Więcej informacji o elementach iframe
• Sieć CDN AMP
• Lista dostępnych komponentów AMP