Building AMP Questionnaires_Featured Image
timer ~ 9 minutos de leitura
41671 visualizações
15 junho 2020

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

Normalmente, 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.

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

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.

Aqui, 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.

Para 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.Editing-the-Answer-Section

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.

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”.

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”.

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.

Sarah Balli há 6 meses

Does this work with Outlook?

Andre Luiz Daleffi há 2 anos

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á 2 anos

Ps.: tried with Gmail

Hanna Kuznietsova comentou com Andre Luiz Daleffi há 2 anos

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
banner9
06 junho 2022 · 15 minutos de leitura
10 Melhores Construtores de Modelos de E-mail para 2022

Todos os construtores de modelos de e-mail são parecidos? Agora você está confuso sobre qual escolher para suas campanhas de e-mail, não é? Não é à toa, pois são muitos. Iremos separar os construtores mais populares para encontrar seus recursos diferenciados para ajudá-lo a encontrar o melhor construtor de e-mail HTML para suas necessidades atuais. Vou tentar criar um modelo em todos esses editores com os mesmos arquivos de mídia para ver se os construtores diferem. Os melhores construtores de...

Design Marketing Modelos
best-fonts-for-email-cover-image-stripo
24 maio 2022 · 18 minutos de leitura
Melhores fontes para E-mail: Dicas e Truques de Uso

Uma das preocupações mais marcantes no processo de produção de e-mail é a escolha da fonte correta. Peso, altura, largura, cor, forma, espaçamento... Tudo isso importa? Sim, é verdade, mas também uma das coisas mais importantes é escolher a fonte que seja legível. Neste post, iremos lhe mostrar como escolher a melhor fonte profissional para e-mail. Desenhe e-mails elegantes com Stripo em pouco tempo com nossos modelos pré-construídos Navegue   Fontes de e-mail HTML: Regras gerais a serem seguidas Existem...

Design Marketing
Greatest Examples of GIF animations in Emails_Cover Image
27 outubro 2021 · 10 minutos de leitura
16 ótimos exemplos de GIFs animados em e-mails

GIFs em e-mails serão de grande utilidade se você quiser mostrar seu produto, chamar a atenção dos usuários para determinados elementos ou apenas decorar levemente seu texto. Neste artigo, fornecemos alguns dos melhores exemplos de animação gif de e-mail. Exemplos de GIFs animados em e-mails Aqui está um compilado dos melhores exemplos com GIFs em e-mails. Cada GIF cumpre sua missão. 1. Adidas (Fonte: E-mail da Adidas) A Adidas usou animações de e-mail para mostrar quais opções de cores eles...

Design Marketing
08 abril 2021 · 17 minutos de leitura
14 Melhores exemplos de design de assinatura de email

Boas assinaturas de email nos ajudam a construir nosso negócio e a causar uma boa impressão nos clientes. Como este é o último elemento que as pessoas visualizam nos emails, devemos fazer com que nossas assinaturas pessoais sejam criativas e memoráveis. Vamos examinar os melhores exemplos de assinaturas de email e seu uso apropriado em emails e templates de newsletter para emails. Deve-se mencionar que todos os tipos de negócios demandas assinaturas de email profissionais com as informações de contato...

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