Design Modelli How-to
~ 9 minuti letti
3 commenti
4057 visualizzazioni
valutalo
15 giugno

Creare questionari AMP con Stripo usando moduli già pronti

Stripo / Blog / Creare questionari AMP con Stripo usando moduli già pronti

Ciao a tutti!

Oggi avviamo una serie di tutorial in cui mostrerò come costruire email AMP in un lampo, in meno del tempo che ti ci vuole a scrivere un paragrafo di testo.

Breve introduzione

Come probabilmente saprai già, il mese scorso abbiamo lanciato la nostra serie Quiz AMP di Stripo. Consisteva di tre email, ognuna delle quali contenente elementi di gamification. Lo scopo della campagna era di dimostrare ai destinatari alcune delle possibilità che ci offre la tecnologia AMP. 

Come risultato abbiamo ricevuto migliaia di richieste del tipo “Come faccio a creare email del genere per le mie campagne?".

Ecco perché abbiamo deciso di fare questi tutorial.

Partiamo dal questionario in AMP, dato che era nella prima email della nostra serie Quiz...

Come creare questionari AMP usando Stripo

Running-Quizzes_AMP-EmailsNormalmente, per costruire questo tipo di elemento in un’email sei costretto a usare il codice AMP, incorporare diversi componenti AMP nelle email, connetterli a un tuo server con l’aiuto degli sviluppatori, permettendo l’uso di elementi AMP nelle email. Con noi questo processo è appena diventato molto più semplice...

Basta seguire la nostra guida passo per passo e potrai creare da solo un’email come questa per le tue campagne.

1° passo. Inserire il modulo AMP già pronto nel tuo modello email

Per tua comodità abbiamo costruito un modulo già pronto “Questionario AMP”, che consiste di tre versioni. Abbiamo usato la prima email della nostra serie, rimuovendo tutte le informazioni specifiche di Stripo e la nostra sezione introduttiva. Nient’altro.

Quindi il tuo modulo avrà tre sezioni per le domande.

Screen-of-Entire-AMP-ModuleBasta trascinare questo modulo nel tuo modello. È incluso automaticamente nella versione AMP in HTML. 

Per inserire il modulo nel modello:

  • trascina un modello di contenitore singolo nell’email;

  • vai alla sezione "Moduli";

  • entra nella scheda "Già pronti";

  • vai su "Questionario";

  • trascina il modulo nel modello.

Adding-a-Prebuilt-Module-with-AMP-Questionnaire-into-EmailDa qui potrai modificare i colori, quelli delle parole e del loro sfondo, e quelli dei campi dove andranno le risposte.

Per farlo, clicca sull’icona “Struttura”, poi apri l’editor di codice come puoi vedere sotto:

Editing-Colors-for-the-Module

Modificare la sezione "Domanda"

Devi sostituire i colori esistenti con quelli di cui hai bisogno incollando i numeri corrispettivi a questi ultimi. Puoi ottenerli dalla nostra tavolozza.

Editing-the-Answer-Section

Per ottenere il numero del colore, inizia a editare il testo/creare pulsanti, e dalla tavolozza potrai ottenere il numero del colore che ti interessa.

Copying-Color's-from-Color's-PaletteModificare il design dei campi "Risposta"

Nel campo "Risposte" puoi mostrare quali risposte sono corrette o errate.

Per trovare il punto specifico nel codice, scorri fino a qui:

Replacing-Colors-for-Answer-Option-Section

  • con "a1" si intende la risposta giusta;

  • "a0" è invece la risposta sbagliata.

Qui puoi cambiare il colore dello sfondo (“background color”) e quello dei margini (“border color”).

Come opzione predefinita, quando viene data una risposta errata il campo “Risposta” diventa rosso, mentre quando la risposta è corretta diventa verde.

E gli altri elementi, ad esempio le domande, le immagini e il numero di sezioni? Puoi cambiare tutto nel tuo file JSON.

A proposito, questo modulo è già connesso al file JSON. Non dovrai cambiare niente. Agiremo solo sul file JSON.

2° passo. Modificare le domande/il file JSON

Hai bisogno di un file JSON per creare la tua fonte dati — il questionario in sé.

Questo file estrarrà informazioni o domande dai tuoi server e li metterà nelle email.

Come file JSON usa il codice che trovi qui sotto (quello che abbiamo usato per le nostre campagne):

{
  "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"
        }
      ]
    }
  ]
}

“id” è la sezione che contiene le domande:

  • “id1” — è la sezione con la prima domanda. Tutti gli elementi fino a “id2” fanno parte della prima domanda;

  • “img” — link all’immagine che vuoi usare nel questionario;

  • “question” — qui ci va la domanda in sé;

  • ”wrongtext” — il testo che vedranno gli utenti nel caso in cui forniscono una risposta sbagliata;

  • “ida1-4” — queste sono le possibili risposte tra cui gli utenti sceglieranno.

Modifica queste informazioni manualmente:

  • “img": “link all’immagine”,

  • "question": "la domanda?",

  • "text": "testo che appare quando l’utente fornisce una qualsiasi risposta ",

  • "wrongtext": " testo che vedono gli utenti quando danno una risposta sbagliata ",

  •  “ida": 1,
    "answer": "possibile risposta 1"

  •   "ida": 2,
    "answer": " possibile risposta 2"

Ripeti queste operazioni per tutte le sezioni.

Il nostro codice contiene tre sezioni con tre diverse domande. Se ne vuoi solo due, rimuovi dal codice del tuo file JSON la parte che abbiamo evidenziato in viola di seguito.

Removing-Sections-from-JSONSe vuoi che tutte le domande abbiano 4 possibili risposte, nel codice JSON rimuovi la sezione 1 e duplica la sezione 2. 

3° passo. Connettere le email a una fonte dati

Questo passo è necessario per inserire i dati dal file JSON nei tuoi questionari; serve anche a mostrare agli utenti se le loro risposte sono giuste o sbagliate (un utente inserisce una risposta, e la nostra Fonte Dati gli mostra se è corretta, e se invece è sbagliata fornisce la risposta giusta)

  • apri la scheda “Dati”;

  • vai alla sezione “Fonte dati”;

  • crea una nuova fonte dati;

  • inserisci il nome della campagna (puoi mettere quello che vuoi);

  • sotto, in una nuova sezione, incolla il tuo file JSON;

  • copia l’indirizzo URL.

Creating-New-Data-Source

4° passo. Lavorare sull’archiviazione dei dati/scegliere dove mandare le risposte degli utenti

Dobbiamo creare un servizio dati, ossia un posto dove immagazzinare le risposte che ci danno gli utenti.

Se vuoi che i tuoi dati siano sui server di Stripo, attiva il pulsante “Archiviazione su Stripo”.

Building-a-New-Data-Storage-by-Using-Stripo-Data-ServiceSe vuoi invece inviare i dati su Google Drive (sui Fogli), segui i passi che trovi nel nostro post “Servizio dati di Stripo”.

5° passo. Inserire gli endpoint nelle email

Ora dobbiamo connettere il sondaggio ai server e all’archivio dei dati; per abilitare il questionario AMP nelle nostre email, dobbiamo inserire gli endpoint che abbiamo appena costruito:

  • clicca sull’icona “Struttura” ⚡ HTML;

  • apri l’editor di codice;

Editing-Colors-for-the-Module

  • sostituisci il link che trovi dopo "action-xhr" nella linea <form id...> , inserendo l’indirizzo URL che hai generato al 4° passo;

  • sostituisci il link alla fonte che trovi dopo “src” nella linea <amp-list...>, inserendo l’indirizzo URL che hai generato al 3° passo;

Inserting-URL-Links

  • fatto.

6°. Creare una versione di riserva o in HTML del questionario

Per gli utenti che usano client che non supportano ancora gli AMP, dobbiamo creare una versione di riserva o una versione in HTML.

Poco fa abbiamo pubblicato un post con 10 email di invito ai sondaggi. Speriamo ti siano d’ispirazione.

In questo tipo di email, chi fa marketing di solito include dei link ai Moduli Google o ai questionari presenti sui loro siti, dove gli utenti possono rispondere al sondaggio …

Email-Invitation-to-Participate-in-Survey

(Email di invito a un sondaggio di Litmus)

Per aggiungere questo tipo di link alle tue email con sondaggi:

  • trascina la struttura a contenitore singolo appena sopra o sotto la struttura che contiene il tuo quiz in AMP HTML;

  • riempila con il contenuto che vuoi;

  • trascina il blocco di base “Pulsante” in questa struttura;

  • imposta il design a tuo piacimento;

  • incolla il tuo URL;

  • includi questa struttura nella versione HTML di questo sondaggio via email.

struttura it

Importante:

Tutti gli altri elementi di questa email, come logo, piè di pagina, informazioni di contatto, saranno inclusi in entrambe le versioni della campagna.

Se vuoi che i tuoi utenti vedano il Sondaggio che hai creato al 5° passo che abbiamo descritto, puoi semplicemente includere il link alla versione web della nostra email AMP, invece del link ai Moduli Google.

Per ottenere questo link:
  • vai in modalità Anteprima;

  • clicca su “AMP HTML” nell’angolo in alto a destra;

  • clicca sull’icona “Copia”.

Getting-Shareable-Link

Conclusioni

Abbiamo appena creato un’email con questionario. Funziona, come tutti gli elementi AMP, su Gmail e su Mail.ru. Gli altri utenti vedranno l’opzione di riserva del sondaggio.

Inizia

Andre Luiz Daleffi 2 mesi fa

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 ha commentato Andre Luiz Daleffi 2 mesi fa

Ps.: tried with Gmail

Hanna Kuznietsova ha commentato Andre Luiz Daleffi 2 mesi fa

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.

Potresti essere interessato a

← indietro avanti →
ieri · 8 minuti letti
Come creare modelli di newsletter per Outlook usando Stripo

Con Stripo, che ti consente di inviare e-mail alle app di Outlook (sia su macOS che Windows) e ad Outlook Web, inviare eleganti e-mail HTML tramite il tuo client di posta preferito è facilissimo! Nessun componente aggiuntivo richiesto. In questo post ti mostreremo come esportare modelli email in HTML verso Outlook con solo due clic. Unisciti a Stripo Introduzione Fino a poco tempo fa era difficile, se non impossibile, inviare newsletter in HTML tramite Outlook e far sì che venissero...

Marketing Modelli How-to
6 giorni · 11 minuti letti
Come scrivere email efficaci di promemoria per un evento

Al giorno d'oggi ormai i clienti sono abituati a ricevere tanti messaggi promozionali, quindi è possibile attirare la loro attenzione verso una campagna di marketing via email solo esprimendo preoccupazione e interesse sinceri. E i promemoria per gli eventi sono un buon modo per farlo. Una volta che un cliente ha già acquistato un tuo prodotto, che sia il biglietto per una conferenza o un video tutorial, potresti pensare che non devi fare altro. Ma dato che le persone sono...

Design Marketing Modelli
Rimani sempre informato sulle ultime notizie, alle guide, agli articoli e alle tecniche relativi all'email marketing