Design Modelos Como fazer AMP
~ 9 minutos de leitura
3 comentários
5615 visualizações
15 junho

Criando Questionários AMP com Stripo usando módulos pré-construídos

Stripo / Blog / Criando Questionários AMP com Stripo usando módulos pré-construídos

Olá a todos.

Hoje começamos nossa série de tutoriais mostrando como criar e-mails AMP tão rápido quanto escrever um parágrafo de texto promocional.

Introdução

Como você provavelmente sabe, no mês passado, tivemos nossa série Quiz AMP Stripo. Consistia em 3 e-mails, cada um contendo elementos de gamificação. O objetivo desta campanha era demonstrar alguns recursos da tecnologia AMP para nossos destinatários. 

Como resultado, recebemos literalmente milhares de solicitações, do tipo "Como faço para criar esses e-mails para minhas campanhas?".

Por isso, decidimos fazer esses tutoriais.

Vamos começar com o questionário AMP, pois foi o primeiro e-mail da nossa série sobre Quiz ...

Como criar questionários AMP com o Stripo

Running-Quizzes_AMP-EmailsNormalmente, para criar esse elemento de email, você teria que trabalhar com código AMP, incorporar vários componentes AMP nos seus e-mails, conectá-los aos seus servidores com a ajuda de seus desenvolvedores para habilitar o conteúdo AMP nos e-mails. Com Stripo, isso ficou muito mais fácil...

Basta seguir nosso guia passo a passo e você mesmo criará esse e-mail para suas campanhas.

Passo 1. Usando um módulo de AMP pronto no seu template

Para sua conveniência, criei um módulo "Questionário AMP" pronto para uso. Ele consiste de três questões. Usamos como base nosso e-mail 1 da série, removemos toda a identidade Stripo e nossa introdução. E é só isso.

Portanto, seu módulo terá três seções para perguntas.

Screen-of-Entire-AMP-ModuleVocê importa este módulo no seu template. Ele está incluído na versão HTML com AMP por padrão. 

Para importar este módulo no seu template:

  • arraste um template de 1 container no seu e-mail;

  • vá para a seção "Módulos";

  • entre na aba "Pré-construídos";

  • digite "Questionário";

  • basta arrastar este módulo para o seu template.

Adding-a-Prebuilt-Module-with-AMP-Questionnaire-into-EmailAqui, você pode editar as cores; cores para a palavra "Pergunta" e seu plano de fundo e cores para os campos com as respostas.

Para fazer isso, clique no ícone "Estrutura" e abra o editor de código conforme mostrado abaixo:

Editing-Colors-for-the-Module

Editando a seção "Palavra da pergunta”

Você pode substituir as cores existentes pelas cores que desejar, colando os números das cores da nossa paleta.

Editing-the-Answer-SectionPara obter o número da cor, comece a editar os botões de texto/design e, na paleta de cores, copie o número da cor que desejar.

Editando o design dos campos "Respostas”

Nos campos "Respostas", você mostra se a resposta estava correta ou incorreta.

Para encontrá-los em seu código, desça um pouco a tela:

Replacing-Colors-for-Answer-Option-Section

  • onde "a1" significa a resposta correta;

  • "a0" significa a resposta incorreta.

Aqui você pode substituir uma cor de fundo e uma cor de borda.

Por padrão, quando os usuários dão uma resposta incorreta, o "Campo de resposta" fica vermelho, quando os usuários dão uma resposta correta — ele fica verde.

E quanto a outros elementos, como as próprias perguntas, as imagens e outras seções? Você as edita em seu arquivo JSON.

A propósito, este módulo já está conectado ao arquivo JSON. Você não precisa alterar nada nele. Trabalharemos apenas no arquivo JSON.

Passo 2. Trabalhando nas perguntas/Editando um arquivo JSON

Sim, você precisa de um arquivo JSON para criar sua fonte de dados — o próprio questionário.

Este arquivo irá recuperar informações/perguntas de seus servidores para os e-mails.

Como seu arquivo JSON, use o exemplo de código fornecido abaixo (o que usamos para nossa campanha):

{
  "items": [
    {
      "id": 1,
      "img": "https://kvlya.stripocdn.email/content/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/images/29111588071244597.jpeg",
      "question": "How to pronounce our service’s name?",
      "text": "Fun fact. Initially, our service's name was Stripe, but when we found out that this name had been already taken, we quickly changed it. And yes, it happened on the first day at an international exhibition.",
      "wrongtext": "Oops. The correct answer is |strɪpe-oh| (|straɪp-oʊ|). Fun fact. Initially, our service's name was Stripe, but when we found out that this name had been already taken, we quickly changed it. And yes, it happened on the first day at an international exhibition.",
      "c": "1",
      "answers": [
        {
          "ida": 1,
          "answer": "|strɪpe-oh| ( |straɪp-oʊ| )"
        },
        {
          "ida": 2,
          "answer": "|strɪp-oh| ( |strɪp-oʊ| )"
        }
      ]
    },
    {
      "id": 2,
      "img": "https://kvlya.stripocdn.email/content/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/images/83411588071269619.jpeg",
      "question": "What is the most popular email client in the world?",
      "text": "According to studies conducted by Litmus in April 2020, Gmail is the most popular email client. Please find the detailed results of the studies here.",
      "wrongtext": "Oops. The correct answer is “Gmail”. According to studies conducted by Litmus in April 2020, Gmail is the most popular email client. Please find the detailed results of the study here.",
      "c": "2",
      "answers": [
        {
          "ida": 1,
          "answer": "Outlook"
        },
        {
          "ida": 2,
          "answer": "Gmail"
        },
        {
          "ida": 3,
          "answer": "Apple iPhone"
        },
        {
          "ida": 4,
          "answer": "Apple Mail"
        }
      ]
    },
    {
      "id": 3,
      "img": "https://kvlya.stripocdn.email/content/guids/CABINET_8cd672fef378e9b5999e0b2fa77c95f6/images/64191588071296283.jpeg",
      "question": "How to update a header or a footer in a hundred emails with Stripo at once?",
      "text": "Indeed, with Stripo, you can update any number of emails at once with a few clicks by using synchronized modules. Find more details on the feature in our article. P.S. You can always email our support team. We’re there for you ;)",
      "wrongtext": "Oops. The correct answer is “Use synchronized modules”. Indeed, with Stripo, you can update any number of emails at once with a few clicks by using synchronized modules. Find more details on the feature in our article. P.S.: You can always email our support team. We’re there for you ;)",
      "c": "3",
      "answers": [
        {
          "ida": 1,
          "answer": "Email our support team, they’ll do it for you"
        },
        {
          "ida": 2,
          "answer": "Use smart elements"
        },
        {
          "ida": 3,
          "answer": "Use synchronized modules"
        },
        {
          "ida": 4,
          "answer": "Hire a team of 100 people"
        }
      ]
    }
  ]
}

Onde "id" é a seção com as perguntas:

  • Id1" - é a seção com a pergunta 1. Todos os elementos de "id1" a "id2" pertencem à pergunta 1;

  • img” — link para a imagem que você está para usar no questionário;

  • question” — é a própria pergunta;

  • wrongtext” — é o texto que seus usuários verão se responderem incorretamente;

  • ida1-4” — são as opções de resposta dadas aos usuários.

Edite essas informações manualmente:

  • img": “link para a sua imagem”,

  • "question": "Sua pergunta?",

  • "text": "texto que aparece quando o usuário fornecer uma resposta",

  • "wrongtext": "o que os usuários veem quando a resposta é incorreta",

  •  “ida": 1,
    "answer": "opção de resposta 1"

  •   "ida": 2,
    "answer": "opção de resposta 2"

Faça o mesmo para cada seção.

Nosso código contém três seções de perguntas. Se você só quer duas, remova o testo selecionado do seu arquivo JSON.

Removing-Sections-from-JSON

Se você quer que todas as suas perguntas incluam 4 opções de respostas, então no código JSON remova a seção e copie a seção 2. 

Passo 3. Conectando e-mails a uma fonte de dados

Esta etapa é necessária para extrair dados do arquivo JSON para nossos questionários; também para mostrar aos usuários se suas respostas estavam corretas ou incorretas (os usuários enviam respostas, e nossa Fonte de dados mostra se a resposta estava correta e fornece aos usuários a resposta correta)

  • abra a aba “Dados”;

  • vá para a seção “Fonte de dados”;

  • crie uma nova fonte de dados;

  • informe o nome desta campanha (pode ser qualquer um);

  • em uma nova seção abaixo, cole o seu arquivo JSON;

  • copie o endereço URL.

Creating-New-Data-Source

Passo 4. Trabalhando com armazenamento de dados/Escolhendo para onde mandar as respostas dos usuários

Precisamos criar um serviço de dados — um lugar para armazenar as respostas dos usuários.

Se você quer colocar os dados nos servidores Stripo, ative o botão “Armazenamento Stripo”.

Building-a-New-Data-Storage-by-Using-Stripo-Data-Service

Se você planeja armazenar dados no Google Drive (Planilhas), siga as etapas na nossa postagem “Serviço de dados Stripo”.

Passo 5. Inserindo endpoints nos e-mails

Agora, para conectar nossa pesquisa a servidores e armazenamento de dados — para realmente ativar o questionário AMP em nossos e-mails, precisamos inserir os endpoints que acabamos de criar:

  • clique no ícone ⚡ "Estrutura” HTML;

  • abra o editor de código;

Editing-Colors-for-the-Module

  • substitua o link que segue após "action-xhr" na linha <form id...> pelo endereço de URL que você gerou na etapa 4;

  • substitua o link de origem que segue na linha <amp-list ...> pelo endereço de URL que você gerou na Etapa 3;

Inserting-URL-Links

  • e é só isso.

Passo 6. Criando uma segunda opção/versão HTML de um questionário

É necessário criar uma segunda opção/versão HTML da pesquisa para os clientes de e-mail que ainda não suportam conteúdo AMP.

Publicamos recentemente um artigo onde mostramos  10 exemplos de e-mails de convite para pesquisa. Esperamos que eles sirvam de inspiração para você.

Normalmente, nesses e-mails, os profissionais de marketing incluem links para formulários do Google ou questionários em sites, onde os usuários podem responder a pesquisa ...

Email-Invitation-to-Participate-in-Survey

(Convite por e-mail para uma pesquisa da Litmus)

Para adicionar este link nos e-mails da sua pesquisa, por favor:

  • arraste a estrutura de 1 container logo abaixo / acima da estrutura que contém seu questionário HTML AMP;

  • preencha com o conteúdo necessário;

  • arraste o bloco básico "Botão" para essa estrutura;

  • desenhe-a da maneira que você gosta;

  • cole sua URL;

  • inclua essa estrutura na versão HTML deste email de pesquisa.

estructura html pt

Importante:

Todos os outros elementos deste e-mail, como logotipo, rodapé e informações de contato, serão incluídos nas duas versões desta campanha.

Se você quiser que seus usuários vejam a Pesquisa que acabamos de criar na Etapa 5, inclua o link para a versão da Web do nosso e-mail AMP em vez do link para o Formulários do Google.

Para obter esse link, por favor:
  • Entre no modo de preview;

  • clique em “AMP HTML” no canto superior direito;

  • clique no ícone “Copiar”.

Getting-Shareable-Link

Conclusão

Com isso, criamos um e-mail de questionário. Funciona, como todos os elementos AMP, no Gmail e no Mail.ru. Outros usuários verão a segunda opção do e-mail.

Se você gostou do nosso questionário AMP, desenhe um similar para você mesmo.

Andre Luiz Daleffi há 3 meses

Hey! Nice post, thanks for sharing the content. Took the steps, everything went well in the construction. The preview function shows everything correct too. But, the test function sends a blank email. Exporting to gmail or embedding the amphtml code also generates a blank email. What could it be? Thanks!

Andre Luiz Daleffi comentou com Andre Luiz Daleffi há 3 meses

Ps.: tried with Gmail

Hanna Kuznietsova comentou com Andre Luiz Daleffi há 3 meses

Andre, Thank you so much for your comment. We are sorry it did not work well for you. If your email was not blank and worked well in the preview mode, it means that you have not been whitelisted with Google as a sender. To test your AMP emails, please add our info@stripo-test.email email address as a trusted sender as shown in the screenshot https://prnt.sc/tazlyj . Find more details here https://stripo.email/blog/preview-and-send-test-email-in-stripo/#amp-html-emails To be allowed to send AMP emails to other recipients, you need to get whitelisted with Google. In this post, we share a step-by-step guide. https://stripo.email/blog/how-to-get-whitelisted-with-google-to-send-amp-emails-our-personal-experience/ Thank you for your interest in our blog and in the AMP functionality.

Você talvez se interesse por

← anterior próximo →
9 dias atrás · 18 minutos de leitura
15 melhores exemplos de newsletter para inspirá-lo em 2019

Em nosso post anterior, mostramos como fazer sua primeira campanha de e-mail bem sucedida e como melhorar as campanhas atuais em 10 etapas simples. Hoje, mostraremos os melhores exemplos de newsletters por e-mail (em nossa opinião) para sua inspiração. 1. Adidas Linha de assunto: Não apenas fale sobre salvar os oceanos. Corra para os oceanos Como Elvis Presley cantou "Um pouco menos de conversa, um pouco mais de ação, por favor". Ele estava muito certo. Muitas pessoas apenas falam, mas...

Design Marketing Modelos
09 outubro · 16 minutos de leitura
16 Práticas recomendadas de design de cabeçalhos de e-mail

O cabeçalho do e-mail é um dos elementos que você usa regularmente em seus newsletters por e-mail. Mas muitas vezes esquecemos que criar um cabeçalho é mais complexo do que apenas um logotipo e um menu. O cabeçalho completo do boletim informativo consiste de três partes essenciais: informações sobre o remetente; a linha de assunto e o pré-cabeçalho; o próprio cabeçalho do e-mail. Nesta postagem, mostraremos como definir a linha de assunto e o pré-cabeçalho. E compartilharemos 16 ideias de cabeçalhos...

Design Modelos Como fazer
Esteja sempre a par das notícias, guias, artigos e manuais de marketing de e-mail