Création Marketing Modèles How-to AMP
~ 8 min lu
2 commentaires
46136 vues
évaluez-le
23 juin 2019

Comment construire des carrousels AMP pour vos e-mails avec Stripo

Stripo / Blog / Comment construire des carrousels AMP pour vos e-mails avec Stripo

En mars dernier, Google a publié son AMP pour les e-mails. Et depuis le 2 juillet, il est même disponible pour les utilisateurs de G-Suite et est activé par défaut pour tous les utilisateurs de Gmail.

Nous savons que cela permettra aux destinataires d’ajouter des éléments nécessaires aux paniers, d’appliquer l’effet carrousel aux images, etc. Et bien sûr, toutes ces actions peuvent maintenant être prises directement dans les e-mails.

C’est la nouvelle ère du marketing par e-mail qui entraîne en fait de grands changements : les ESPs doivent maintenant modifier leurs types de protocole, les destinataires doivent apprendre que les courriels sont désormais des versions réduites des sites Web et sont presque aussi fonctionnels que ces derniers. Les spécialistes du marketing par e-mail doivent acquérir de nouvelles compétences de codage. Tous ces changements prennent tellement de temps.

L’objectif principal de Stripo a toujours été de réduire le temps que vous passez sur la production de e-mails en automatisant la plupart des processus de création.

Par conséquent, nous nous efforçons d’automatiser la création d’e-mails utilisant AMP. Le 18 juin, nous avons publié notre bloc glisser-déposer « AMP-carrousel ».

Building-AMP-carousel-with-Stripo_Simple-Carousel

Avant d’aborder ce guide, je voudrais souligner les avantages de la création de e-mails AMP avec Stripo.

Pourquoi créer des e-mails AMP avec Stripo :

  1. Vous n’avez pas besoin d’ajouter aucun élément de code AMPHTML (dans l’en-tête du e-mail) ;
  2. Aucune connaissance de codage requise — vous pouvez utiliser un élément déjà préparé ;
  3. Économie de temps — vous insérez simplement les liens vers vos images dans ce module de contenu ;
  4. Pour chaque image dans votre carrousel AMP, que vous créez avec nous, vous pouvez définir un lien qui amènera vos lecteurs vers une page de votre site Web.

Comment créer un carrousel AMP avec l’éditeur Stripo :

Il faut deux étapes pour créer un carrousel AMP avec Stripo :

Étape 1. Créer le carrousel AMP à proprement dit

  • Glissez le bloc de carrousel AMP dans le modèle de e-mails sur lequel vous travaillez ;

Building AMP Carousel_AMP Block_FR

Vous verrez que l’élément aura un signe « ⚡HTML » à ses côtés. Cela signifie que cet élément ne sera visible que dans les e-mails AMP et sera caché dans les clients e-mail ne supportant pas l’AMP. Nous devrons créer une solution alternative pour les autres lecteurs. Nous y reviendrons plus tard.

AMPHTML-odule-in-Email

  • Double-cliquez sur l’élément pour l’activer dans le panneau des paramètres ;
  • Maintenant, dans le panneau des paramètres, vous devez basculer le bouton dans « Prévisualiser l’affichage », si vous voulez voir les images miniatures ;
  • Définissez la largeur de ces miniatures ;

Building AMP Carousel_Preview Image Button

Building AMP Carousel_Uploading Images

  • Cliquez sur le bouton « Ajouter une diapositive » ;

Building AMP Carousel_Add Slides Button_Fr

  • Faites de même pour les autres images ;
  • Vérifiez que la taille des images soit identique. Sinon, coupez-les dans notre éditeur de photo ;
  • Complété !

Dragging-Image-AMP-carousel

Créez un carrousel AMP avec Stripo maintenant

Important de noter :

J’ai ajouté 16 diapositives et elles ont fonctionné parfaitement dans Gmail sur de multiples appareils.

Étape 2. Créer une alternative pour les autres lecteurs

Maintenant que tous nos lecteurs sur Gmail verront le carrousel, nous devons penser aux autres qui n’utilisent pas Gmail.

Le carrousel AMP que nous venons de construire fonctionne sur les ordinateurs utilisant Gmail par défaut.

Nous devons construire une alternative pour les autres.

Dans ce cas, il y a deux types d’alternatives :

Type 1 : Carrousel interactif

Il est supporté par les appareils Apple seulement, et par Yahoo ! Mail.

  • Créez un carrousel régulier avec FreshInbox ;
  • Copiez le code imbriqué ;
  • Glissez le bloc HTML dans votre modèle de e-mail ;
  • Double-cliquez dessus pour activer l’éditeur de code ;
  • Dans l’éditeur de code, collez le code ;
  • Fermez l’éditeur de code ;

The-Close-the-Code-Editor-Button_Building-AMP-Emails-with-Stripo

  • Double-cliquez sur ce module dans le modèle de e-mail pour activer le panneau des paramètres ;
  • Dans le paramètre « Inclus dans », sélectionnez l’option « HTML ». En faisant cela, vous vous assurez que ce contenu ne sera visible que pour les clients qui ne supportent pas AMP pour e-mails.

Building AMP Carousel_Include in HTML Button

Chaque client e-mail décide quelle version du carrousel montrer !

Important de noter :

Si un client e-mail d’un lecteur ne supporte pas ce type d’interactivité, il ne verra que la première image.

Pour plus d’informations sur comment créer un carrousel d’images interactif, consultez cette publication de notre blogue.

Type 2. Modules de contenu statique

  • Glissez une structure de 2 colonnes dans votre modèle de e-mail ;
  • Déposez un bloc d’images dans la première colonne ;
  • Téléchargez l’image nécessaire ;
  • Déposez le bloc de texte dans la deuxième colonne ;
  • Formatez le texte dans une police similaire ;
  • Dans le panneau des paramètres, dans la ligne « Inclus dans », choisissez l’option « HTML ». Comme nous l’avons dit, en faisant cela, cela vous assure que ce module de contenu ne sera montré que pour les clients e-mail ne supportant pas l’AMP pour e-mails.

Product-Content-Modules_Building-AMP-Emails

Vous pouvez ajouter autant de modules de produits que vous le désirez dans votre e-mail. Pour plus d’information sur comment sauver du temps lorsque vous créez des blocs similaires, consultez cet article de blogue, dans la section « Copier et déplacer des éléments ».

Important à noter :

Une fois que vous avez sélectionné l’option « Inclus dans - HTML », l’élément en question sera montré dans les clients e-mail, qui ne supportent que le type MIME HTML traditionnel.

En sélectionnant l’option « Inclus dans AMPHTML » (⚡HTML), ledit bloc sera montré dans les clients e-mail supportant le type MIME AMPHTML (text-x-amphtml).

Si rien n’est spécifiquement défini pour un élément donné, il sera affiché sur l’ensemble des appareils et des clients e-mail.

En faisant ces simples étapes, nous avons bâti un simple carrousel AMP — vous avez utilisé des images sans description sur elles. Cela fonctionne mieux lorsque vous démontrez quelques items similaires ou différents angles d’un même produit.

Mais si vous avez besoin d’un carrousel plus complexe avec plus d’informations sur les images avec des « faux » buttons ? Vous pouvez toujours le faire avec nous puisque notre éditeur permet d’ajouter du texte sur les images et d’appliquer plusieurs filtres. ;)

Construire un carrousel AMP avec descriptions et « boutons » sur images

Alors, d’abord et avant tout, vous devez construire votre carrousel AMP régulier, comme décrit ci-dessus. Maintenant, procédons au design des diapositives :

a) Écrire du texte sur des images

  • Une fois que vous avez téléchargé une image, ouvrez-la dans l’éditeur photo ;

Building AMP Carousel_Edit Image Button

  • Dans la barre d’options de l’éditeur photo, cliquez sur l’icône pour « Texte », pour placer du texte sur votre image. L’éditeur offre environ 1 000 polices ;

Embedded Photo Editor_FR

  • Choisissez le type de police, la couleur ;
  • Dans le coin supérieur droit de l’éditeur, cliquez sur « Appliquer » pour sauvegarder ce texte.

b) Placer un « bouton » CTA sur vos images

  • Premièrement, vous devez préparer ce bouton — l’image devrait être en SVG ou n’importe quel autre format avec un arrière-plan transparent ;
  • Dans le coin supérieur gauche de l’éditeur, cliquez sur le bouton « Ouvrir » ;
  • Sélectionnez l’option « Image de superposition » ;

Adding Second Image_Embedded Photo Editor

  • Téléversez votre image de bouton ;
  • Placez-le exactement où vous voulez dans votre diapositive ;
  • Définissez les tailles ;
  • Cliquez sur le bouton « Enregistrer » pour sauvegarder les changements à votre diapositive.

Embedded Photo Editor_Save Button

Alors, voici ce que nous venons de construire :

Building-AMP-carousel-with-Stripo-Images-with-Button

Quels clients e-mail supportent actuellement les e-mails AMP :

  • Gmail ordinateur — supporte déjà ;
  • Mail.ru — supporte déjà.

Yahoo, AOL et Outlook les supporteront bientôt.

Pensées finales

Nous venons de créer 2 carrousels AMP sans même ouvrir l’éditeur HTML. Toute diapositive de chaque carrousel montre vos produits aux lecteurs sous différents angles ou les plus récents items de votre collection. Et chaque diapositive, une fois cliquée, amène votre lecteur à une page spécifique de votre site Web. C’est un bon moyen de mettre de la vie dans vos e-mails, de mieux interagir avec votre public cible et de rendre vos e-mails plus fonctionnels.

Pour savoir comment prévisualiser et exporter vos e-mails AMP, consultez les paragraphes appropriés dans cet article de notre blogue.

Créer des e-mails AMP peut être très facile si vous utilisez le constructeur de e-mails de Stripo. ;)

Veuillez noter que vous devez être ajouté à la liste blanche de Google afin d’e pouvoir envoyer des e-mails AMP.

Essayez Stripo

Elly Peers il y a 1 an

How does this look / functon in other non-AMP compatible email providers? Like older Outlooks for exmaple? Thanks

Hanna Kuznietsova commenté à Elly Peers il y a 1 an

Hello, Elly. Thank you for your question. If your ESP or a recipient's email client is not on the list, he or she will see just the traditional HTML version of your email. And AMP element will be just cut off. List of ESPs that currently support AMP: 1. eSputnik — via the API method only. The SMTP method will be added soon; 2. Amazon SES and PinPoint — via the API method only; 3. SparkPost — via the SMTP and API methods; 4. SendGrid — via the API method only; As for email clients, only two do support AMP today: Gmail; Mail.ru. Outlook says they are about to release AMP support this summer. In this blog post, we show how to build and add a fallback in your email to make sure all recipients see your promo emails. Thank you. Hope this helps.

Vous pourriez être intéressé par

← précédent suivant →
Stripo_Building AMP Emails with Stripo_Featured Image
11 mars · 21 min lu
Différentes façons de créer des e-mails AMP avec Stripo

Mises à jour dynamiques, contenu en temps réel, hyperpersonnalisation, un nouveau niveau de gamification, laisser des commentaires sous forme ouverte, réserver des réunions, etc. - toutes ces actions sont désormais possibles directement dans les boîtes de réception des utilisateurs avec l'avènement d'AMP pour les e-mails. Doit-on dire que ces e-mails animent vos newsletters, ont l'air frais et nouveaux dans les boîtes de réception des utilisateurs et, par conséquent, multiplient par 5 les conversions? Mais comment construisez-vous ces e-mails? Gmail dans...

Création Marketing Modèles How-to AMP
Stripo Notification Emails
01 mars · 14 min lu
​​​​​​​Exemples d'e-mails de notification et bonnes pratiques

Les notifications par e-mail sont le moyen le meilleur et le plus simple d'informer les abonnés des changements survenus ou sur le point de se produire prochainement. Ces e-mails affichent le taux d'ouverture le plus élevé. Mais même ici, nous devons nous en tenir à certaines bonnes pratiques lors de la conception des e-mails pour ne pas perdre la confiance des abonnés. Ce modèle d'e-mail de notification est bien structuré, contient tous les blocs nécessaires Utilise-le Nous avons rassemblé les...

Création Marketing How-to
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