Conceitos avançados sobre as Accelerated Mobile Pages

1. Visão geral

Este codelab é uma continuação dos conceitos apresentados em "Fundamentos das Accelerated Mobile Pages". Você precisa ter concluído o codelab anterior antes de começar este ou pelo menos ter um entendimento básico dos conceitos principais do AMP.

Neste codelab, você vai aprender como o AMP lida com publicidade, análise, incorporação de vídeo, integração de rede social, carrosséis de imagens e muito mais. Para isso, você vai usar o exemplo do codelab Foundations e adicionar esses recursos com os vários componentes AMP.

O que você vai aprender

• Anúncios de display com amp-ad.
• Incorpore vídeos do YouTube, cards do Twitter e elementos de texto responsivos.
• Crie carrosséis com imagens e combinações de conteúdo usando amp-carousel.
• Padrões de rastreamento simples com amp-analytics.
• Maneiras de adicionar a navegação do site à sua página.
• Como as fontes funcionam com o AMP.

O que é necessário

• Código de amostra
• Chrome (ou um navegador equivalente que possa inspecionar o console JavaScript)
• Python (de preferência 2.7) ou a extensão Chrome 200 OK Web Server
• Editor de código (por exemplo, Atom, Sublime, Notepad++)

2. Acessar o exemplo de código

Você pode fazer o download de todo o exemplo de código para seu computador:

Fazer o download do ZIP

…ou clone o repositório do GitHub pela linha de comando:

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

Você vai baixar um arquivo ZIP com vários arquivos de recursos de exemplo e a página inicial article.html.

Descompacte a pasta e navegue até o diretório pela linha de comando no computador.

3. Executar a página de exemplo

Para testar nossa página de exemplo, precisamos acessar os arquivos de um servidor da Web. Existem várias maneiras de criar um servidor da Web temporário e local para fins de teste. Neste codelab, vamos fornecer instruções para três opções disponíveis:

• O app Google Chrome "Web Server for Chrome": essa é a abordagem recomendada porque é a solução mais simples e multiplataforma disponível. Observação: essa abordagem exige que o Google Chrome esteja instalado.
• Firebase Hosting: uma opção alternativa se você também quiser conhecer nossa nova plataforma de hospedagem de recursos estáticos "Firebase Hosting". SSL ativado por padrão.
• Um servidor HTTP Python local: requer acesso à linha de comando.

Observação: é altamente recomendável usar HTTPS em ambientes de produção. O HTTPS tem vários benefícios além da segurança, incluindo SEO. Leia mais sobre esse assunto aqui.

Opção 1: servidor da Web para Chrome

Você pode encontrar o app "Web Server for Chrome" neste link na Chrome Web Store.

Depois de instalar o app Chrome, aponte-o para uma pasta específica usando o botão "Escolher pasta". Neste codelab, selecione a pasta em que você descompactou os arquivos de exemplo.

Além disso, marque a opção "Mostrar index.html automaticamente" e defina a porta como "8000". É necessário reiniciar o servidor da Web para que essas mudanças entrem em vigor.

Acesse este URL usando:

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

Se o URL acima carregar corretamente, avance para a próxima seção.

Opção 2: Firebase Hosting

Se quiser conhecer nosso novo serviço de hospedagem na Web estática do Firebase, siga as instruções disponíveis aqui para implantar seu site AMP em um URL do Firebase Hosting.

O Firebase Hosting é um provedor de hospedagem estática que pode ser usado para implantar e hospedar rapidamente um site estático e seus recursos, incluindo arquivos HTML, CSS e JavaScript. Os usuários se beneficiam da redução da latência porque o conteúdo estático é armazenado em cache em uma rede de fornecimento de conteúdo (CDN) com pontos de presença (PoPs) localizados em todo o mundo.

Por fim, o Firebase Hosting é sempre veiculado via SSL, o que é ótimo para AMP e para a Web em geral. Se você tiver mais interesse em se concentrar apenas no AMP, ignore essa opção.

Opção 3: servidor HTTP Python

Se você não usa o Chrome ou está com dificuldades para instalar a extensão do Chrome, também é possível usar o Python na linha de comando para iniciar um servidor da Web local.

Para executar o servidor HTTP integrado do Python na linha de comando, basta executar o seguinte:

python -m SimpleHTTPServer

E acesse este URL:

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

4. Conheça os principais componentes do AMP

O sistema de componentes do AMP permite criar rapidamente recursos eficientes e responsivos nos nossos artigos com o mínimo de esforço. A biblioteca JavaScript principal da AMP na tag <head> inclui vários componentes principais:

• amp-ad: contêiner para exibir um anúncio.
• amp-img: substituição da tag img do HTML.
• amp-pixel: usado como pixel de rastreamento para contar visualizações de página.
• amp-video: substituto da tag de vídeo HTML5.

Todos os componentes principais acima podem ser usados imediatamente em um documento AMP. Nosso exemplo de código já usa amp-img na página, e explicamos como ele se relaciona ao sistema de layout AMP no codelab Fundamentos do AMP. Então, vamos explorar amp-ad no próximo capítulo.

Observação: a incorporação de vídeos HTML5 e pixels de rastreamento são recursos importantes no desenvolvimento da Web. Se você tiver interesse em incorporar esses componentes, acesse as páginas de referência respectivas aqui e aqui.

5. Adicionar um anúncio

Sua página de exemplo article.amp.html deve ser assim:

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

A página acima é simples. O mais interessante é que ela passa na validação de AMP e na validação de metadados do mecanismo de pesquisa do Schema.org. Se essa página fosse implantada em um site de notícias, ela estaria qualificada para inclusão no novo carrossel da Pesquisa Google dedicado ao conteúdo AMP. Portanto, é um ótimo ponto de partida para nosso trabalho.

Antes de alterar a página, abra as Ferramentas para desenvolvedores do Chrome. Ao trabalhar em um site (principalmente um site focado em dispositivos móveis), geralmente é uma boa ideia simular uma experiência móvel ao testar no navegador. Comece abrindo o Play Console no Chrome usando Menu > More Tools > Developer Tools:

Agora inspecione a saída JavaScript no console do desenvolvedor. Verifique se a guia "Console" está selecionada:

Agora, clique no botão de simulação de dispositivo no console do desenvolvedor. Ele é representado por um smartphone e um tablet lado a lado:

No menu que aparece, defina o dispositivo como "Nexus 5X":

Agora podemos começar a trabalhar na página em si. Vamos adicionar um anúncio ao nosso artigo em AMP.

Todos os anúncios em AMP são criados usando o componente amp-ad. Com esse componente, é possível configurar os anúncios de várias maneiras, como largura, altura e modo de layout. No entanto, muitas plataformas de publicidade exigem configurações adicionais, como o ID da conta da rede de publicidade, qual anúncio deve ser veiculado ou opções de segmentação da publicidade. Para amp-ad, basta preencher as várias opções necessárias como atributos HTML.

Confira este exemplo de um anúncio do Double Click:

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

Como você pode ver, essa é uma configuração muito simples. Observe o atributo type, que informa ao componente amp-ad qual plataforma de publicidade você quer usar. Nesse caso, queríamos a plataforma do Double Click. Portanto, o valor do tipo era doubleclick.

O atributo data-slot é mais exclusivo. Todos os atributos que começam com data- em amp-ad são específicos do fornecedor. Isso significa que nem todos os fornecedores vão exigir esse atributo específico ou reagir se ele for fornecido. Por exemplo, compare o exemplo de Double Click acima com um anúncio de teste da plataforma A9:

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

Tente adicionar os dois exemplos acima ao seu artigo logo após a tag <header>. Atualize a página. Dois anúncios de teste vão aparecer:

Importante: talvez você tenha alguns erros no console para desenvolvedores, como "Conteúdo misto" ou "Não é possível carregar XMLHttpRequest". O primeiro provavelmente está relacionado ao anúncio do A9, já que nem todo o conteúdo carregado é seguro. Esse é um requisito importante para todos os anúncios veiculados no AMP.

Vamos conhecer mais opções disponíveis para usar com o DoubleClick. Tente adicionar estas duas configurações de anúncio de segmentação geográfica à sua página:

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

Infelizmente, não é possível controlar o geotargeting pelo código da página. No entanto, esses anúncios de teste já foram configurados no painel do DoubleClick para serem exibidos apenas em países específicos, principalmente no Reino Unido e nos Estados Unidos da América.

Atualize a página e confira. A captura de tela a seguir foi feita na Austrália, então nenhum anúncio está sendo carregado:

O exemplo de segmentação geográfica acima demonstra como o amp-ad é flexível o suficiente para todos os tipos de recursos de plataforma de publicidade.

Observação: dentro dessas tags amp-ad, há outras tags div com um atributo chamado "fallback". Você consegue adivinhar o que o atributo substituto indica? Ele informa ao sistema de carregamento do AMP para mostrar apenas o conteúdo desse elemento quando o elemento pai não é carregado. Isso significa que o elemento pai volta ao elemento filho, daí o termo "substituição".

As redes de publicidade compatíveis no momento são:

• A9
• Adblade
• Adform (link em inglês)
• AdReactor
• Google AdSense
• AdTech
• Criteo
• Dot and Media
• DoubleClick
• Flite
• Industrybrains (em inglês)
• OpenX
• plista
• Smart AdServer
• Yieldmo
• Revcontent
• TripleLift
• Teads
• I-Mobile
• Webediads

Confira a página de documentação do componente de anúncio AMP para informações sobre as plataformas de publicidade mais recentes.

No próximo capítulo, vamos conhecer componentes AMP mais avançados e como incluí-los nos documentos AMP.

Observação: não é permitido exibir JavaScript fornecido pela rede de publicidade no documento AMP. Em vez disso, o ambiente de tempo de execução de AMP carrega como o documento AMP um iframe de uma origem diferente (por meio de um sandbox de iframe) e executa o JS da rede de publicidade dentro do sandbox desse iframe.

Importante: a especificação do amp-ad provavelmente vai evoluir significativamente com o tempo. A abordagem atual foi desenvolvida para inicializar o formato, para poder exibir anúncios.

6. Expandir o conteúdo com componentes estendidos

Agora você tem um documento AMP básico com texto, uma imagem e até um anúncio incorporado na página. Todos os ingredientes principais para contar uma história e gerar receita com seu conteúdo. No entanto, os sites modernos geralmente incluem outros recursos além de imagens e texto.

Vamos levar nosso documento AMP para o próximo nível e conhecer os componentes disponíveis além dos principais mencionados anteriormente.

Neste capítulo, vamos tentar adicionar funcionalidades da Web mais avançadas, que são comuns em artigos de notícias:

• Vídeos do YouTube
• Tweets
• Citações de artigos

Incorporar um vídeo do YouTube

Vamos tentar incorporar um vídeo do YouTube ao documento. O código a seguir vai incorporar um vídeo, adicione à sua página:

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

Atualize a página e confira. Em vez de um vídeo, você vai ver o texto "Não foi possível carregar o vídeo".

Mesmo que seu navegador consiga mostrar vídeos do YouTube sem problemas, você ainda vai receber esse erro. Por quê? Na verdade, o vídeo não falhou ao carregar, mas sim o próprio componente.

Nem todos os componentes estão incluídos no arquivo JavaScript da biblioteca AMP principal. Precisamos incluir uma solicitação JavaScript adicional para o componente do YouTube em particular. Todos os componentes, exceto um conjunto principal, vão exigir essas referências adicionais de JavaScript.

Adicione a seguinte solicitação à tag <head>:

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

Atualize a página para ver o vídeo do YouTube:

Mais uma vez, especificamos a largura e a altura do vídeo para que a proporção seja calculada pelo sistema de layout do AMP. Além disso, o tipo de layout foi definido como responsivo, o que significa que o vídeo vai preencher a largura do elemento pai.

Saiba mais sobre o componente do YouTube.

Observação: além do componente do YouTube, o AMP inclui um componente de vídeo HTML5 genérico chamado amp-video e um componente AMP dedicado ao Brightcove Video Cloud ou ao player Perform chamado amp-brightcove. Confira AMP By Example para mais exemplos de reprodução de vídeo, incluindo vídeos do Facebook, Instagram, Vine, Twitter e Dailymotion.

Observação: o atributo de substituição é útil para fornecer informações caso um componente não seja carregado. E se o navegador do usuário não for compatível com um componente AMP específico? É uma experiência melhor para o usuário mantê-lo informado sobre por que uma funcionalidade pode estar faltando.

Mostrar um tweet

Incorporar tweets pré-formatados do Twitter é um recurso comum em artigos de notícias. O componente do Twitter em AMP pode oferecer essa funcionalidade com facilidade.

Comece adicionando a seguinte solicitação JavaScript à tag <head> do documento:

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

Agora, no seu artigo, adicione este código para incorporar o tweet:

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

O atributo data-tweetid é outro exemplo de atributo personalizado exigido por um fornecedor de plataforma específico. Nesse caso, o Twitter reconhece o atributo data-tweetid como correspondente a um tweet específico a ser incorporado na página.

Atualize o navegador e confira a página. O tweet vai aparecer:

Saiba mais sobre o componente do Twitter.

Observação: o AMP inclui ainda mais componentes para incorporar conteúdo de redes sociais. Confira o componente do Instagram e o componente do Vine.

Destacar uma citação de artigo

Um elemento comum em artigos de notícias é destacar trechos de texto particularmente envolventes. Por exemplo, uma citação de uma fonte específica ou um fato importante pode ser repetido em uma fonte maior para atrair a atenção do leitor.

No entanto, como nem todas as citações ou trechos de texto têm necessariamente o mesmo comprimento de caracteres de string, pode ser difícil equilibrar o tamanho maior da fonte com a quantidade de espaço que o texto específico vai ocupar na página.

O AMP inclui outro componente especificamente para esse tipo de situação, chamado amp-fit-text. Ele permite definir um elemento de largura e altura fixas e um tamanho máximo de fonte. O componente dimensiona de maneira inteligente o tamanho da fonte para ajustar o texto da citação à largura e altura disponíveis.

Vamos tentar. Primeiro, adicione a biblioteca do componente à tag <head>:

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

Adicione o seguinte à sua página:

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

Atualize a página e confira o resultado.

Agora faça mais testes. O que acontece quando a citação é muito mais curta?

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

Ou uma citação mais longa?

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

Como último experimento com amp-fit-text, tente criar um texto curto, como #YOLO, com uma altura muito maior, por exemplo, um valor de 400, e mantenha o valor do atributo max-font-size de 42. Como a página ficaria? O texto fica centralizado verticalmente ou a altura da tag amp-fit-text é reduzida para caber no tamanho máximo da fonte? Sabendo o que você sabe sobre o sistema de layout do AMP, tente responder à pergunta antes de editar o documento.

7. Carrosséis complexos

Outro recurso comum no desenvolvimento da Web é um carrossel. O AMP inclui um componente genérico projetado para atender a essa necessidade. Vamos começar com um exemplo simples, como um carrossel de imagens.

Não se esqueça de incluir a biblioteca de componentes de carrossel adicionando a seguinte solicitação JavaScript à tag <head> do seu documento:

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

Em seguida, vamos incorporar um carrossel simples de imagens com um layout responsivo e uma largura e altura predefinidas. Adicione o seguinte à sua página:

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

Atualize a página para ver um carrossel:

O componente carrossel pode ser configurado de várias maneiras. Tente mudar o tipo para slides e veja o resultado. Mude também o atributo layout do amp-carousel e das imagens dentro dele para responsive.

Agora, em vez de uma lista de rolagem de elementos, você verá um elemento por vez. Tente deslizar na horizontal para navegar pelos elementos. Se você deslizar até o terceiro elemento, não será possível deslizar mais.

Em seguida, adicione o atributo loop. Atualize a página e deslize para a esquerda imediatamente. O carrossel fica em loop sem parar.

Por fim, vamos fazer com que esse carrossel seja reproduzido automaticamente a cada dois segundos. Adicione o atributo autoplay à página e o atributo de atraso com um valor de 2.000, assim: delay="2000".

O resultado final vai ficar assim:

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

Atualize a página e gire a roleta!

Observação: talvez você tenha notado que estamos usando o tipo de layout fixed-height no carrossel. É um requisito do tipo carousel, enquanto o tipo slides exigia o tipo de layout responsive. Os elementos de altura fixa ocupam o espaço disponível, mas mantêm a altura inalterada. O atributo de altura precisa ser definido, enquanto o atributo de largura não pode estar presente ou precisa ser definido como "automático" para que fixed-height funcione.

Os carrosséis de imagens são ótimos, mas e se quisermos que um conteúdo mais complexo apareça no nosso carrossel? Vamos tentar misturar um pouco as coisas colocando um anúncio, um texto e uma imagem em um único carrossel. O amp-carousel realmente consegue lidar com essa mistura de uma só vez? Com certeza.

Primeiro, vamos adicionar esse estilo à página para garantir que os componentes amp-fit-text e amp-carousel funcionem juntos com segurança:

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

Agora tente colocar o seguinte código de carrossel na sua página:

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

Atualize a página para ver algo assim:

Saiba mais sobre o componente de carrossel.

Observação: no nosso último exemplo, você deve ter notado que o componente amp-ad incluía um elemento div filho com o atributo placeholder. Você deve se lembrar de que encontramos um cenário semelhante com amp-ad no início do codelab com o sistema fallback. Qual é a diferença entre marcador de posição e substituto? Os elementos Fallback aparecem quando o elemento pai não é carregado, ou seja, se não houver um anúncio disponível. Já os elementos placeholder aparecem no lugar do elemento pai enquanto ele está sendo carregado. De certa forma, cada atributo limita o processo de carregamento do elemento pai.

Importante: infelizmente, o componente amp-ad usa um iframe nos bastidores, o que pode interferir nos gestos de deslizar do próprio carrossel. Esse é um problema conhecido que está sendo investigado.

8. Rastrear com amp-analytics

As plataformas de análise são geralmente integradas aos sites por snippets JavaScript inline e chamadas de função que acionam eventos enviados de volta ao sistema de análise. A tecnologia AMP oferece uma sintaxe de configuração JSON flexível para reproduzir esse processo em diversos parceiros de análise.

Confira a seguir um exemplo de rastreamento tradicional do Google Analytics com JavaScript, que será reescrito no formato JSON do amp-analytics. Primeiro, a abordagem tradicional do 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>

O código acima é bem simples e envia uma notificação para que o evento de exibição de página seja rastreado.

Para replicar tudo isso no componente amp-analytics, primeiro inclua a biblioteca de componentes no <head> do documento:

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

Em seguida, incluímos o componente da seguinte forma:

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

Pode parecer mais complicado, mas é um formato muito flexível para descrever vários tipos diferentes de eventos. Além disso, o formato JSON não inclui o blob de código JavaScript no exemplo tradicional, o que pode levar a erros se for alterado acidentalmente.

No formato JSON, a chave "triggers" inclui um conjunto de chaves que representam todos os acionadores de eventos que vamos rastrear. As chaves desses acionadores são descrições do evento, por exemplo, "pageview padrão" acima. O valor da chave do título se relaciona ao nome da página que está sendo visualizada.

Expandindo o exemplo acima, podemos adicionar outro acionador "clicar em #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>

Esse acionador é exatamente o que parece. Ao usar o seletor do DOM "#header", podemos consultar uma tag com o ID "header". No evento de um "clique" ou toque no dispositivo, enviamos uma ação de evento "clicked-header" para a plataforma de análise com o rótulo de categoria "examples".

Se você tiver uma plataforma de acompanhamento personalizada que queira integrar, ainda poderá usar o amp-analytics e definir seus próprios endpoints de URL personalizados para as informações de acompanhamento. Leia mais sobre o componente amp-analytics neste link.

Observação: em todos esses exemplos de análise, "UA-YYYY-Y" precisa ser substituído pelo código de acompanhamento do Google Analytics do seu site.

Observação: se você quiser sistemas de rastreamento mais simples, confira o amp-pixel. Se você só precisa rastrear visualizações de página, essa é uma solução mais leve do que o amp-analytics, já que visa apenas resolver os requisitos do acompanhamento de pixels tradicional. Saiba mais sobre isso aqui.

Importante: o componente de análise ainda está em desenvolvimento. À medida que o componente amp-analytics se desenvolve, mais plataformas de análise e tipos de eventos para rastrear serão adicionados. Para conferir as informações mais recentes, leia o documento de referência.

9. Navegar pelo seu site

Um requisito comum dos sites para dispositivos móveis é a inclusão de um menu de navegação. Esses menus podem ter várias formas. Confira alguns exemplos de como a navegação pode ser apresentada em um documento AMP:

1. Vincule de volta à sua página inicial, a opção mais simples.
2. Um menu de subcabeçalho usando o componente de carrossel.

Link da página inicial

A maneira mais simples de fazer com que os usuários acessem as opções de navegação normais do seu site é redirecioná-los para a interface normal do site.

Tente adicionar este link HTML à 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 adicione esta regra ao CSS inline:

.home-button {
  float: left;
}

Agora atualize a página. No canto superior esquerdo da página, há um link que aponta para homepage.html. Se você clicar nele, vai descobrir rapidamente que ele não leva a lugar nenhum.

Esse link pode ser substituído pelo URL da página inicial do seu site para permitir que os usuários naveguem para outras partes do site usando a navegação normal.

Como mencionado, essa é a abordagem mais simples disponível: aproveitar a navegação do seu site atual. Em seguida, vamos conhecer duas alternativas.

Menu de subcabeçalho

Outra abordagem para esse problema é apresentar o menu de navegação do site dentro do documento AMP. Para manter o conteúdo em uma pequena seção da página, podemos usar um carrossel para apresentar um menu rolável abaixo do cabeçalho do site.

Como precisamos do componente de carrossel, adicione o JavaScript dele à tag <head> da sua página:

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

Tente adicionar este snippet HTML logo abaixo da 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 adicione estas regras ao seu CSS inline:

.sub-menu {
  background: black;
}

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

Agora atualize a página. Um menu de links vai aparecer abaixo do título do artigo. Esse menu pode ser rolado horizontalmente para armazenar muitos links de navegação.

Essa navegação por submenu é uma ótima maneira de armazenar muitos links sem consumir muito espaço na página.

10. Adicionar fontes

Como discutimos anteriormente, não são permitidas solicitações de folhas de estilo externas em documentos AMP. No entanto, há uma exceção a essa regra: as fontes.

As fontes são uma parte importante da experiência de leitura de artigos para usuários da Web. Como os navegadores da Web buscam arquivos de fontes por solicitações de folhas de estilo externas, essa exclusão no AMP é necessária.

Vamos adicionar uma referência à fonte Raleway ao documento:

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

Agora, atualize seu CSS para incluir uma referência ao Raleway:

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

Atualize a página e confira o novo visual dela. Inspecione também a saída do validador e observe que não há reclamações em relação a essa solicitação externa.

Observação: incluir uma fonte no documento não exige outros componentes. Dito isso, há um componente chamado amp-font. Ele não é usado para carregar fontes da Web. Em vez disso, você pode usá-lo para detectar se uma fonte da Web foi carregada ou não e responder adequadamente, se necessário.

Use esse recurso para ocultar o texto até que a fonte seja totalmente carregada. Assim, o usuário não vê o texto mudar da fonte temporária para a verdadeira. Se a fonte falhar, talvez seja melhor revelar a fonte temporária. Afinal, o pior cenário seria se o usuário não conseguisse ler nenhum texto. Leia mais sobre amp-font aqui.

11. Parabéns!

Você concluiu o codelab avançado do AMP e conheceu vários componentes importantes do AMP.

Esperamos que tenha ficado claro como o amp-ad e o amp-analytics podem ser usados para oferecer suporte a vários tipos de plataformas de publicidade e fornecedores de análises. Confira a lista completa de componentes do AMP disponíveis.

Confira outros tópicos e links para ampliar ainda mais suas habilidades.

• AMP By Example: um catálogo extenso de exemplos de componentes e padrões de componentes do AMP.
• Exemplos de anúncios do DoubleClick: um catálogo extenso de exemplos de amp-ad.
• Tudo sobre a descoberta de páginas
• Tags HTML não permitidas
• Animações e regras CSS restritas
• Mais sobre iFrames
• A CDN do AMP
• Lista de componentes AMP disponíveis