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

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

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

Da 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:

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.

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.

Modificare 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:

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

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

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

Se 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;

• 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;

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

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

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