Categorias
AMP Accelerated mobile pages

Adicionando Analytics em páginas AMP

Accelerated Mobile Pages (AMP) é uma plataforma usada para construir conteúdo estático de forma rápida. AMP possui o componente que permite mensurar as interações do usuário com Google Analytics em páginas AMP.

Configuração básica

Para criar uma instalação básica do Google Analytics em uma página AMP, copie e cole o código base a seguir e substitua <GA_MEASUREMENT_ID> pela a propriedade ID do seu Google Analytics.

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config" : {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>

Como funciona Google Analytics em páginas AMP?

O componente <amp-analytics> é um extended component para habilita-lo precisamos carregar o script responsável para carregar o componente:

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

Depois de incluir o script precisamos configurar nosso componente amp-analytics, primeiro atributo é o type, define qual o tipo de tracking iremos trabalhar nesse caso vamos utilizar o “gtag” mas o componente aceita uma lista extensa de ferramentas de tracking:

O segundo atributo é o data-credentials ele ativa a capacidade de leitura de cookies em uma solicitação específica por meio de um atributo config.

AMP não permite JavaScript fora de seu controle ou por bibliotecas não aprovadas; portanto a configuração das ferramentas de monitoramento precisa ser realizadas através de um JSON. No caso do Google Analytics dentro do nosso JSON precisamos de uma propriedade gtag_id(o id do nosso Google Analytics) válida e as configurações para definir como iremos realizar o monitoramento definido pelo atributo config

Tráfego AMP vs. Tráfego não-AMP

O tráfego AMP utiliza IDs de clientes diferentes daquele para o tráfego da Web por padrão. As páginas AMP são carregadas mais rapidamente e mostram padrões de tráfego diferentes dos correspondentes de uma página web padrão, o que geralmente significa que você irá obter métricas diferentes entre páginas AMP e não-AMP.

O uso de uma propriedade separada pode ajudar a medir o tráfego AMP com uma melhor análise das métricas. Se vc precisar usar uma única propriedade para medir o tráfTego AMP e ano AMP, use uma dimensão de fonte de dados ou uma dimensão personalizada para distingui-los.

Por padrão, o Google Analytics envia o valor “AMP” pela dimensão da fonte de dados. Use esse valor para segmentar, filtrar ou analisar o conteúdo AMP versus o conteúdo não-AMP.

Assim conseguimos adicionar Google Analytics em páginas AMP. Para ver mais conteúdo sobre AMP acesse a página da categoria ou deixe um comentário.

Categorias
AMP Accelerated mobile pages

Compartilhando conteúdo nas redes sociais com AMP

Nesse post iremos ver como compartilhar conteúdo nas redes sociais com AMP. Compartilhamento de conteúdo é um dos pontos chaves para trazer novos usuários para sua aplicação e um pontos chaves na plataforma AMP por questões de perfomance é o bloqueio de scripts de terceiros, ou seja, por vias tradicionais é impossível utilizar o botões de compartilhamento de plataformas como Twitter e Facebook, uma solução rápida é a utilização da share API, mas ela é apenas suportada por browsers mobile.

Mas isso não significa que AMP não suporta compartilhamento de conteúdo. Para isso temos o componente amp-social-share com ele podemos compartilhar conteúdo com diferentes opções:

  • Web share api
  • Email
  • Facebook
  • Linkedin
  • Pinterest
  • Tumblr
  • Twitter
  • Whatsapp
  • LINE
  • SMS

E seu uso é bem simples, primeiramente precisamos carregar os script amp-social-share-0.1.js:

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

Depois em nosso código chamar os botões de compartilhamento que queremos utilizar, a plataforma será definida pelo parâmetro type, como no exemplo a seguir:

<div class="social-bar">
<amp-social-share type="twitter"></amp-social-share>
<amp-social-share type="email"></amp-social-share>
<amp-social-share type="linkedin"></amp-social-share>
<amp-social-share type="facebook"></amp-social-share>
<amp-social-share type="whatsapp"></amp-social-share>
</div>

E o formato default será o seguinte:

Propriedades

Podemos modificar nossos botões de compartilhamento através de propriedades e o componente amp-social-share trabalha em geral com os seguintes atributos:

  • type – qual a plataforma que iremos compartilhar
  • data-target – se iremos abrir uma uma nova aba
  • data-share-endpoint – caso a plataforma em que requeremos compartilhar não esteja na lista acima podemos definir um endpoint caso a plataforma que queremos utilizar possua.
  • data-param-* – podemos adicionar atributos relacionados a plataforma em que queremos compartilhar o conteúdo.
  • width e height – podemos definir as dimensões de nossos componentes.

Customizando o estilo dos nosso botões

Por padrão sabemos que nosso componente carrega algum estilo como ícones e cores específicas da plataforma, também sabemos podemos modificar algumas funcionalidades e o formato do nosso botão através de propriedades.

Mas caso queiramos modificar a cor do nosso botão, por exemplo, para isso vamos precisar modificar o nosso CSS. Para essa ação podemos utilizar seletores específicos. Como no exemplo abaixo:

amp-social-share[type='twitter'],
amp-social-share[type='facebook'],
amp-social-share[type='email'],
amp-social-share[type='whatsapp'],
amp-social-share[type='linkedin'] {
background-color: black;
color: white;
}

No código acima temos a seleção dos items por tags e tipo, poderíamos aplicar um seletor genérico por tag, mas nesse exemplo eu adicionei o tipo como uma opção de alterar item a item.

Esse tutorial faz parte de um curso online que estou criando no meu canal do youtube, caso deseja acompanhar, só assinar o canal:

Veja mais posts sobre AMP na página da categoria ou qualquer dúvida deixe um comentário e até o próximo post

Categorias
AMP Accelerated mobile pages WordPress

AMP para WordPress

No post anterior falei sobre plugins de performance para WordPress, agora chegou a hora de falar de outro plugin relacionado a performance o Plugin do AMP para WordPress.

Assistindo conteúdo sobre WP no YouTube, por muitas vezes o plugin é vendido como plugin para deixar o WordPress rápido. Mas como isso é possível?

AMP é uma biblioteca que roda no front-end, ela foca na entrega do conteúdo e na experiência do usuário, ele possui três ferramentas cruciais para melhoria do desempenho:

  • AMP JS – Possui uma série de melhorias relacionadas a performance com tree shaking e lazy loading.
  • AMP HTML – Uma biblioteca de componentes HTML, como, slideshow, light-box, menu slideshow, player de vídeo entre outros.
  • AMP Cache – Esse item é ativado quando sua aplicação possui código AMP válido.

Umas das condições do plugin AMP é liberar a renderização de conteúdo não permitir que scripts terceiros aumentem o tempo de exibição do conteúdo da sua página.

Um bom exemplo de bloqueio da renderização de nossa página é a utilização embed de vídeos do YouTube quando criei o curso de PWA decidi criar uma página com todos os vídeos, inclui 17 embeds em uma mesma página, e o resultado foi o seguinte:

Auditoria de desempenho utilizando chrome devtools

Nos testes realizados na versão semAMP:

  • Primeira impressão de conteúdo é realizada em 3.4 segundos
  • O tempo de interação vai para 29.9 segundos isso significa que um usuário irá levar 30 segundos para interagir com o conteúdo.

O principal problema é causado por conta das várias requisições feita por múltiplos embeds do Youtube, por conta de rodarem um um iframe eles não conversam entre si acabam requisitando os mesmo scripts diversas vezes.

requisições realizadas pela página sem o plugin AMP

Como podemos ver na imagem acima temos varias requisições para o mesmo arquivo JavaScript totalizando 45 requisições, essas requisições aumentam o tamanho total da página, além de todas essas requisições serem disparadas ao mesmo tempo, assim impossibilitando o usuário de interagir com a página.

Quando ativamos o plugin AMP para mesma página temos o seguinte resultado.

Teste performance realizado como o plugin AMP ativo

Como podemos ver temos uma redução no tempo de carregamento e uma melhor na pontuação referente a performance

  • Primeira impressão de conteúdo é realizada em 2,8 segundos
  • O tempo de interação 5 segundo, essa foi a redução mais significativa.

Isso ocorre porque AMP passa a gerenciar esses recursos, como por exemplo conteúdo “embedado”agora o número de requisições JavaScript cai para 15 arquivos:

Requisições JavaScript feitas com o plugin ativo.

Além da redução do tempo de carregamento também temos a redução de transferências de arquivos de 2.2mb para 1.2mb. Essa comparação mostra um dos benefícios de se trabalhar com a biblioteca. Mas antes de sair ativando o plugin precisamos entender como ele funciona.

O plugin

Quando foi lançado em 2016, o AMP teve seu primeiro plugin criado por uma parceria entro Google e Automattic, o plugin era bem experimental. Nessa época outros plugins criados pela comunidade ofereciam muito mais recursos. Por muito tempo utilizei plugins criados pela comunidade.

Em 2019, visitando o stand do Google no WordCamp Europe tive a possibilidade de ver o trabalho feito pelo Google para reativar o plugin do AMP. Era visível nos últimos 2 anos uma movimentação do Google para contribuir com a comunidade WP.

Nessa época decidi baixar o plugin novamente para realizar testes: https://wordpress.org/plugins/amp/

Página principal do plugin do AMP

Depois dos primeiros testes vi que as melhorias eram significativas comparado a última vez que tinha o utilizado o plugin. Os testes foram realizados utilizando o modo Padrão. Para entender mais o Plugin AMP funciona ele possui três modos:

  • Leitor(2016): Onde o usuário tem uma versão mais simples todas as páginas amp serão redirecionadas para uma nova url com /amp no final e o plugin irá gerenciar todos os erros de validação.
  • Transição: O plugin delega ao administrador do conteúdo a escolha de quais as páginas serão exibidas como AMP e não-AMP. O visual segue o mesmo visual do seu tema WordPress.
  • Padrão: Nessa modo sua aplicação irá tornar full AMP. Onde todo o conteúdo da sua aplicação irá utilizar somente em uma versão AMP.

Após ativar o plugin, acessamos no menu lateral do painel de controle da sua aplicação WordPress você irá encontrar a opção AMP.

Acessando o painel do plugin iremos ver as seguinte opções:

tela principal do plugin AMP

Inicialmente temos um banner de boas vindas, em seguida temos duas opções de experiência AMP website e AMP Stories.

  • AMP Website: irá habilitar AMP em sua aplicação, após a seleção dessa opção temos a opção de escolher qual template iremos utilizar
  • AMP Stories: vou dedicar um post para essa sessão mas uma breve introdução stories foi incluído recentemente na plataforma com ele temos a opção de adicionar chamadas aos nossos posts com animações. Caso queira saber mais confira a documentação oficial do AMP Stories.
painel com opções de templates

Como havia mencionado anteriormente, na tela principal do plugin temos a opção de selecionar os templates que iremos utilizar em nossa aplicação. Caso escolha o modo leitor, as páginas e posts que utilizam AMP terão as páginas corrigidas para AMP, automaticamente. É a versão que não requer nenhuma ação por parte do administrador mas sua experiência é bem simple.

Validação de conteúdo AMP

As versões de Transição e Padrão precisam de uma ação do administrador para obter um conteúdo válido AMP. Porque essas versões tentarão ser idêntica a versão não AMP. Para isso o processo de validação precisa ser direcionado pelo administrador da aplicação.

Mas qual a importância de ter um conteúdo válido AMP? Primeiro por uma questão de boas práticas manter a qualidade do código de sua aplicação e Segundo todo conteúdo válido pode fazer uso do AMP Cache.

AMP Cache é recurso disponibilizado por motores de busca como Google e Bing que melhora ainda mais a performance da sua aplicação os resultados vindo dos motores de busca serão servidos pelo AMP cache.

Primeiro item para obter o conteúdo AMP válido é ter um tema compatível, no meu caso que utilizo o Twenty Twenty não precisei realizar nenhuma alteração em meu tema. Segundo passo foi resolver os problemas de compatibilidade com plugins.

Podemos fazer a validação por dois caminhos por índice de erros ou por página. No meu caso não utilizo muitos plugins, apenas um plugin para exibir os códigos dos tutoriais no meu blog, o plugin não era compatível com AMP assim causando problemas de validação, como podemos ver na imagem abaixo:

lista de erros de validação AMP

A solução foi simples navegando na lista de plugins compatíveis achei uma alternativa para esse plugin:

Substitui pelo plugin Syntax-hightlighting Code block e resolvi o problema referentes a plugin. Caso isso não seja possível você pode desabilitar as partes que causam problemas e verificar como o plugin se comporta. Segunda opção é utilizar componentes AMP para substituir plugins posso fazer outro post sobre o assunto, caso tenha interesse.

Analytics

Outro ponto crucial é a para de monitoramento da sua aplicação, caso não utilize nenhum plugin de tracking o plugin disponibiliza uma área para você adicionar o código do analytics com AMP código possui um formato diferente ele trabalha com um formato JSON:

{
    "vars": {
        "account": "UA-doseusite-1"
    },
    "triggers": {
        "trackPageview": {
            "on": "visible",
            "request": "pageview"
        }
    }
}

Na sessão do analytics do plugin do AMP você terá mais informações de como adicionar o código analytics mas o formato acima é o esperado no caso da propriedade account deve ser passado o código UA so seu analytics.

Caso não queira se preocupar como código uma alternativa para conectar seu plugin AMP para WordPress com Google Analytics é a utilização do plugin SiteKit, ele sincroniza todos os serviços de tracking:

Plugin site kit by Google

Essa é uma breve intro sobre o plugin do AMP para WordPress em meu canal do Youtube também gravei sobre o assunto:

intro sobre AMP

Caso queira saber mais sobre AMP tenho um curso de desenvolvimento de aplicações AMP em meu canal. E aqui no blog também tenho uma página dedicada sobre o assunto.

Categorias
AMP Accelerated mobile pages

Convertendo uma aplicação AMP em uma PWA

Agora chegou o momento de conectar os meus dois assuntos favoritos, Progressive Web Apps(PWA) e AMP. Se você ainda não sabe o que é uma PWA podemos definir conjunto de tecnologias que nos permitem criar aplicações web com recursos que antes só possíveis em aplicações nativas se quiser saber mais sobre PWA tenho um curso dedicado em meu canal.

As PWA possui uma série de diferentes API que podem ser aplicadas a diferentes soluções, mas para o caso de nossa aplicação AMP vamos abordar dois items:

  1. Tonar nossa aplicação instalável
  2. Adicionar suporte a versão offline.

Criando um web app manifest para nossa PWA

Primeiro passo vamos criar um web app manifest arquivo json que permite que dispositivos que reconheçam que nossa aplicação pode se instalável. Para isso vamos adicionar em nosso projeto um arquivo chamado manifest.json e nele vamos adicionar o seguinte código:

{
"short_name": "Caipirinha",
"name": "How to prepare the best caipirinha",
"icons": [
{
"src": "./images/capi_icon_192.png",
"type": "image/png",
"sizes": "192x192"
},
{
"src": "./images/capi_icon_512.png",
"type": "image/png",
"sizes": "512x512"
}
],
"start_url": "/index.html",
"background_color": "#00d1c3",
"display": "standalone",
"scope": "/",
"theme_color": "#00d1c3"
}

O código acima descreve as informações que iremos exibir para o usuário quando ele instalar nossa aplicação, que são elas:

  • short_name: o nome que sera exibido na tela inicial do nosso usuário.
  • icons: com uma lista de ícones que iremos exibir em diferentes plataformas.
  • start_url: o endereço nossa aplicação irá carregar quando acessada através do ícone na tela inicial do usuário.
  • background_color: a cor do background da splash screen do nosso app.
  • display: o modo em que nossa PWA será exibida
  • theme_color: as cor do tema da nossa aplicação, por exemplo, barra de controle.

Depois que criarmos nosso arquivo manifest.json temos adicionar uma referência dentro da tag head de nosso index.html ao arquivo de configuração, como podemos ver no código abaixo:

<link rel="manifest" href="/manifest.json">

Adicionando suporte a versão off-line

Agora que já definimos como nosso app será instalado é hora de adicionar a versão off-line de nossa aplicação para isso vamos trabalhar com service workers.

Service Worker um script que é executando por nosso browser em background, separado de nosso DOM onde funciona como proxy acompanhando as requisições no nosso app.

Caso queira saber mais sobre o assunto confira o post sobre service worker.

Mas com esse recurso conseguimos controlar quando nosso app faz requisições a rede e definir estratégias de cache e suporte a versão offline utilizando em conjunto com a cache API.

Atualmente existem bibliotecas que facilitam a implementação desses recursos, por exemplo, Workbox onde também tenho um post mais detalhado sobre o assunto aqui.

Mas AMP vai um passo além do Workbox e abstrai uma série de passos na configuração de um service worker para implantação de estratégias de cache e versão off-line. Isso tudo utilizando AMP Service Worker ele armazena automaticamente os scripts e os documentos de nossa aplicação.

Como criar um service worker com AMP?

Passo 1 – criar o arquivo que irá importar o AMP Service Worker e incializa-lo, para isso vamos criar um arquivo JavaScript chamado sw.js e adicionar os seguinte código:

importScripts('https://cdn.ampproject.org/sw/amp-sw.js');
AMP_SW.init();

Passo 2 – Incluímos o script que irá instalar o AMP Service Worker próximos as scripts que você já carrega em sua aplicação AMP.

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

Passo 3 – Adicionamos dentro do corpo da nossa página HTML o componente amp-install-servieworker:

<amp-install-serviceworker src="/sw.js"
           data-iframe-src="install-sw.html"
           layout="nodisplay">
</amp-install-serviceworker>

O componente amp-install-serviceworker irá registrar um service worker definido na propriedade src, dois pontos importante sobre o service worker:

  • Precisa estar na pasta raiz da aplicação
  • Precisa ser servido via HTTPS.

A segunda propriedade é o data-iframe-src é um atributo opicional que será responsável por verificar se o browser possui suporte a service worker e instalar-lo em caso possua.

Passo 4 – o último passo vamos criar o arquivo definida pela propriedade data-iframe-src:

<!doctype html>
<title>installing service worker</title>
<script type='text/javascript'>
if('serviceWorker' in navigator) {
navigator.serviceWorker.register('./sw.js');
};
</script>

Com esse 4 passos temos nossa primeira versao offline, o AMP Service Worker nos permite definir estratégias de cache para arquivos especificos. Caso queira saber mais sobre estrategias de cache eu escrevi um post aqui.

Vou criar mais um post de como modificar estratégias de cache e exibir uma página específica parar quando os usuários estiverem off-line.

Categorias
AMP Accelerated mobile pages

Trabalhando com AMP image light-box

No post anterior vimos como implementar um light-box com o componente amp-lightbox e nesse post vamos ver como implementar com AMP image light-box para imagens, assim iremos trabalhar com o componente amp-image-lightbox. Ele possui algumas particularidades comparado ao componente amp-lightbox mas o comportamento será bem parecido.

amp-image-lightbox

O componente amp-image-lightbox habilita um lightbox específico para images, quando acionado a image será exibida em destaque. Para trabalhar como o componente precisamos primeiramente carregar o script:

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

Em seguida adicionamos em nossa aplicação seguinte o código:

<amp-image-lightbox id="lightbox-caipirinha" layout="nodisplay"></amp-image-lightbox>
<amp-img
  on="tap:lightbox-caipirinha"
  role="button"
  tabindex="0"
  src="caipirinha.jpg"
  width="200"
  height="100"
></amp-img>

O amp-img possui um evento de tap que irá referenciar o light-box que queremos exibir e nesse caso o amp image lightbox (amp-image-lightbox) com id “lightbox-caipirinha” será o nosso alvo, assim como amp-lightbox ele possui o layout “nodisplay” e com o código acima o resultado será o seguinte:

light-box quando acionado

O componente amp-image-lightbox já vem com estilização do background interações, por exemplo, zoom, panorâmica, e ações para fechar o lightbox quando o usuário clicar fora da imagem ou precionar ESC.

Diferente do amp-lightbox o amp-image-light pode ser utilizado por múltiplas images, assim podemos ter duas images fazendo referência ao mesmo light-box. Como no código a seguir:

<amp-image-lightbox id="lightbox-caipirinha" layout="nodisplay"></amp-image-lightbox>

<amp-img
  on="tap:lightbox-caipirinha"
  role="button"
  tabindex="0"
  src="caipirinha1.jpg"
  width="200"
  height="100"
></amp-img>

<amp-img
  on="tap:lightbox-caipirinha"
  role="button"
  tabindex="0"
  src="caipirinha2.jpg"
  width="200"
  height="100"
></amp-img>

Legendas

Um recurso opcional é a inclusão de legendas no light-box, para isso precisamos incluir uma tag “figure” e como filha uma tag “figcaption” ou adicionar uma descrição com aria através da propriedade “aria-describedby” essas serão as duas opções que veremos no código a seguir:

Com tag figure

<amp-image-lightbox id="lightbox-caipirinha" layout="nodisplay"></amp-image-lightbox>

<!-- Captions via figcaption -->
<figure>
  <amp-img
    on="tap:lightbox-caipirinha"
    role="button"
    tabindex="0"
    src="caipirinha.jpg"
    layout="responsive"
    width="300"
    height="246"
  ></amp-img>
  <figcaption>Learn how to prepare the best Caipirinha</figcaption>
</figure>
Resultado do light-box com legenda

Com ARIA

<amp-image-lightbox id="lightbox-caipirinha" layout="nodisplay"></amp-image-lightbox>

<!-- Captions via figcaption -->
<div>
  <amp-img
    on="tap:lightbox-caipirinha"
    role="button"
    tabindex="0"
    src="caipirinha.jpg"
    aria-describedby="image-description"
    layout="responsive"
    width="300"
    height="246"
  ></amp-img>
  <div id="image-description">Caipirinha from Brazil</div>
</div>

Em ambas situações o resultado visual será o mesmo, com a legenda no canto inferior.

Atributos

Os atributos no componente amp-image-lightbox é um pouco diferente do amp-lightbox não temos opções de animação mas temos a seguintes propriedades:

  • layout(obrigatório): deve ser nodisplay
  • id (obrigatório): necessário para ser referenciado pelo elemento que ira disparar a ação de exibir
  • data-close-button-aria-label(opcional): Uma legenda usada pelo ARIA que podemos incluir em nosso botão fechar.

Se quiser saber mais sobre am-lightbox eu publiquei um post falando sobre o componente. Para acompanhar o curso de AMP assine meu canal no YouTube. Qualquer dúvida deixe um comentário e até o proximo post.