Concetti avanzati relativi alle Accelerated Mobile Pages

1. Panoramica

Questo codelab è la continuazione dei concetti introdotti in Nozioni di base di Accelerated Mobile Pages. Prima di iniziare questo lab, dovresti aver già completato il lab precedente o almeno avere una conoscenza di base dei concetti fondamentali di AMP.

In questo codelab, imparerai come AMP gestisce pubblicità, analisi, incorporamento video, integrazione con i social media, caroselli di immagini e altro ancora. Per farlo, utilizzerai l'esempio del codelab sugli elementi di base aggiungendo queste funzionalità tramite i vari componenti AMP.

Obiettivi didattici

• Annunci display con amp-ad.
• Incorpora video di YouTube, schede di Twitter ed elementi di testo adattabili.
• Crea caroselli con immagini e combinazioni di contenuti utilizzando amp-carousel.
• Pattern di monitoraggio semplici con amp-analytics.
• Modi per aggiungere la navigazione del sito alla tua pagina.
• Come funzionano i caratteri con AMP.

Che cosa ti serve

• Il codice campione
• Chrome (o un browser equivalente in grado di ispezionare la console JavaScript)
• Python (preferibilmente 2.7) o l'estensione del server web Chrome 200 OK
• Editor di codice (ad esempio Atom, Sublime, Notepad++)

2. recupera il codice campione

Puoi scaricare tutto il codice di esempio sul computer:

Scarica zip

… o clona il repository GitHub dalla riga di comando:

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

Verrà scaricato un file ZIP contenente diversi file di risorse di esempio e la pagina article.html iniziale.

Decomprimi la cartella e vai alla directory tramite la riga di comando sul computer.

3. Esegui la pagina di esempio

Per testare la nostra pagina di esempio, dobbiamo accedere ai file da un web server. Esistono diversi modi per creare un server web locale temporaneo a scopo di test. Per questo lab di codici forniremo istruzioni per tre opzioni disponibili:

• L'app Google Chrome "Web Server for Chrome": questo è l'approccio consigliato in quanto è la soluzione più semplice e multipiattaforma disponibile. Nota: questo approccio richiede l'installazione di Google Chrome.
• Firebase Hosting: un'opzione alternativa se ti interessa anche esplorare la nostra nuova piattaforma di hosting di asset statici "Firebase Hosting". SSL abilitato per impostazione predefinita.
• Un server HTTP Python locale: richiede l'accesso alla riga di comando.

Nota: consigliamo vivamente di utilizzare HTTPS negli ambienti di produzione. L'HTTPS offre diversi vantaggi oltre alla sicurezza, tra cui la SEO. Puoi scoprire di più su questo argomento qui.

Opzione 1: Web Server for Chrome

Puoi trovare l'app "Web Server for Chrome" a questo link sul Chrome Web Store.

Dopo aver installato l'app Chrome, devi indirizzarla a una cartella specifica tramite il pulsante "Scegli cartella". Per questo codelab, devi selezionare la cartella in cui hai decompresso i file di esempio del codelab.

Inoltre, devi selezionare l'opzione "Mostra automaticamente index.html" e impostare la porta su "8000". Per applicare queste modifiche, dovrai riavviare il server web.

Accedi a questo URL tramite:

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

Se l'URL precedente viene caricato correttamente, puoi continuare con la sezione successiva.

Opzione 2: Firebase Hosting

Se ti interessa esplorare il nostro nuovo hosting web statico di Firebase, puoi seguire le istruzioni disponibili qui per eseguire il deployment del tuo sito AMP in un URL di hosting Firebase.

Firebase Hosting è un provider di hosting statico che puoi utilizzare per eseguire rapidamente il deployment e l'hosting di un sito web statico e dei relativi asset, inclusi file HTML, CSS e JavaScript. Gli utenti beneficiano di una latenza ridotta perché i contenuti statici vengono memorizzati nella cache in una rete CDN (Content Delivery Network) con punti di presenza (PoP) situati in tutto il mondo.

Infine, Firebase Hosting viene sempre pubblicato tramite SSL, quindi è ideale per AMP e per il web in generale. Se ti interessa concentrarti esclusivamente su AMP, ignora questa opzione.

Opzione 3: server Python HTTP

Se non utilizzi Chrome o hai difficoltà a installare l'estensione Chrome, puoi anche utilizzare Python dalla riga di comando per avviare un server web locale.

Per eseguire il server HTTP integrato di Python dalla riga di comando, esegui questo comando:

python -m SimpleHTTPServer

e accedi a questo URL:

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

4. Scopri i componenti AMP principali

Il sistema di componenti di AMP ci consente di creare rapidamente funzionalità efficienti e reattive nei nostri articoli con il minimo sforzo. La libreria JavaScript AMP principale nel tag <head> include diversi componenti principali:

• amp-ad: contenitore per la visualizzazione di un annuncio.
• amp-img: sostituisce il tag HTML img.
• amp-pixel: utilizzato come pixel di monitoraggio per conteggiare le visualizzazioni di pagina.
• amp-video: sostituisce il tag video HTML5.

Tutti i componenti principali sopra indicati possono essere utilizzati immediatamente in un documento AMP. Il nostro codice di esempio utilizza già amp-img nella nostra pagina e abbiamo esplorato la sua relazione con il sistema di layout AMP nel codelab AMP Foundations, quindi esploriamo amp-ad nel capitolo successivo.

Nota: l'incorporamento di video HTML5 e pixel di monitoraggio sono funzionalità importanti nello sviluppo web. Se ti interessa incorporare questi componenti, puoi esplorare le rispettive pagine di riferimento qui e qui.

5. Aggiungere un annuncio

La pagina article.amp.html di esempio dovrebbe essere la seguente:

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

Quella sopra è una pagina semplice. La cosa più interessante è che supera sia la convalida AMP sia quella dei metadati del motore di ricerca Schema.org. Se questa pagina fosse implementata su un sito web di notizie, sarebbe idonea all'inclusione nel nuovo carosello della Ricerca Google dedicato ai contenuti AMP, quindi è un ottimo punto di partenza per il nostro lavoro.

Prima di modificare la pagina, apriamo gli Strumenti per sviluppatori di Chrome. Quando lavori su un sito web (soprattutto su un sito web incentrato sui dispositivi mobili), di solito è una buona idea simulare un'esperienza mobile durante i test nel browser. Inizia aprendo la Console per gli sviluppatori in Chrome tramite Menu > More Tools > Developer Tools:

Ora esamina l'output JavaScript nella console per gli sviluppatori. Assicurati di aver selezionato la scheda Console:

Ora fai clic sul pulsante di simulazione del dispositivo nella console per gli sviluppatori. È rappresentato da uno smartphone e un tablet uno accanto all'altro:

Nel menu visualizzato, imposta il dispositivo su "Nexus 5X":

Ora possiamo iniziare a lavorare alla pagina vera e propria. Proviamo ad aggiungere un annuncio al nostro articolo AMP.

Tutti gli annunci in AMP sono creati utilizzando il componente amp-ad. Utilizzando questo componente possiamo configurare i nostri annunci in diversi modi, ad esempio la larghezza, l'altezza e la modalità di layout. Tuttavia, molte piattaforme pubblicitarie richiedono una configurazione aggiuntiva, come l'ID account per il network pubblicitario, l'annuncio da pubblicare o le opzioni per il targeting della pubblicità. Per amp-ad, compiliamo semplicemente le varie opzioni richieste come attributi HTML.

Dai un'occhiata a questo esempio di annuncio Double Click:

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

Come puoi vedere, si tratta di una configurazione molto semplice. Prendi nota dell'attributo type, che indica al componente amp-ad la piattaforma pubblicitaria che vuoi utilizzare. In questo caso, volevamo la piattaforma Double Click e quindi il valore del tipo era doubleclick.

L'attributo data-slot è più univoco. Tutti gli attributi che iniziano con data- in amp-ad sono attributi specifici del fornitore. Ciò significa che non tutti i fornitori richiederanno necessariamente questo attributo specifico né reagiranno necessariamente se viene fornito. Ad esempio, confronta l'esempio precedente di Double Click con un annuncio di test della piattaforma A9:

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

Prova ad aggiungere entrambi gli esempi precedenti all'articolo subito dopo il tag <header>. Aggiorna la pagina e dovresti visualizzare due annunci di test:

Importante: potresti riscontrare alcuni errori nella Play Console, ad esempio "Contenuti misti" o "XMLHttpRequest non può caricare". Il primo è probabilmente correlato alla pubblicità A9, in quanto non tutti i contenuti caricati sono sicuri. Si tratta di un requisito importante per tutti gli annunci pubblicati su AMP.

Esploriamo altre opzioni disponibili per l'utilizzo con DoubleClick. Prova ad aggiungere queste due configurazioni di annunci di geotargeting alla tua pagina:

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

Purtroppo il geotargeting non può essere controllato dal codice della pagina stessa. Tuttavia, questi annunci di test sono già stati configurati nella dashboard DoubleClick per essere visualizzati solo in determinati paesi, in particolare nel Regno Unito e negli Stati Uniti d'America.

Aggiorna la pagina e dai un'occhiata. Lo screenshot seguente è stato acquisito in Australia, quindi nessuno dei due annunci viene caricato:

L'esempio di geotargeting riportato sopra mostra come amp-ad sia sufficientemente flessibile per tutti i tipi di funzionalità della piattaforma pubblicitaria.

Nota: potresti notare che all'interno di questi tag amp-ad sono presenti tag div aggiuntivi con un attributo denominato fallback. Riesci a indovinare cosa indica l'attributo di riserva? Indica al sistema di caricamento di AMP di mostrare i contenuti di questo elemento solo quando il caricamento dell'elemento principale non va a buon fine. Ciò significa che l'elemento principale si basa sull'elemento secondario, da cui il termine "fallback".

Di seguito sono riportate le reti pubblicitarie attualmente supportate:

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

Assicurati di consultare la pagina della documentazione relativa al componente annuncio AMP per informazioni sulle piattaforme pubblicitarie supportate più recenti.

Nel prossimo capitolo esploreremo componenti AMP più avanzati e come includerli nei nostri documenti AMP.

Nota: all'interno del documento AMP non è possibile eseguire codice JavaScript fornito da reti pubblicitarie. Invece, il runtime AMP carica un iframe da un'origine diversa (tramite la sandbox iframe) come documento AMP ed esegue il codice JavaScript della rete pubblicitaria all'interno della sandbox iframe.

Importante: è probabile che la specifica di amp-ad subirà modifiche significative nel corso del tempo. L'approccio attuale è progettato per eseguire il bootstrap del formato in modo da pubblicare gli annunci.

6. Espandere i contenuti con componenti estesi

A questo punto hai un documento AMP di base con testo, un'immagine e persino un annuncio incorporato nella pagina, tutti ingredienti chiave per raccontare una storia e monetizzare i tuoi contenuti. Tuttavia, i siti web moderni spesso includono più funzionalità di semplici immagini e testo.

Portiamo il nostro documento AMP a un livello superiore ed esploriamo quali componenti sono disponibili oltre a quelli di base menzionati in precedenza.

In questo capitolo proveremo ad aggiungere funzionalità web più avanzate che si trovano comunemente negli articoli di notizie:

• Video di YouTube
• Tweet
• Citazioni degli articoli

Incorporamento di un video di YouTube

Proviamo a incorporare un video di YouTube nel documento. Il seguente codice incorpora un video e lo aggiunge alla tua pagina:

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

Aggiorna la pagina e guarda la pagina. Dovresti visualizzare il testo "Impossibile caricare il video" anziché un video.

Anche se il browser è in grado di mostrare i video di YouTube senza problemi, riceverai comunque questo errore. Perché? Il video non è stato caricato, ma il componente non è stato caricato.

Ricorda che non tutti i componenti sono inclusi nel file JavaScript della libreria AMP principale. In particolare, dobbiamo includere una richiesta JavaScript aggiuntiva per il componente YouTube. Tutti i componenti, tranne un insieme di base, richiedono questi riferimenti JavaScript aggiuntivi.

Aggiungi la seguente richiesta al tag <head>:

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

Aggiorna la pagina e dovresti visualizzare il video di YouTube:

Ancora una volta, abbiamo specificato la larghezza e l'altezza del video affinché le proporzioni vengano calcolate dal sistema di layout AMP. Inoltre, il tipo di layout è stato impostato su reattivo, il che significa che il video occuperà l'intera larghezza dell'elemento principale.

Scopri di più sul componente YouTube.

Nota: oltre al componente YouTube, AMP include un componente video HTML5 generico chiamato amp-video e un componente AMP dedicato al player Brightcove Video Cloud o Perform chiamato amp-brightcove. Consulta la sezione "AMP By Example" per altri esempi di riproduzione video, inclusi video di Facebook, Instagram, Vine, Twitter e Dailymotion.

Nota: l'attributo di riserva è utile per fornire informazioni nel caso in cui un componente non venga caricato. Cosa succede se il browser dell'utente non supporta un determinato componente AMP? È una migliore esperienza utente tenere informato l'utente sul motivo per cui una funzionalità potrebbe non essere presente.

Visualizzare un Tweet

L'incorporamento di tweet preformattati da Twitter è una funzionalità comune degli articoli di notizie. Il componente AMP Twitter può fornire questa funzionalità con facilità.

Per iniziare, aggiungi la seguente richiesta JavaScript al tag <head> del documento:

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

Ora, nel tuo articolo aggiungi questo codice per incorporare il tweet:

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

L'attributo data-tweetid è un altro esempio di attributo personalizzato richiesto da un particolare fornitore di piattaforme. In questo caso, Twitter riconosce l'attributo data-tweetid come corrispondente a un tweet specifico da incorporare nella pagina.

Aggiorna il browser e dai un'occhiata alla pagina. Dovresti vedere il tweet:

Scopri di più sul componente Twitter.

Nota: AMP include ancora più componenti per incorporare contenuti dai social network. Dai un'occhiata al componente Instagram e al componente Vine.

Evidenziare una citazione di un articolo

Un elemento comune negli articoli di notizie è evidenziare snippet di testo particolarmente coinvolgenti. Ad esempio, una citazione di una fonte particolare o un fatto importante potrebbe essere ripetuto in un carattere più grande per attirare l'attenzione del lettore.

Tuttavia, poiché non tutte le citazioni o gli snippet di testo hanno necessariamente la stessa lunghezza di caratteri della stringa, può essere difficile bilanciare le dimensioni del carattere più grandi con la quantità di spazio che il testo specifico occuperà nella pagina.

AMP include un altro componente specifico per questo tipo di situazione chiamato amp-fit-text. Consente di definire un elemento con larghezza e altezza fisse e una dimensione massima del carattere. Il componente ridimensiona in modo intelligente le dimensioni del carattere per adattare il testo della citazione alla larghezza e all'altezza disponibili.

Proviamo. Innanzitutto, aggiungi la libreria del componente al tag <head>:

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

Aggiungi quanto segue alla tua pagina:

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

Aggiorna la pagina e guarda il risultato.

Ora sperimenta ulteriormente. Cosa succede se la citazione è molto più breve?

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

O che ne dici di una citazione più lunga?

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

Come ultimo esperimento con amp-fit-text, prova a creare un breve testo, ad esempio #YOLO, con un'altezza molto maggiore, ad esempio un valore di 400, e a mantenere il valore dell'attributo max-font-size pari a 42. Come apparirà la pagina risultante? Il testo è centrato verticalmente o l'altezza del tag amp-fit-text si riduce per adattarsi alla dimensione massima del carattere? Sapendo cosa sai del sistema di layout di AMP, prova a rispondere alla domanda prima di modificare il documento.

7. Caroselli complessi

Un'altra funzionalità comune nello sviluppo web è un carosello. AMP include un componente generico progettato per soddisfare questa esigenza. Iniziamo con un esempio semplice, ad esempio un carosello di immagini.

Ricorda di includere la libreria dei componenti del carosello aggiungendo la seguente richiesta JavaScript al tag <head> del documento:

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

Successivamente, incorporeremo un semplice carosello di immagini con un layout reattivo e una larghezza e un'altezza predefinite. Aggiungi quanto segue alla tua pagina:

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

Aggiorna la pagina e dovresti visualizzare un carosello:

Il componente Carosello può essere configurato in vari modi. Prova a impostare il tipo su slides e guarda il risultato. Assicurati di modificare l'attributo layout di amp-carousel e delle immagini al suo interno in modo che sia responsive.

Ora, anziché un elenco scorrevole di elementi, vedrai un elemento alla volta. Prova a scorrere orizzontalmente per spostarti tra gli elementi. Se scorri fino al terzo elemento, non potrai scorrere oltre.

Poi, aggiungi l'attributo loop. Aggiorna la pagina e prova a scorrere immediatamente verso sinistra. Il carosello scorre all'infinito.

Infine, impostiamo la riproduzione automatica di questo carosello ogni 2 secondi. Aggiungi l'attributo autoplay alla pagina e l'attributo di ritardo con un valore di 2000 nel seguente modo: delay="2000".

Il risultato finale dovrebbe essere simile a questo:

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

Aggiorna la pagina e provala.

Nota: potresti aver notato che nel carosello utilizziamo il tipo di layout fixed-height. È un requisito del tipo carousel, mentre il tipo slides richiedeva il tipo di layout responsive. Gli elementi ad altezza fissa occupano lo spazio disponibile, ma mantengono l'altezza invariata. Affinché fixed-height funzioni, l'attributo altezza deve essere definito, mentre l'attributo larghezza non deve essere presente o deve essere impostato su auto.

I caroselli di immagini sono ottimi, ma cosa succede se vogliamo che nel carosello vengano visualizzati contenuti più complessi? Proviamo a mescolare un po' le cose inserendo una pubblicità, del testo e un'immagine in un unico carosello. Il carosello AMP può davvero gestire un mix di questo tipo tutto in una volta? Certo.

Innanzitutto, aggiungiamo questo stile alla pagina per garantire che i componenti amp-fit-text e amp-carousel funzionino insieme in sicurezza:

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

Ora prova a inserire il seguente codice del carosello nella tua pagina:

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

Aggiorna la pagina e dovresti vedere qualcosa di simile a questo:

Scopri di più sul componente Carosello.

Nota: nell'ultimo esempio potresti aver notato che il componente amp-ad includeva un elemento div secondario con l'attributo placeholder. Ricordi che abbiamo riscontrato uno scenario simile con amp-ad in precedenza nel codelab con il sistema fallback. Qual è la differenza tra segnaposto e fallback? Gli elementi Fallback vengono visualizzati quando l'elemento principale non viene caricato, ad esempio se non era disponibile alcun annuncio. Gli elementi placeholder vengono visualizzati al posto dell'elemento principale durante il caricamento. In un certo senso, ogni attributo delimita il processo di caricamento dell'elemento principale.

Importante: purtroppo il componente amp-ad utilizza un iframe in background che può interferire con i movimenti di scorrimento del carosello stesso. Si tratta di un problema noto in fase di esame.

8. Monitorare con amp-analytics

Le piattaforme di analisi vengono comunemente integrate nei siti web tramite snippet JavaScript incorporati e chiamate di funzioni che attivano eventi che vengono inviati nuovamente al sistema di analisi. AMP fornisce una sintassi di configurazione JSON flessibile per replicare questo processo per diversi partner di analisi.

Di seguito è riportato un esempio di monitoraggio di Google Analytics basato su JavaScript tradizionale che riscriveremo nel formato JSON di amp-analytics. Innanzitutto, l'approccio JavaScript tradizionale:

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

Il codice riportato sopra è piuttosto semplice: invia una notifica per l'evento visualizzazione di pagina da monitorare.

Per replicare tutto quanto sopra nel componente amp-analytics, includiamo innanzitutto la libreria dei componenti nell'elemento <head> del nostro documento:

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

e poi includiamo il componente nel seguente modo:

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

Potrebbe sembrare più complicato, ma in realtà è un formato molto flessibile per descrivere diversi tipi di eventi. Inoltre, il formato JSON non include il blob di codice JavaScript nell'esempio tradizionale, il che potrebbe potenzialmente portare a errori se modificato accidentalmente.

Nel formato JSON, la chiave triggers include un insieme di chiavi che rappresentano tutti gli attivatori di eventi che monitoreremo. Le chiavi di questi attivatori sono descrizioni dell'evento, ad esempio "default pageview" (visualizzazione di pagina predefinita) nell'esempio precedente. Il valore della chiave del titolo si riferisce al nome della pagina visualizzata.

Ampliando l'esempio precedente, possiamo aggiungere un altro trigger "click on #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>

Questo attivatore fa esattamente quello che dice il nome: utilizzando il selettore DOM "#header", possiamo eseguire una query per un tag con l'ID "header" e, in caso di "clic" o tocco sul dispositivo, inviamo un'azione evento "clicked-header" alla piattaforma di analisi con l'etichetta della categoria "examples".

Se hai una piattaforma di monitoraggio personalizzata che vuoi integrare, puoi comunque utilizzare amp-analytics e definire i tuoi endpoint URL personalizzati per le informazioni di monitoraggio. Scopri di più sul componente amp-analytics qui.

Nota: in tutti questi esempi di analisi, "UA-YYYY-Y" deve essere sostituito con il codice di monitoraggio di Google Analytics del tuo sito web.

Nota: se ti interessano sistemi di monitoraggio più semplici, ti consigliamo di dare un'occhiata ad amp-pixel. Se devi solo monitorare le visualizzazioni di pagina, è una soluzione più leggera di amp-analytics, in quanto mira solo a soddisfare i requisiti del monitoraggio dei pixel tradizionale. Scopri di più qui.

Importante: il componente di analisi è ancora in fase di sviluppo. Man mano che il componente amp-analytics si sviluppa, verranno aggiunte altre piattaforme di analisi e altri tipi di eventi da monitorare. Per informazioni aggiornate, leggi il documento di riferimento.

9. Navigare nel sito

Un requisito comune dei siti web mobile è l'inclusione di un menu di navigazione del sito. Questi menu possono assumere molte forme diverse. Ecco alcuni esempi di come può essere presentata la navigazione in un documento AMP:

1. Inserisci un link alla tua home page, l'opzione più semplice.
2. Un menu di sottotitoli tramite il componente carosello.

Link alla home page

Il modo più semplice per consentire agli utenti di accedere alle normali opzioni di navigazione del tuo sito web è reindirizzarli alla normale interfaccia del sito web.

Prova ad aggiungere questo link HTML al tag <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>

e aggiungi questa regola al CSS incorporato:

.home-button {
  float: left;
}

Ora aggiorna la pagina. Dovresti vedere un link nell'angolo in alto a sinistra della pagina che punta a homepage.html. Se fai clic su questo link, ti accorgerai subito che non porta da nessuna parte.

Questo link può essere sostituito con l'URL della home page del tuo sito web per consentire agli utenti di navigare in altre parti del sito tramite la normale navigazione del sito web.

Come accennato, questo è l'approccio più semplice disponibile, in quanto sfrutta la navigazione esistente del sito web. Successivamente, esploreremo due alternative.

Menu Intestazione secondaria

Un altro approccio a questo problema è presentare il menu di navigazione del sito all'interno del documento AMP. Per limitare la visualizzazione a una piccola sezione della pagina, possiamo utilizzare un carosello per presentare un menu scorrevole sotto l'intestazione del sito.

Poiché abbiamo bisogno del componente carosello, assicurati di aggiungere il JavaScript del componente al tag <head> della pagina:

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

Prova ad aggiungere questo snippet HTML appena sotto il tag <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>
...

e aggiungi queste regole al CSS incorporato:

.sub-menu {
  background: black;
}

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

Ora aggiorna la pagina. Dovresti vedere un menu di link sotto il titolo dell'articolo. Questo menu può essere scorrevole orizzontalmente per memorizzare molti link di navigazione.

Questa navigazione nel sottomenu è un ottimo modo per memorizzare molti link senza occupare troppo spazio nella pagina.

10. Aggiungere caratteri

Come discusso in precedenza, nei documenti AMP non sono consentite richieste di fogli di stile esterni. Tuttavia, esiste un'eccezione a questa regola: i caratteri.

I caratteri sono una parte importante dell'esperienza di lettura degli articoli per gli utenti web e, poiché i browser web recuperano i file dei caratteri tramite richieste di fogli di stile esterni, questa esclusione in AMP è necessaria.

Proviamo ad aggiungere un riferimento al carattere Raleway al documento:

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

Ora aggiorna il CSS in modo da includere un riferimento a Raleway:

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

Aggiorna la pagina e dai un'occhiata al nuovo aspetto. Inoltre, esamina l'output del validatore e noterai che non ci sono reclami in merito a questa richiesta esterna.

Nota: l'inclusione di un carattere nel documento non richiede componenti aggiuntivi. Detto questo, esiste un componente denominato amp-font. Non viene utilizzato per caricare i caratteri web, ma puoi utilizzarlo per rilevare se un carattere web è stato caricato correttamente o meno e rispondere in modo appropriato, se necessario.

Puoi utilizzare questa funzionalità per nascondere il testo finché il carattere non è completamente caricato, in modo che l'utente non veda il testo passare dal carattere temporaneo a quello effettivo. Se il carattere non funziona, puoi mostrare il carattere temporaneo. Dopo tutto, lo scenario peggiore sarebbe se l'utente non riuscisse a leggere alcun testo. Scopri di più sui caratteri AMP qui.

11. Complimenti!

Hai completato il codelab AMP avanzato ed esplorato correttamente molti componenti chiave di AMP.

Spero che sia chiaro come amp-ad e amp-analytics possano essere utilizzati per supportare tutti i tipi di piattaforme pubblicitarie e fornitori di analisi. Assicurati di esplorare l'elenco completo dei componenti AMP disponibili.

Di seguito sono riportati alcuni argomenti e link aggiuntivi che potresti voler esplorare per migliorare ulteriormente le tue competenze.

• AMP By Example: un ampio catalogo di esempi per i componenti AMP e i relativi pattern.
• Esempi di annunci DoubleClick: un ampio catalogo di esempi di amp-ad.
• Tutto sulla visibilità della pagina
• Tag HTML non consentiti
• Regole CSS e animazioni con limitazioni
• Scopri di più sugli iframe
• La CDN AMP
• Elenco dei componenti AMP disponibili