Création Structure Modèles How-to AMP
~ 12 min lu
7297 vues
évaluez-le
04 juin

Service de données Stripo, ou comment créer des formulaires AMP plus facilement

Stripo / Blog / Service de données Stripo, ou comment créer des formulaires AMP plus facilement

Aujourd’hui, Stripo a dévoilé son service de données. Nous vous montrerons maintenant à quoi il sert, comment l’utiliser pour amener votre marketing par e-mail à un tout autre niveau.

Introduction ou quelle est l’utilisation des e-mails AMP

Bien souvent, nous demandons aux usagers de nous évaluer ou de laisser des commentaires, nous leur demandons de partager leurs informations de contact, leur âge, leur genre, etc. Les formulaires et les questionnaires sont une partie intégrale du marketing par e-mail.

Pourquoi AMP ? Nos tests ont démontré que le taux de conversion des e-mails AMP était 5 fois plus grand que la conversion des e-mails HTML traditionnels.

Nous nous sommes empressés de partager ces résultats avec vous.

Leaving-Feedback-in-Email

Le service de données de Stripo : Qu’est-ce que c’est et comment l’utiliser ?

En utilisant les révolutionnaires formulaires AMP, vous pouvez amasser les adresses e-mail, les numéros de téléphone et même calculer votre NPS dans les e-mails — complètement fait dans les e-mails.

Checkboxes-in-EmailsC’est exact. Mais pour être capable de mesurer et de traiter ces résultats, vous devez définir le CORS de votre côté, créer des points de terminaisn sur vos serveurs pour connecter vos e-mails à un service de données. Cela prend beaucoup de temps et nécessite des habiletés de programmation ou l’aide d’un programmeur.

Chez Stripo, nous le faisons pour vous : nous vous permettons de créer des services de données en quelques clics seulement (aucune compétente de codage requise), où vous stockez les réponses des usagers. Vous y avez accès en tout temps !

Créons un service de données et utilisons-le dans notre e-mail avec un formulaire AMP.

Prêt pour en faire l’essai ? Allons-y ensemble…

Étape 1. Créer un nouveau service.

Veuillez noter que vous pouvez utiliser notre service de données, ou intégrer n’importe quel point de terminaison externe, même ceux créés avec Zapier. 

Option 1. Choisir le stockage Stripo.

Si vous voulez stocker les réponses des usagers de notre côté, parce que c’est bien plus facile que de créer un nouveau serveur pour chaque campagne d’e-mails, alors vous devez utiliser notre service de données. Vous aurez accès à ces données en tout temps.

Alors, pour créer un nouveau service avec Stripo, vous devez :

  • Cliquer sur l’onglet « Données » sur le côté gauche de l’écran dans votre compte Stripo ;

  • Dans la nouvelle fenêtre, choisir l’onglet « Services » ;

donnees services fr

  • Cliquez le bouton « + Créez votre service ».

creez votre service

  • La fenêtre de configuration de service apparaîtra. Ici, vous devez donner un nom à votre service de données ainsi qu’une courte description. Le nom est obligatoire, la description est optionnelle ;

  • Tous les autres champs sont remplis automatiquement ;

  • Copiez l’adresse URL pour votre future campagne.

configuration du service fr

Important de noter :

Nous vous recommandons de nommer ce service d’après le nom de votre campagne d’e-mails. Nous croyons que cela vous permettra plus facilement de trouver et d’analyser les données au sein de votre compte Stripo à la fin de la campagne.

  • Dans la section d’en dessous, basculez le bouton « Stockage sur Stripo ».

stockage de donnes

Option 2. Choisir Zapier pour le stockage.

Pour utiliser Zapier pour stocker vos données, vous devez faire toutes les étapes ci-dessus, mais au lieu de choisir Stripo pour le stockage de vos données, vous devez :

  • Choisir « Ressources de stockage externe » ;

  • Coller le lien Webhook de Zapier — nous allons le créer maintenant.

webhook zapier fr

Créer le Webhook sur Zapier

Zapier offre une grande variété de zaps (connexions).

Comme je veux sauvegarder toutes les réponses des usagers dans Google Sheets, je dois connecter Stripo à Zapier, et Zapier à mon Google Drive.

Faisons-le :

  • Dans votre compte Zapier, dans le coin supérieur gauche, cliquez le bouton « Make a Zap » ;

The-Make-a-Zap-Button

  • Donnez-lui un nom ;

  • Dans la section « 1. When this happens », choisissez « Webhooks by Zapier » ;

Creating-Webhooks-by-Zapiet

  • Et comme déclencheur (trigger), choisissez « Catch hook » ;

Choosing-Webhooks-as-a-Trigger

  • Puis cliquez « CONTINUE » ;

  • Dans la nouvelle fenêtre, vous cliquez l’URL du Webhook que Zapier vient de générer pour vous ;

Webhook-URL

  • Puis vous revenez à Stripo et entrez ce lien dans le bon champ ;

Pasting-Zapier-Webhook-URL

  • Maintenant, veuillez copier l’adresse URL de notre service de données ;

  • Collez-la dans le formulaire — vous devez remplacer l’URL existante avec le lien du service de données ;

Replacing-default-end-point-with-Necessary-One

  • Maintenant, retournons dans Zapier ;

  • Ici, nous sautons (« Skip ») les tests et cliquons « Continue », car nous n’avons rien à tester pour l’instant ;  

Skipping-Zapier-Test

  • Maintenant, dans la section « 2. Do this », nous choisissons « Google Sheets » — pour les trouver, vous devez entrer « Google » ou « Sheets » dans le champ de recherche ;

Choosing-Google-Sheets

  • Maintenant, nous devons choisir le bon événement d’action — pour nos besoins, nous avons besoin de l’option « Create Spreadsheet Row » (créer une rangée de feuille de calculs) ;

Choosing-the-Create-Spreadsheet-as-Action

  • Cliquez sur « Continue » ;

  • Entrez les informations de votre compte Google ;

  • Donnez accès à Zapier à votre compte Google Drive ;

Giving-Zapier-Access-to-Your-Google-Drive

  • Zapier ajoute automatiquement votre compte Google Drive à la liste. Vous n’avez rien à choisir ;

Zapier-Chooses-Goole-Drive-as-Your-Account

  • J’ai déjà créé un document Google Sheets avec les colonnes nécessaires. Mon but est de collecter les évaluations et les commentaires. Bien sûr, j’ai aussi besoin de savoir quels usagers nous ont évalués. Alors, voici de quoi a l’aide ma feuille de calculs :

My-Spreadsheet

  • Personnalisez votre feuille de calculs : vous devez sélectionner « Drive », « Spreadsheet », qui est la feuille que vous avez créée. Je choisis « Sheet 1 », car je veux amasser toutes les données sur une seule page.

Customizing-Spreadsheet

  • Zapier tire les noms des champs de votre feuille de calculs ;

  • Zapier tire les données de votre formulaire AMP (comme mentionné, nous collecterons les adresses e-mail, les évaluations et les commentaires) ;

  • Nous devons choisir les « valeurs » pour chacun des champs ;

  • Cliquez « Continue » ;

Customizing-Google-Sheets-in-Zapier

  • Effectuez le test, veuillez vérifier si la connexion s’est bien établie ;

  • Si votre test a été fait avec succès, cliquez sur « Done Editing » et activez votre Zapp.

Successful-Test

Important :

Nous vous avons montré comment stocker des données sur notre service et sur un service externe (Zapier). Vous pouvez choisir les deux si vous le désirez, juste à activer les deux options :

1234567

Étape 2. Travailler sur vos formulaires AMP.

Maintenant que nous avons nos points de terminaison, créons nos formulaires AMP.

Important de noter :

Le formulaire mentionné ne fonctionnera que pour les destinataires dont le logiciel de client e-mail supporte l’AMP — Gmail et Mail.ru, sur les écrans d’ordinateurs et les appareils mobiles. Les autres usagers verront la solution de remplacement que vous construirons plus tard.

Actuellement, il y a trois méthodes pour créer des formulaires AMP dans Stripo :

Méthode 1. Incorporer des composants AMP de Google AMP dev.

Google nous offre à tous des composants AMP incorporés. Vous n’avez qu’à suivre les instructions sur leur page respective, et incorporer votre formulaire dans notre modèle.

Mais c’est un peu compliqué pour moi, alors je préfère ne pas utiliser cette méthode.

Méthode 2. Utiliser des modules Stripo.

Ah, ceci est beaucoup plus facile.

Une fois que votre modèle est terminé, vous devez :

  • Aller dans la section « Modules » ;

  • Entrer « Form » dans la console de recherche ;

Adding-AMP-Forms-from-the-Modules-Section

  • Déposer le module choisi dans votre modèle ;

  • Personnaliser le module, au besoin ;

Attention : ne faire aucun changement à la partie :zap:HTML de ce module, car cela pourrait impacter la performance de votre formulaire AMP.

  • Cliquer sur la partie :zap:HTML de ce module pour ouvrir son code ;

Editing-AMP-Modules-in-Stripo

  • Collez l’adresse URL que vous avez copiée lorsque vous avez créé votre service de données à l’étape 1 ;

  • Insérez-le comme montré dans l’image GIF ci-dessous :

Inserting-URL-Address-Into-AMP-Form

  • Maintenant, ce formulaire va collecter les évaluations et les commentaires. Mais nous devons savoir qui les ont soumis. Alors, pour recevoir les adresses e-mail, nous devons mettre ce code dans notre formulaire :

Pasting-Embed-Code-into-Template

Il va après , mais avant .

Ce champ est caché et est rempli automatiquement. Les usagers n’ont pas à entrer leur adresse e-mail manuellement.

Important :

Contactez votre ESP pour obtenir la balise de fusion qui doit recevoir l’adresse e-mail. Nous utilisons eSputnik donc, dans notre cas, cette balise est « % EMAIL|% ». Ne faites aucun autre changement au reste de ce code. 

  • Votre e-mail est prêt à amasser les commentaires et les évaluations de vos usagers :)

Important :

Vous pouvez tester des formulaires même dans le mode de prévisualisation. Si tout est correct, votre feuille Google Sheets aura alors ces informations :

Merge-Tages-in-Google-SheetsElle montre la balise de fusion, car nous avons testé dans le mode de prévisualisation.

Lorsque nous collectons des informations réelles de vrais usagers (collègues si vous testez ce formulaire une autre fois), elles seront associées à de vraies adresses.

Testing-AMP-Forms_Google-Sheets

Méthode 3. Utiliser nos modèles préconçus. 

Je crois que c’est actuellement la méthode la plus simple d’utiliser des formulaires ASP dans vos e-mails. Dans un proche avenir, nous publierons un bloc glisser-déposer — nous vous en dirons plus sous peu.

Alors, pour utiliser nos modèles, vous devez :

Stripo-Template-with-Embedded-AMP-Forms

Important de noter :

Nous vous avons déjà mentionné que vous auriez besoin de créer une solution HTML de remplacement pour ce sondage. Vous n’avez pas besoin de le faire avec ce modèle, car il contient déjà l’invitation HTML au sondage.

  • Dans le modèle, cliquez sur le formulaire :zap:HTML ;

  • Ouvrez l’éditeur de code ;

  • Remplacez l’URL existante par l’adresse URL que vous avez copiée dans le service de données.

Pasting-End-Point-in-Email

  • Si vous voulez aussi collecter les adresses e-mail, veuillez copier le code imbriqué tel que montré dans la section de la « Méthode 2 ». Mais dans ce cas, il ira après le et avant le

     

Pasting-Embed-Code-into-Template

Étape 3. Créer une solution de remplacement.

Nous avons publié un long article où nous montrons 10 des meilleurs e-mails d’invitation à un sondage et montrons comment les créer avec Stripo.

Ici, nous vous montrerons les trois meilleures solutions de remplacement, à mon avis. Elles sont totalement sécuritaires pour le Web :

Solution 1 : Collecter les évaluations

Comme nous l’avons dit, les usagers peuvent évaluer nos services directement dans l’e-mail :

  • Glissez une structure à 4 contenants dans votre modèle dynamique — si vous voulez être évalué de 1 à 5 ;

  • Incluez cette structure seulement dans la version HTML ;

  • Ajoutez un autre contenant à cette structure ;

  • Égalez ces contenants ;

Adding-Structures-with-5-Containers

  • Insérez des images avec les numéros « 1 », « 2 », « 3 », « 4 » et « 5 » dans ces contenants ;

  •  Ajoutez une structure avec le même nombre de contenants juste en dessous et entrez les « notes » pour chaque image, si vous le désirez ;

Fallback-Rating

  • Appliquez une URL propre à chaque image.

Votre ESP vous fournira le nombre total de chaque évaluation.

Solution 2. Évaluer le service.

Vous pouvez simplement demander à vos usagers s’ils sont satisfaits de vos produits en choisissant parmi les options « Mauvais », « Bon », « Excellent ».

Rating-Products_Fallback-with-Three-Option

Vous faites cela de la même façon que pour la méthode 1, avec la seule différence que vous n’avez besoin que d’une structure à 3 contenants. C’est tout.

Solution 3. Fournir un lien vers une source externe.

Si vous avez l’intention de poser quelques questions aux usagers, vous pourriez bien leur demander de remplir un sondage à plusieurs questions comme solution de remplacement.

Vous construisez un formulaire sur votre site, ou utilisez les formulaires Google.

Une fois que vous l’avez fait et que vous avez un lien vers votre sondage, vous :

  • Ajoutez une structure à un contenant dans votre modèle ;

  • Déposez un bloc « Bouton » de base dedans ;

  • Personnalisez votre bouton ;

  • Ajoutez votre URL à ce bouton ;

  • Ajoutez un texte d’action au-dessus de ce bouton ;

  • Incluez cette structure seulement dans les e-mails HTML.

Fallback-Forms

Important de noter :

Les deux versions de votre e-mail — AMP et HTML — contiendront toutes les parties de votre modèle, comme l’en-tête, la bannière, le pied de page et les informations de contact.

Et seulement le formulaire AMP ou la solution de remplacement HTML apparaîtront dans la version appropriée de votre e-mail.

Étape 4. Prévisualiser vos e-mails.

Avant d’envoyer vos e-mails avec des formulaires AMP à vos usagers, veuillez les prévisualiser afin de vous assurer qu’il n’y a pas d’erreurs et envoyez des e-mails tests à vos collègues pour voir si les formulaires AMP fonctionnent vraiment.

Pour vérifier les tests AMP dans Gmail, veuillez ajouter notre adresse e-mail — info@stripo-test.email  — dans vos contacts sûrs.

Adding-Stripo-As-Trusted-SenderPour plus de détails sur la façon de prévisualiser des e-mails dans Stripo, veuillez consulter notre article Prévisualisez les e-mails tests avec Stripo.

Étape 5. Vérifiez vos résultats.

Pour voir les résultats de cette campagne, vous devez aller dans la section « Données » à nouveau.

Trouvez le service que vous avez créé auparavant.

List-of-ServicesComme vous pouvez voir, cela montre combien de requêtes chaque service a eues, et quand a eu lieu la dernière requête.

Cliquez sur le bouton « Télécharger CSV ».

Downloading-CSV-FilesC’est tout.

À venir bientôt

Nous vous avons montré comment collecter les commentaires en utilisant des formulaires AMP.

1. Collecter les informations de contact des usagers

Vous pouvez aussi utiliser les formulaires AMP pour des rappels, pour enrichir votre base de contacts avec leurs numéros de téléphone, leur demander leur âge ou leur emplacement afin de leur fournir des offres plus personnalisées.

Comment le faire ?

  • Vous n’aurez qu’à glisser notre élément de base « Formulaire », qui sera bientôt disponible, dans votre e-mail ;

AMP-Form-Block

  • Sélectionner le champ texte requis ;

Text-Input

  • Et ainsi, collecter les infos de vos usagers quand ils seront prêts à vous les partager.

Vous serez même capable de personnaliser ces formulaires.

2. Utiliser des cases à cocher

Les rêves deviennent réalité :)

Ajouter des cases à cocher et des évaluations dans les e-mails sans codage ? Vous pourrez le faire très bientôt !

Forms-with-CheckboxesRestez branché ;)

Mot de la fin

Le service de données vous aide aujourd’hui à obtenir le maximum des e-mails AMP, il vous aide à connecter facilement vos campagnes d’e-mails à des services de données sans serveurs externes, sans la nécessité de définir les CORS et avec un accès instantané aux résultats de la campagne.

Voulez vous profiter de toute la puissance d'email AMP? Vous pouvez le faire dès maintenant
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