Création Marketing Modèles How-to AMP
~ 8 min lu
59029 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 ».

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é !

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 :

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 2 ans

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 2 ans

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
4 jours · 18 min lu
Les meilleures polices de caractères pour les e-mails : Conseils et astuces d'utilisation

L'une des préoccupations les plus marquantes dans le processus de production d'un courriel est le choix de la bonne police. Poids, hauteur, largeur, couleur, forme, espacement... Tout a-t-il de l'importance ? Oui, mais l'une des choses les plus importantes est de choisir une police qui soit lisible. Dans ce post, nous allons vous montrer comment choisir la meilleure police professionnelle pour les emails. Concevez des e-mails élégants avec Stripo en un rien de temps grâce à nos modèles préétablis Parcourir...

Création Modèles
Greatest Examples of GIF animations in Emails_Cover Image
27 octobre 2021 · 10 min lu
16 superbes exemples de GIFs animés dans des courriels

Les GIFs dans les courriels vous seront d'une grande utilité si vous souhaitez mettre en valeur votre produit, attirez l'attention des utilisateurs sur certains éléments, ou simplement décorer légèrement votre texte. Dans cet article, nous avons fourni quelques meilleurs exemples d'animation de gif pour courrier électronique. Exemples de GIFs animés dans les courriers électroniques Voici une compilation des meilleurs exemples avec des GIFs dans les courriers électroniques. Chaque GIF remplit sa mission. 1. Adidas (Source : courriel d'Adidas) Adidas a...

Création Marketing
08 avril 2021 · 17 min lu
14 meilleurs exemples de conception de signatures de courriel

Les bonnes signatures d'e-mails nous aident à développer notre activité et à faire bonne impression sur les clients. Comme il s'agit du dernier élément que les gens voient dans les courriels, nous devons rendre nos signatures personnelles créatives et mémorables. Examinons les meilleurs exemples de signatures d'e-mails et leur utilisation appropriée dans les e-mails et les modèles de newsletter pour les e-mails. Il convient de mentionner que tous les types d'entreprises ont besoin de signatures de courriel professionnelles avec des...

Création Marketing Modèles
banner9
11 septembre 2020 · 15 min lu
10 Meilleurs Éditeurs d’Email Gratuit de 2021

Vous trouvez que tous les éditeurs d’email se ressemblent ? Désormais, vous ne savez pas lequel choisir pour créer les meilleurs modèles d’email ? Bien évidemment, il en existe tellement ! Nous allons analyser nombre d’entre eux afin de trouver leurs caractéristiques distinctives. Nous allons essayer de créer le même modèle dans les divers éditeurs avec les mêmes fichiers médias. Voyons si les éditeurs diffèrent. Pour l’expérience, nous avons choisi Stripo.email et ses concurrents: BEE Free, CampaignMonitor, EDM Designer, GetResponse, Mailchimp, MailStyler2,...

Création Marketing Modèles
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