Création Modèles How-to AMP
~ 9 min lu
3 commentaires
5614 vues
évaluez-le
15 juin

Créer des formulaires AMP avec Stripo en utilisant des modules préconstruits

Stripo / Blog / Créer des formulaires AMP avec Stripo en utilisant des modules préconstruits

Bonjour tout le monde.

Aujourd’hui, nous commençons notre série de tutoriels dans lesquels nous vous montrerons comment créer des e-mails AMP plus rapidement que vous écrivez un paragraphe de texte promotionnel.

Courte introduction

Comme vous le savez probablement déjà, le mois dernier nous avons fait notre série sur le Quiz Stripo AMP. Cela consistait en 3 e-mails, chacun contenant des éléments de gamification. Le but de cette campagne était de démontrer quelques-unes des capacités de la technologie AMP à nos lecteurs.  

Suite à cela, nous avons reçu littéralement des milliers de requêtes du genre « Comment est-ce que je peux faire des e-mails similaires pour mes campagnes ? ».

C’est pourquoi nous avons décidé de faire ces tutoriels.

Commençons par le questionnaire AMP tel qu’il était dans le premier e-mail de notre série de quiz…

Comment créer des formulaires AMP avec Stripo

Running-Quizzes_AMP-EmailsNormalement, pour créer cet élément d’e-mail, vous devriez gérer du code AMP, incorporer de multiples éléments AMP dans vos e-mails, les connecter à vos serveurs avec l’aide de vos développeurs et activer l’AMP dans les e-mails. Avec nous, c’est beaucoup plus facile…

Suivez simplement notre guide étape par étape, et vous concevrez cet e-mail pour vos propres campagnes.

Étape 1. Insérer un module AMP préconstruit dans votre modèle.

Pour votre commodité, nous avons un module « Questionnaire AMP » prêt à l’utilisation. Il comporte trois questions. En fait, nous avons utilisé notre premier e-mail de la série comme base, retiré les éléments de notre marque et notre introduction. C’est tout.

Alors, votre module aura trois sections pour des questions.

Screen-of-Entire-AMP-ModuleVous insérez ce module dans votre modèle. Il est inclus dans la version AMP HTML par défaut.  

Pour insérer le module dans un modèle, veuillez :

  • Glisser un conteneur simple dans votre e-mail ;

  • Aller dans la section « Modules » ;

  • Entrer dans l’onglet « pré-construit » ;

  • Entrez « Questionnaire » dans le champ de recherche ;

  • Glisser ce module dans votre modèle.

Adding-a-Prebuilt-Module-with-AMP-Questionnaire-into-EmailMaintenant, vous pouvez modifier les couleurs ; les couleurs pour le mot « Question » et son arrière-plan, et les couleurs des champs des réponses.

Pour le faire, cliquez sur l’icône « Structure », puis ouvrez l’éditeur de code comme indiqué ci-dessous :

Editing-Colors-for-the-Module

Modifier la section « Mot question »

Vous devez remplacer les couleurs existantes par celles dont vous avez besoin, selon leur numéro de couleur de notre palette.

Editing-the-Answer-SectionPour obtenir le numéro de la couleur, commencez à modifier les boutons ou le texte, et copiez simplement le numéro de la couleur depuis la palette de couleurs.

Modifier le design des champs « Réponses »

Dans les champs de « réponses », vous indiquez si la réponse était correcte ou non.

Pour trouver leur code, descendez :

Replacing-Colors-for-Answer-Option-Section

  • Où « a1 » identifie les bonnes réponses ;

  • Et « a0 » identifie les mauvaises réponses.

Vous pouvez remplacer les couleurs pour l’arrière-plan et la bordure.

Par défaut, lorsque les usagers donnent une réponse incorrecte, le « champ de réponse » devient rouge ; lorsque les usagers donnent la bonne réponse, il devient vert.

Et qu’en est-il des autres éléments, comme les questions et les images et un bon nombre de sections ? Vous les modifiez avec le fichier JSON.

En passant, ce module est déjà connecté au fichier JSON. Vous n’avez pas besoin de rien y changer. Nous travaillerons seulement dans le fichier JSON.

Étape 2. Changer les questions/modifier un fichier JSON.

Oui, vous avez besoin d’un fichier JSON pour créer votre source de données — pour le questionnaire lui-même.

Ce fichier insèrera les informations et les questions de votre serveur dans les e-mails.

Pour votre fichier JSON, utilisez le code donné en exemple ci-dessous (celui que nous avons utilisé pour notre 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"
        }
      ]
    }
  ]
}

Où « id » est la section avec les questions :

  • « id1 » — est la section avec la question numéro 1. Tous les éléments de « id1 » à « id2 » se rapportent à la question 1 ;

  • « img » — lien vers l’image que vous voulez utiliser dans le questionnaire ;

  • « question » — est la question elle-même ;

  • « wrongtext » — c’est le texte que les usagers vont voir s’ils donnent une mauvaise réponse ;

  • « ida1-4 » — ce sont les options de réponse présentées aux usagers ;

Modifiez ces infos manuellement :

  • « img » : « lien vers votre image »,

  • « question » : « Votre question ? »,

  • « text » : « texte à afficher une fois que l’usager a donné une réponse »,

  • « wrongtext » : « c’est ce que les usagers verront après avoir donné une mauvaise réponse »,

  •  « ida » : 1,
    « answer » : « réponse — option 1 »

  •   « ida » : 2,
    « answer » : « réponse — option 2 »

Faites de même pour chaque section.

Notre code contient trois sections de questions. Si vous n’en voulez que deux, vous n’avez qu’à enlever le code identifié ci-dessous de votre fichier JSON.

Removing-Sections-from-JSONSi vous voulez que toutes les questions comprennent 4 options de réponse, alors enlevez la section 1 et reproduisez la section 2 dans le fichier JSON. 

Étape 3. Connecter les e-mails à une source de données.

Cette étape est nécessaire pour insérer les données du fichier JSON dans les questionnaires ; ainsi que pour montrer aux usagers si leurs réponses étaient correctes ou non (les usagers soumettent leur réponse et notre source de données indique si la réponse était correcte ou non, et leur donne la bonne réponse).

  • Ouvrez l’onglet « Données » ;

  • Allez dans la section « Source de données » ;

  • Créez une nouvelle source de données ;

  • Entrez le nom de cette campagne (cela peut être n’importe quoi) ;

  • Dans la nouvelle section en dessous, collez votre fichier JSON ;

  • Copiez l’adresse de l’URL.

Creating-New-Data-Source

Étape 4. Travailler sur le stockage des données/choisir où seront envoyées les réponses des usagers.

Nous devons créer un service de données — un endroit où stocker les réponses des usagers.

Si vous voulez placer les données sur les serveurs de Stripo, veuillez activer le bouton « Stockage sur Stripo ».

Building-a-New-Data-Storage-by-Using-Stripo-Data-ServiceSi vous planifiez stocker vos données sur Google Drive (feuille de calculs), veuillez suivre les instructions dans notre publication Service de données Stripo.

Étape 5. Insérer les points de terminaison dans les e-mails

Maintenant pour connecter notre sondage vers les serveurs et le stockage de données — pour de fait activer le questionnaire AMP dans nos e-mails, nous devons insérer les points de terminaison que nous venons de construire :

  • Cliquez sur l’icône de la structure ⚡ HTML ;

  • Puis ouvrez l’éditeur de code ;

Editing-Colors-for-the-Module

  • Remplacez le lien qui va après « action-xhr » dans la balise <form id...> avec l’URL que vous avez générée dans l’étape 4 ;

  • Remplacez la source du lien qui va après, dans la balise <amp-list… > avec l’adresse que vous avez générée à l’étape 3 ;

Inserting-URL-Links.

  • C’est tout.

Étape 6. Créer une version HTML de remplacement du questionnaire.

Nous devons créer une version HTML de remplacement du sondage pour ceux dont le client e-mail ne supporte pas encore AMP.

Récemment, nous avons publié un article qui montrait 10 e-mails d’invitation à un sondage. Nous espérons que vous y trouverez de l’inspiration.

Normalement, les spécialistes en marketing incluent dans ces e-mails des liens vers des formulaires Google ou des questionnaires sur le site Web où les usagers peuvent remplir le sondage…

Email-Invitation-to-Participate-in-Survey

(E-mail d’invitation à un sondage de Litmus)

Pour ajouter ce lien dans vos e-mails de sondage, veuillez :

  • Glisser une structure de conteneur simple juste en dessous ou au-dessus de la structure contenant votre quiz AMP HTML ;

  • Mettez-y le contenu nécessaire ;

  • Glissez le bloc « Bouton » de base dans cette structure ;

  • Donnez-lui l’apparence de votre choix ;

  • Collez-y votre URL ;

  • Incluez cette structure dans la version HTML de cet e-mail de sondage.

Including-Structures-in-HTML-Email

Important :

Tous les autres éléments de cet e-mail, comme le logo, l’en-tête, les informations de contact, seront inclus dans les deux versions de cette campagne.

Si vous voulez que vos usagers voient le sondage que vous venez de créer à l’étape 5, vous pourriez simplement inclure le lien vers la version Web de votre e-mail AMP au lieu d’un lien vers les formulaires Google…

Pour obtenir ce lien, veuillez :
  • Entrer en mode de prévisualisation ;

  • Cliquer « AMPHTML » dans le coin supérieur droit ;

  • Cliquer l’icône « Copier ».

Getting-Shareable-Link

Mot de la fin

Nous venons de créer un e-mail questionnaire. Il fonctionne, comme tous les éléments AMP, avec Gmail et Mail.ru. Les autres usagers verront la solution de rechange.

Si vous avez aimé notre questionnaire AMP, créez-en un similaire.

Commencez

Andre Luiz Daleffi il y a 3 mois

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 commenté à Andre Luiz Daleffi il y a 3 mois

Ps.: tried with Gmail

Hanna Kuznietsova commenté à Andre Luiz Daleffi il y a 3 mois

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.

Vous pourriez être intéressé par

← précédent suivant →
09 octobre · 16 min lu
Les 16 meilleures pratiques pour le design des entêtes d’e-mails

L’entête du e-mail est l’élément que vous utilisez régulièrement dans vos e-mails de newsletters. Mais bien souvent, nous oublions que c’est bien plus complexe que seulement un logo et un menu. L’entête complet d’une newsletter comporte trois parties essentielles : Infos à propos de l’envoyeur ; la ligne de sujet, et le préentête ; l’entête de l’e-mail lui-même. Dans cet article, nous vous montrerons comment définir la ligne de sujet et le préentête, et nous partagerons 16 idées d’entête d’e-mails qui rendent vos e-mails plus...

Création Modèles How-to
Use-Data-from-Google_Featured Image
25 septembre · 9 min lu
Comment extraire des données de Google Sheets pour vos e-mails

Avez-vous déjà pensé à extraire des données de Google Sheets pour les insérer dans vos e-mails pour automatiser la production ou la mise à jour de vos e-mails ?   Oui, c’est possible. C’est même possible sans votre intervention. Nous voulons vous rappeler ce qu’est le contenu en temps réel : le contenu en temps réel, c’est-à-dire dynamique, permet de mettre à jour le contenu de vos e-mails après que l’e-mail ait été envoyé. Cela signifie que les utilisateurs voient toujours du...

Création Modèles How-to AMP
Soyez toujours au fait des dernières actualités de l'e-marketing, des guides, des articles et des guides pratiques sur la conception d'e-mails