Crie seu primeiro E-mail AMP
O AMP para E-mail permite que remetentes de e-mail usem AMP em suas mensagens de e-mail para oferecer suporte a uma série de novos recursos. Os e-mails escritos com AMP podem conter elementos interativos, como carrosséis de imagens ou acordeões, têm conteúdo que permanece sempre atualizado na mensagem e permitem que os destinatários realizem ações como responder a um formulário, tudo sem sair da caixa de entrada.
O AMP para E-mail é compatível com e-mails existentes. A versão AMP da mensagem é incorporada ao e-mail como um novo componente MIME, além do HTML e do texto simples, garantindo a compatibilidade em todos os clientes de e-mail.
Siga este tutorial para criar e enviar seu primeiro e-mail dinâmico com tecnologia AMP. Você pode ver o código finalizado aqui.
Comece com o boilerplate do E-mail AMP
O Playground AMP suporta o formato AMP para E-mail, permitindo que você desenvolva, teste e valide seus e-mails AMP. Abra o Playground AMP e verifique se o formato está definido como AMP for Email no canto superior esquerdo. Você deve ver o seguinte código:
<!DOCTYPE html>
<html ⚡4email data-css-strict>
<head>
<meta charset="utf-8" />
<script async src="https://cdn.ampproject.org/v0.js"></script>
<style amp4email-boilerplate>
body {
visibility: hidden;
}
</style>
<style amp-custom>
h1 {
margin: 1rem;
}
</style>
</head>
<body>
<h1>Hello, I am an AMP EMAIL!</h1>
</body>
</html>
Ele contém toda a marcação necessária e o código mínimo para um e-mail AMP válido. Observe também os muitos outros exemplos de modelos de e-mail válidos na lista drop-down no menu drop-down superior direito.
Vamos dar uma olhada em algumas diferenças notáveis em relação a e-mails HTML clássicos:
- E-mails AMP devem se identificar como tal, incluindo
⚡4email, ouamp4email, na tag html. - A tag
<head>também deve conter uma tag<script>que carrega o runtime AMP.<script async src="https://cdn.ampproject.org/v0.js"></script> - Um boilerplate CSS para inicialmente ocultar o conteúdo até que o AMP seja carregado.
<style amp4email-boilerplate>body{visibility:hidden}</style>
Se você já trabalhou com e-mails antes, a ideia de colocar um script em um e-mail pode disparar vários sinais de alerta na sua cabeça! Fique tranquilo, os provedores de e-mail que oferecem suporte a e-mails AMP aplicam verificações de segurança rigorosas que só permitem a execução de scripts AMP controlados nos seus clientes. Isto permite que recursos dinâmicos e interativos sejam executados diretamente nas caixas de correio dos destinatários, sem vulnerabilidades de segurança! Leia mais sobre a marcação necessária para emails AMP aqui.
Inclua uma imagem
A maioria das tags HTML usadas em e-mails pode ser usada em e-mails de AMP. No entanto, algumas tags, como a tag <img> são substituídas por uma equivalente AMP, <amp-img>.
A tag <amp-img> requer que a largura e a altura de uma imagem sejam definidas e, diferentemente de <img>, <amp-img>, ela precisa ser explicitamente fechada usando </amp-img>.
<amp-img
src="https://link/to/img.jpg"
alt="photo description"
width="100"
height="100"
>
</amp-img>
Além disso, os arquivos GIF são suportados através de <amp-anim>.
Como os e-mails não são hospedados em seu servidor, as URLs devem usar caminhos absolutos nos e-mails AMP e devem ser HTTPS.
Placekitten é um site que usa imagens de gatinhos como placeholders. Eles permitem que você escolha o tamanho de uma imagem diretamente na URL!
Podemos incluir uma imagem em nosso primeiro e-mail adicionando o código abaixo.
<body>
<amp-img
src="https://placekitten.com/800/400"
alt="Welcome"
width="800"
height="400"
>
</amp-img>
</body>
Deixe-o responsivo
E-mails são visualizados em uma variedade de dispositivos e tamanhos de tela, e o AMP vem com um sistema de layout integrado! Com o sistema amp-layout e media queries, implementar e-mails responsivos é fácil. Para dimensionar nossa imagem de gatinho colocada nas telas apropriadas, adicione o atributo layout="responsive" à sua tag <amp-image>.
<amp-img layout="responsive" src="https://placekitten.com/800/400" alt="Welcome" height="400" width="800"></amp-img>
Aumente e diminua a janela do navegador para ver a imagem mudar de tamanho! Veja a lista de componentes específicos de layout suportados.
Modifique a apresentação e o layout
Uma imagem é fácil, mas e se quisermos exibir mais imagens? O AMP para E-mail oferece suporte a elementos de layout, tais como acordeões e barras laterais.
Para este tutorial, vamos usar <amp-carousel> para exibir fotos de gatos para adoção.
Adicione o script amp-carousel no head do seu e-mail.
<script
async
custom-element="amp-carousel"
src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"
></script>
Em seguida, envolva nossa primeira imagem dentro do elemento <amp-carousel>.
<amp-carousel layout="responsive" width="800" height="400" type="slides">
<amp-img
layout="fill"
src="https://placekitten.com/800/400"
alt="Welcome"
height="400"
width="800"
></amp-img>
</amp-carousel>
Você talvez perceba que nada mudou, e isto é uma coisa boa! Nosso carrossel recebeu o atributo type=slides, o que significa que ele mostrará uma foto de cada vez. Como colocamos apenas uma foto dentro das tags, ele não mostra, ao usuário, as setas do slider.
Em seguida, substitua a imagem de gatinho placeholder por nossos gatos AMP para adoção em seu <amp-carousel>.
<amp-carousel
id="carousel-with-preview"
width="800"
height="400"
layout="responsive"
type="slides"
on="slideChange:AMP.setState({currentCat: event.index})"
>
<amp-img
layout="fill"
src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_caleb_woods.jpg"
alt="photo courtesy of Unsplash"
></amp-img>
<amp-img
layout="fill"
src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_craig_mclaclan.jpg"
alt="photo courtesy of Unsplash"
></amp-img>
<amp-img
layout="fill"
src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_lightscape.jpg"
alt="photo courtesy of Unsplash"
></amp-img>
<amp-img
layout="fill"
src="https://amp.dev/static/img/docs/tutorials/firstemail/photo_by_nick_karvounis.jpg"
alt="photo courtesy of Unsplash"
></amp-img>
</amp-carousel>
Agora você deve ser capaz de alterar as fotos clicando nas setas de navegação à esquerda ou à direita do carrossel!
Envie com estilo
O AMP permite aplicar estilos no cabeçalho do documento dentro da tag <style amp-custom>. Além disso, classes e pseudo classes do CSS que eram antes proibidas agora já podem ser usadas. Veja a lista completa aqui.
Vamos atualizar o Hello, AMP4EMAIL world com um título real.
<body>
<h1>Adorable Adoptable Animals</h1>
...
</body>
E depois adicione alguns estilos no head
<head>
...
<style amp-custom>
h1 {
font-family: arial;
margin: 10px;
}
.center {
text-align: center;
}
.carousel-preview {
margin-top: 10px;
}
</style>
</head>
Acrescente capacidades dinâmicas
Emails clássicos permitem apenas conteúdo estático. Através do AMP, os e-mails se abrem para um novo mundo de possibilidades! Usuários agora podem responder a formulários, obter conteúdo atualizado dinamicamente, e interagir com o conteúdo
Neste tutorial, usaremos <amp-bind> para exibir o nome de nosso gato adotável e uma descrição quando o usuário estiver no slide desse gato. Comece incluindo o script amp-bind no cabeçalho do seu e-mail.
<script
async
custom-element="amp-bind"
src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"
></script>
Em seguida, declararemos uma variável de mapeamento AMP "myState" como uma string JSON dentro de uma tag <amp-state>. Como temos quatro fotos de gatos, incluiremos o estado de todas as quatro.
<body>
<amp-state id="myState">
<script type="application/json">
{
"cats": [
{
"name": "Aakash",
"description": "Very sweet gentleman that is quite shy in a shelter environment. He may hide under his blanket upon initial approach, but he is an affectionate lovebug."
},
{
"name": "Filip",
"description": "Friendly and enjoys pets and head rubs. Is known to sit on keyboards and refuses to touch anything with catnip on it."
},
{
"name": "Julian",
"description": "Both bold and extremely sweet. Wastes no time in investigating new smells, objects, and places, but enjoys lazing in the sun!"
},
{
"name": "John",
"description": "This playful and spirited cat would like to be outside his kennel and will be so happy when he gets to his forever home with more room to move."
}
]
}
</script>
</amp-state>
</body>
Ações e eventos AMP disparam diferentes estados. Em nosso caso, queremos atualizar o estado quando o usuário clica nas setas de navegação do carrossel. O amp-carrossel dispara um evento slideChange, sobre o qual atualizaremos a variável currentCat usando AMP.setState.
<h1>Adorable Adoptable Animals</h1>
<amp-carousel
width="800"
height="400"
layout="responsive"
type="slides"
on="slideChange:AMP.setState({ currentCat: event.index} )"
>
...
</amp-carousel>
Este código define o estado de currentCat para corresponder à foto do gato no índice do carrossel. Portanto, se estivermos no slide event.index=2, o estado será mapeado ao item no índice 2 do array.
A única coisa que resta é exibir o nome e as descrições do nosso gato. Adicione o seguinte código abaixo da tag de fechamento amp-carousel.
</amp-carousel>
<div class="center">
<h1>
<span [text]="myState.cats[currentCat].name">Aakash</span> is available for adoption!
</h1>
</div>
A extensão amp-bind usa expressões and mapeamentos para alterar o conteúdo dinamicamente. O exemplo de código acima usa o mapeamento [text] para atualizar o texto dentro da tag <span> cada vez que o estado é alterado, avaliando a expressão "myState.cats[currentCat].name".
Não se esqueça de adicionar as descrições dos gatos depois da tag </div>!
</div>
<p class="center">About <span [text]="myState.cats[currentCat].name"> Aakash</span></p>
<p class="center" [text]="myState.cats[currentCat].description">Very sweet gentleman that is quite shy in a shelter environment. He may hide under his blanket upon initial approach, but he is an affectionate lovebug.</p>
</body>
Agora, quando você altera a foto do gato no carrossel, o nome e a descrição também serão atualizados!
Envie seu e-mail AMP
Para saber como enviar seu e-mail para sua caixa de entrada, leia mais sobre como testar e-mails AMP
Parabéns! Você enviou seu primeiro e-mail AMP!
Para os próximos passos, leia mais sobre os fundamentos do AMP para E-mail.
-