Mailmodo: crie e-mails interativos com AMP para aumentar o engajamento
Nossas caixas de entrada estão lotadas de e-mails terríveis... portanto, se sua empresa tem uma extensa base de assinantes e realmente espera aumentar a abertura de seu e-mail e as taxas de cliques (CTR) em um nível, a interatividade é crítica. Uma solução que está ganhando força é o uso da tecnologia Accelerated Mobile Page em HTML o email.
AMP para e-mail
A capacidade de usar a tecnologia AMP para criar conteúdo de e-mail mais dinâmico e interativo é um grande avanço na tecnologia de e-mail. AMP para e-mail não é o mesmo que o AMP normal para sites, e há algumas restrições sobre o que pode ser feito no e-mail (por exemplo, vídeo e áudio não são suportados no momento).
O suporte AMP no e-mail não está amplamente disponível em todos os clientes de e-mail, mas é suportado por alguns dos principais clientes de e-mail, como Gmail, Outlook.com e Yahoo! Mail. Também é importante observar que, mesmo que um cliente de e-mail suporte AMP, ele pode não estar habilitado por padrão ou pode exigir que o destinatário execute alguma ação para ativá-lo.
O AMP for Email funciona fornecendo um conjunto de componentes pré-construídos que podem ser usados para criar conteúdo de email interativo e dinâmico. Esses componentes incluem itens como formulários, questionários, carrosséis de imagens e muito mais, e podem ser usados para criar e-mails atraentes e interativos que fornecem uma melhor experiência do usuário para os destinatários.
Exemplo de e-mail HTML AMP
Aqui está um exemplo de um e-mail AMP que inclui um formulário de inscrição. Observe que as incorporações de script NÃO estão incluídas ao enviar este e-mail, é apenas para criar e testar a solução fora de sua plataforma de marketing por e-mail.
<!DOCTYPE html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js"></script>
<style amp4email>
.subscribe-form {
display: none;
}
</style>
</head>
<body>
<amp-img src="https://example.com/amp-header.jpg" alt="Header image"></amp-img>
<div amp4email>
<p>Please enable AMP for Email to view this content.</p>
</div>
<form method="post"
action-xhr="https://example.com/subscribe"
target="_top"
class="subscribe-form"
id="subscribe-form"
novalidate
[submit-error]="errorMessage.show"
[submit-success]="successMessage.hide">
<h2>Subscribe to our newsletter</h2>
<label>
Email:
<input type="email"
name="email"
required>
</label>
<div submit-success>
<template type="amp-mustache">
Success! Thank you for subscribing.
</template>
</div>
<div submit-error>
<template type="amp-mustache">
Error: {{message}}
</template>
</div>
<input type="submit" value="Subscribe">
</form>
<amp4email fallback="https://example.com/non-amp-email.html">
<p>View the non-AMP version of this email.</p>
</amp4email>
</body>
</html>
O formulário usa o amp-form
elemento personalizado para lidar com o envio e a validação do formulário. Quando o usuário envia o formulário, os dados do formulário são enviados para a URL especificada no action-xhr
atributo, que deve ser um ponto de extremidade do servidor que lida com o envio do formulário. No form
tag, adicionamos a novalidate
atributo para desabilitar a validação do formulário do lado do cliente, e usamos o []
sintaxe para definir o submit-success
e submit-error
modelos dinamicamente. O submit-success
e submit-error
As seções definem modelos que são exibidos para o usuário quando o envio do formulário é bem-sucedido ou falha, respectivamente.
Fallback HTML quando não há suporte para AMP
Você pode fornecer conteúdo alternativo para usuários que não têm o AMP habilitado ou que usam um cliente de e-mail que não o suporta. Para fazer isso, você pode usar o amp4email
atributo para especificar um URL substituto que aponte para uma versão não AMP do e-mail. No exemplo acima, você pode ver uma tag de estilo que ocultará o AMP HTML se não for compatível, bem como um URL de fallback onde o conteúdo HTML pode ser recuperado e exibido.
Mailmodo: Automação e marketing de e-mail AMP livre de código
O Mailmodo foi projetado para ajudá-lo a aproveitar o poder dos e-mails AMP para criar uma melhor experiência do usuário com uma configuração simplificada de marketing por e-mail para que você possa aumentar as taxas de engajamento e conversão... algumas diretamente da caixa de entrada!
Os recursos do Mailmodo incluem:
- E-mails AMP gratuitos fáceis e codificados – arraste e solte blocos AMP em um WYSIWYG editor para criar e-mails. Você pode personalizar o conteúdo para cada usuário e até carregar seu próprio arquivo HTML ou outros trechos de código.
- Automação de e-mail – Automatize sequências de gotejamento com base no comportamento do usuário e dados de mercado para enviar e-mails. Construtor de jornada visual para ajudá-lo a projetar mapas de jornada do usuário com arrastar e soltar. Analise o comportamento do usuário e otimize sequências de gotejamento e mapas de jornada.
- Alta capacidade de entrega – Envie e-mails em massa com Mailmodo's SMTP ou adicione seu próprio serviço de entrega. Integrações com AWSSES, Sendgridou Pepipost. Você também pode obter IPs gerenciados e dedicados.
- E-mails transacionais de acionamento automático – Acione e-mails automaticamente por ação do usuário, como inscrição, compra ou abandono do carrinho. Você pode segmentar usuários com base em aberturas, cliques e envios. O Mailmodo permite que você gerencie e atualize todos os seus e-mails de transição diretamente em sua plataforma.
- Todos os relatórios em um único painel – visualize aberturas, cliques, cancelamentos de inscrição, envios e teste A/B de linha de assunto, com a capacidade de exportar todos os seus dados no formato CSV.
Integrações produtizadas com e-commerce externo, gerenciamento de relacionamento com o cliente (CRM), e outras plataformas também estão disponíveis... incluindo Shopify, Salesforce, MoEngage, núcleo líquido, CleverTap, Pipedrive, Web EngageE muito mais.
Cadastre-se gratuitamente no Mailmodo!
Divulgação: Martech Zone é uma afiliada de Mailmodo e estamos usando links afiliados ao longo deste artigo.