Criar e usar e-mails AMP

Os e-mails AMP são dinâmicos e têm um efeito mensurável nas estratégias de e-commerce e de e-mail. Remetentes estão começando a adicionar e-mails AMP aos seus manuais de e-mail, mas essa mensagem interativa parece estar convivendo com os e-mails estáticos, e não os substituindo. Então, tivemos que perguntar: quais recursos estão envolvidos na criação de e-mails AMP e quando você deve usá-los?

Páginas móveis aceleradas (AMP) é um framework de código aberto que permite a inserção de elementos interativos e APIs no corpo do e-mail. Criado pelo Google em 2015, o framework AMP acelera o tempo de carregamento de páginas móveis e coloca o foco na experiência do usuário.

Em outras palavras, o AMP elimina a necessidade de sair do e-mail para realizar tarefas, como reservar um voo, responder a uma pesquisa, fazer uma compra ou se inscrever em um evento. Como qualquer profissional de e-mail dirá, você perde um certo número de clientes quando eles precisam sair da página da oferta.

Em resumo, a funcionalidade AMP permite que você:

• Crie uma experiência interativa na caixa de entrada.
• Permita que seus usuários concluam ações e enviem informações diretamente no e-mail.
• Facilite a inserção de conteúdo dinâmico em seus e-mails.

Parece ótimo, mas por que os e-mails AMP valem o esforço?

Vamos analisar cinco exemplos de e-mail AMP para ver o que você pode fazer com esses novos superpoderes.

Os dados e o feedback do usuário são cruciais para qualquer estratégia de e-mail, seja na execução de uma campanha de e-mail marketing ou na coleta de preferências do usuário para refinar seu produto. Mas quantas vezes você já recebeu um e-mail pedindo para responder a uma pesquisa rápida de 10 minutos e perdeu o interesse na hora quando ocorreu o redirecionamento para uma página da web? Reduza o atrito do usuário e aumente a probabilidade de receber respostas em pesquisas com e-mails AMP. Dessa forma, seu usuário pode responder à sua pesquisa sem sair do e-mail.

Use carrosséis , formulários da web e menus sanfona para adicionar um pouco de interatividade divertida aos seus e-mails e, ao mesmo tempo, gerar engajamento do usuário. Faça com que seus usuários sintam que fazem parte da conversa. Lembre-se de que mais engajamento significa mais conversões.

O duplo opt-in é uma ótima ideia para manter sua lista de e-mails limpa. No entanto, quantas etapas extras isso significa para o seu usuário? Primeiro, é preciso se cadastrar no seu formulário na web. Em seguida, a pessoa precisa verificar o e-mail e confirmar o cadastro, que a redireciona para uma landing page. Por fim, ela precisa retornar ao seu site. Os e-mails AMP ajudam a eliminar pelo menos uma dessas etapas. Permita que seus usuários confirmem o e-mail diretamente na caixa de entrada e recebam uma confirmação imediata de que a conta já está pronta para uso.

Seus usuários deixaram itens não comprados nos carrinhos de compras? Em vez de enviar um simples e-mail de carrinho abandonado, aproveite o AMP para permitir que seus usuários concluam as compras diretamente no e-mail.

Sua marca oferece consultas gratuitas para potenciais clientes? Melhore a experiência do usuário ao permitir que destinatários agendem compromissos diretamente no e-mail.

Remetentes estão começando a adicionar e-mails AMP aos seus manuais para aumentar as conversões e o engajamento de 11% para 41%. Com um ROI como esse, o AMP é uma solução poderosa. Vamos ver os recursos necessários para que isso aconteça.

A boa notícia é que o Mailgun oferece suporte ao tipo MIME AMP para e-mail via SMTP e API. Então, com isso em mente, resta apenas um componente: criar e-mails AMP.

Algumas pessoas acham que essa etapa é árdua e demorada, mas garantimos que é bem tranquila. Mãos à obra.

Independentemente da finalidade dos seus e-mails AMP, todos eles têm um conjunto de elementos de código obrigatórios que você precisa adicionar, criados com base em elementos padrão de HTML e CSS.

O conjunto de elementos obrigatórios para e-mails AMP:

1. Adicione a tag ou a tag à sua declaração Doctype.

2. Especifique o tipo de conjunto de caracteres na tag “head” do seu modelo de e-mail em HTML logo após o atributo .

3. Inclua o seguinte script:

                                

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

Isso fará o carregamento do seu conteúdo AMP assim que o e-mail for aberto. “AMP-carousel” representa o tipo de conteúdo AMP.

4. Coloque o elemento

                                

                                    <style amp4email-boilerplate="">body{visibility:hidden}</style>
                                
                            

na tag “head” do e-mail. Esse código permite que seu e-mail fique visível apenas para usuários que o visualizam por meio de clientes de e-mail com suporte a AMP. Isso significa que seus elementos AMP ficam ocultos para usuários cujos clientes não têm suporte a AMP. Isso oferece aos destinatários apenas conteúdo de alta qualidade — sem layouts quebrados.

Em outras palavras, o código da tag “head” do seu e-mail AMP será mais ou menos assim:

• Todos os componentes AMP e seus estilos precisam ter os atributos em todo o código do e-mail.
• Crie uma versão estática de fallback para atuar como uma alternativa aos elementos AMP. Ela deve ser escrita em HTML tradicional. Se o cliente de e-mail do destinatário tiver suporte a AMP, a versão em AMPHTML da sua newsletter será exibida. No entanto, se o cliente de e-mail não tiver suporte a AMP, os destinatários verão o fallback, que é renderizado corretamente em quase todos os clientes de e-mail.

Você pode programar seus e-mails AMP do zero ou usar modelos e serviços existentes para agilizar. Aqui estão algumas opções:

• Programação: Você programa tudo por conta própria, o que pode ser um pouco trabalhoso se não tiver as skills necessárias para criar belos modelos de e-mail. Você pode programá-los com o Bloco de Notas ou qualquer outro editor de texto. Se preferir essa opção às outras, lembre-se de validar seus e-mails usando o Google.
• Use os exemplos de AMP do Gmail: É aqui que o AMP for Email Playground do Gmail entra em ação. O Google fornece vários elementos AMP, como menu sanfona, efeito lightbox, carrossel de imagens (ou slider) e muitos outros elementos que você pode usar em seus designs de e-mail. Vale a pena notar que, com o playground, a programação necessária é mínima — basta substituir o conteúdo de exemplo pelo seu. Você cria esses elementos AMP aqui, copia o código e o cola no seu modelo de e-mail em HTML.
• Crie e-mails AMP com o Stripo: Modelos de e-mail AMP, com elementos AMP e fallbacks, agrupados para facilitar o uso. Se preferir usar alguns elementos AMP do playground do Google, você também pode fazer isso com o editor de código HTML deles. O Stripo também possui um recurso de arrastar e soltar blocos para quem prefere editar seus modelos visualmente em vez de programar. Se tiver interesse em seguir por esse caminho, você pode saber mais sobre o Stripocriar e-mails com o Stripo.

Se você decidir usar o caminho do Stripo, precisará importar seus designs para o Mailgun. Antes de exportar e enviar seus e-mails para qualquer pessoa, lembre-se sempre de fazer uma pré-visualização. Você deve fazer isso para qualquer e-mail, não apenas para e-mails AMP, para garantir que seus modelos sejam responsivos e tenham uma boa aparência em qualquer caixa de entrada e navegador.

Você pode pré-visualizar o AMPHTML ou o HTML tradicional no Stripo, portanto, certifique-se de que ambas as versões estejam adequadas antes de exportar. Agora, vamos exportar!

1. No Stripo, clique no botão de exportar.
2. Na nova janela pop-up, selecione a opção AMPHTML. Dessa forma, você vai baixar todo o código do seu e-mail.
3. Abra esse arquivo com qualquer ferramenta de edição de código ou texto, como o Bloco de Notas, Sublime ou Atom. Depois de fazer isso, copie o código para a área de transferência.
4. Faça login no Mailgun e abra a seção “Modelos”.
5. Clique no botão “Criar modelo de mensagem”.
6. Cole seu código e seu e-mail estará pronto para envio!

Não importa como você os incorpore ou crie, os e-mails AMP estão se tornando um recurso fundamental do e-mail marketing, e esse método de envio de mensagens tende a se tornar mais popular devido ao seu retorno. Os e-mails estão se tornando mais funcionais, permitindo que os usuários façam tudo em um só lugar. Tem como não amar isso?

Pronto para começar? Veja como um provedor de serviços de e-mail (ESP) como o Mailgun pode fazer com que seus e-mails AMP comecem com o pé direito. Teste gratuitamente.

Autor: Hanna Kuznietsova Chief Content Officer at Stripo.email