Como Construir Carrossel AMP para Seus E-mails com a Stripo

Em março de 2019, o Google lançou o AMP para e-mails. Desde julho de 2019, está disponível para usuários do G-Suite e está "ativado" por padrão para todos os usuários do Gmail.
O AMP permite que os destinatários adicionem os itens necessários aos carrinhos, participem de pesquisas etc. E, claro, todas essas ações agora podem ser realizadas diretamente nos e-mails.
Reduzir o tempo gasto na produção de e-mails automatizando a maioria dos processos sempre foi o principal objetivo da Stripo.
É por isso que desenvolvemos nosso construtor de e-mail AMP e o bloco de arrastar e soltar “AMP-carrossel” para acelerar o processo de design.
Antes de chegar ao guia, quero destacar os benefícios de criar e-mails AMP com a Stripo.
São necessários dois passos para criar um carrossel AMP de imagem com a Stripo:
Você verá este elemento com o ícone “⚡HTML” próximo a ele. Isso significa que esse elemento será mostrado apenas em e-mails AMP e ficará oculto em clientes de e-mail que não suportam AMP. Precisaremos criar um substituto para outros destinatários. Falaremos sobre isso mais tarde.
Eu adicionei 16 slides e todos funcionaram muito bem no Gmail em vários dispositivos.
Então, agora que todos os destinatários que usam o Gmail verão esse carrossel, precisamos pensar naqueles que preferem outros clientes de e-mail.
O carrossel AMP que acabamos de criar funciona bem em desktops no Gmail por padrão.
Agora é hora de construir um substituto para os outros.
Nesse caso, há dois tipos de fallback:
Esse carrossel é suportado apenas por dispositivos Apple e pelo Yahoo!.
Isso significa que cada cliente de e-mail decide qual versão do seu carrossel mostrar!
Para obter mais informações sobre como criar um carrossel de imagens interativo, por favor, leia essa postagem no blog.
Você pode adicionar quantos módulos de produto ao seu e-mail precisar. Para obter informações sobre como economizar tempo ao construir elementos de e-mail semelhantes, por favor, leia essa postagem no blog, a seção "Copiando e movendo elementos".
Depois de clicar na opção "Incluir em HTML", o elemento escolhido será mostrado nesses clientes de e-mail, que suportam apenas o tipo mime HTML tradicional.
Depois de clicar na opção "Incluir em AMPHTML" (⚡HTML), o elemento escolhido será mostrado nos clientes de e-mail que suportam o tipo MIME AMPHTML (text-x-amphtml).
Se nenhum for definido para um elemento de e-mail específico, esse elemento será exibido em todos os dispositivos e em todos os clientes de e-mail.
Seguindo essas etapas simples, construímos um carrossel AMP simples — usamos imagens sem descrições. Funciona melhor quando você demonstra alguns itens de um tipo ou o mesmo produto de diferentes ângulos.
Mas e se você precisar de um carrossel complexo com imagens mais informativas e botões “falsos” sobre eles? Você ainda pode fazer isso com a Stripo, pois nosso editor permite adicionar texto sobre imagens e aplicar vários filtros ;).
Então, em primeiro lugar, você precisa construir um carrossel AMP regular, conforme descrito no parágrafo acima. Agora, vamos prosseguir para o design dos slides:
Aqui está apenas um pequeno conselho. Para poder enviar conteúdo AMP, você precisa:
Agora que você entende como criar carrosséis com tecnologia AMP em minutos, vamos dar uma olhada em como as empresas populares se beneficiam desse recurso.
Aqui estão os 5 principais exemplos de carrossel para alimentar suas ideias criativas:
Muitas vezes adicionamos carrosséis ao nosso resumo semanal para torná-lo mais funcional e atraente. Neste exemplo, permitimos que os assinantes navegassem por novos modelos de e-mail para encontrar o mais adequado.
(Fonte: E-mail da Stripo)
Neste exemplo, a empresa usou um carrossel para mostrar aos assinantes seus produtos e oferecer aos destinatários para agendar um horário sem precisar sair de suas caixas de entrada.
(Fonte: E-mail da Breguet)
MamaGourmand usou o Carrossel da AWeber Image para compartilhar ideias de receitas com os assinantes. É uma excelente maneira de envolver os destinatários e mostrar uma variedade de seus produtos ou serviços.
(Fonte: E-mail da MamaGourmand)
Além de oferecer aos assinantes a compra de seus produtos, você pode usar carrosséis para criar conteúdo divertido. No exemplo abaixo, você pode ver como um recurso de imagens popular projetou o e-mail com um carrossel para mostrar aos assinantes uma coleção de belas fotos.
(Fonte: E-mail da Offset)
A HP adicionou um carrossel ao seu e-mail para apresentar um novo computador e mostrá-lo de diferentes ângulos. É uma maneira fantástica de fornecer mais detalhes aos clientes, mas é vital garantir que as fotos dos produtos sejam claras e bem iluminadas.
Neste exemplo, o carrossel é feito com HTML5, mas você pode construir o mesmo usando AMP.
(Fonte: E-mail da HP)
Nós acabamos de construir 2 carrosséis AMP para permitir que você exiba seus produtos de diferentes ângulos ou demonstre novos produtos de sua coleção. Cada slide leva os destinatários às respectivas páginas do seu site. Essa é uma boa maneira de animar seus e-mails, envolver o público-alvo e tornar as mensagens mais funcionais.
Para saber como visualizar e exportar seus e-mails AMP, por favor leia os respectivos parágrafos na postagem do nosso blog.
Criar e-mails com AMP pode ser mamão com açúcar se você usar o construtor de e-mail AMP ;).
Que tal enviarmos um lembrete para testar o Stripo mais tarde no seu computador?
2 comentários