Formato AMP para E-mail

AMP é uma tecnologia conhecida pelo desenvolvimento de páginas web super rápidas em clientes móveis. O AMP é um conjunto de tags HTML com implementação em JavaScript que habilita funcionalidades com um foco adicional no desempenho e segurança, com facilidade. Existem componentes AMP para tudo, desde carousels a elementos de formulário responsivos e obtenção de conteúdo a partir de endpoints remotos.

O formato AMP para E-mail oferece um subconjunto dos componentes AMP que você pode usar em mensagens de e-mail. Os destinatários de e-mails de AMP podem visualizar e interagir com os componentes de AMP diretamente no e-mail.

Marcação necessária

O código a seguir representa a quantidade mínima de marcação que compõe uma mensagem de e-mail AMP válida:

<!DOCTYPE html>
<html ⚡4email>
  <head>
    <meta charset="utf-8" />
    <style amp4email-boilerplate>
      body {
        visibility: hidden;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    Hello, world.
  </body>
</html>

Uma mensagem de e-mail AMP DEVE

iniciar com o doctype <!doctype html>. 🔗
conter uma tag top-level <html ⚡4email> (<html amp4email> também é aceito). 🔗
conter as tags <head> e <body> (São opcionais em HTML). 🔗
conter uma tag <meta charset="utf-8"> como primeiro elemento filho da tag head. 🔗
conter uma tag <script async src="https://cdn.ampproject.org/v0.js"></script> dentro da tag head. 🔗
conter bolierplate amp4email (<style amp4email-boilerplate>body{visibility:hidden}</style>) dentro da tag head para inicialmente ocultar o conteúdo até que o AMP JS seja carregado. 🔗

A marcação AMPHTML inteira não pode exceder 200.000 bytes.

Estrutura e renderização

O AMP para Email é baseado no subtipo padrão multipart/alternative MIME, como definido em RFC 1521, seção 7.2.3.

Para mais informações, veja Estrutura e renderização de E-mails AMP.

Componentes AMP suportados

Veja AMP para E-mail: Componentes Suportados.

Requisitos de HTML

Veja HTML Suportado em AMP para Email.

Requisitos de CSS

Seletores and propriedades suportados

Veja CSS Suportado em AMP para Email.

Especificando CSS em um documento AMP

Todo CSS em qualquer documento AMP deve ser incluído numa tag <style amp-custom> dentro do head ou inline em atributos style.

...

<style amp-custom>
  /* any custom styles go here. */
  body {
    background-color: white;
  }
  amp-img {
    border: 5px solid black;
  }
  amp-img.grey-placeholder {
    background-color: grey;
  }
</style>

...

</head>

A tag <style> inteira não pode ultrapassar 50,000 bytes. O validador irá verificar isto.

Dimensões do documento

Largura ideal: 800px ou menos (se for mais largo o conteúdo poderá ser inesperadamente truncado em alguns clientes).
Altura: variável, o cliente permite que o usuário role através do conteúdo.

Validação

Para garantir que suas mensagens de e-mail atendam aos critérios rigorosos do formato AMP para e-mail, você pode usar as ferramentas de validação existentes do AMP.

Veja Validação de E-mails AMP para mais detalhes.

Privacidade e Segurança

Rastreando abertura de e-mails e interação

O AMPHTML permite o rastreamento de e-mails abertos com técnicas de rastreamento de pixels, da mesma forma que os e-mails HTML comuns. Qualquer solicitação de dados de serviços externos iniciada pelo usuário também indicará que o usuário está interagindo com a mensagem. Os clientes de e-mail podem oferecer a seus usuários a capacidade de desativar o carregamento de imagens remotas e outras solicitações externas.

Análises específicas do AMP

As seguintes técnicas de análise, específicas do AMP não são suportadas:

Considerações para componentes específicos

Solicitações para imagens dentro de <amp-carousel> ou <amp-accordion> podem indicar ao remetente que o usuário está interagindo com a mensagem.

Redirecionamentos no <amp-form> não são permitidos em tempo de execução.

Feedback e suporte

Para obter suporte e feedback sobre o AMP para E-mail, por favor, utilize o seguinte canal: ongoing-participation