Comment ajouter des Images Personnalisées à Iterable
Utilise les champs Handlebars que tu envoies déjà à Iterable pour afficher le nom, les détails de la réservation ou le solde sur une image pour chaque utilisateur.
Date de Première Publication : Intègre les données que tu conserves dans Iterable aux images que tes utilisateurs voient.
Les modèles Iterable récupèrent déjà les données de profil et d'événement grâce à Handlebars. Sendtric des images personnalisées vont encore plus loin et intègrent ces valeurs dans une image, avec tes polices et ta mise en page : un graphique de type carte d'embarquement indiquant l'itinéraire de l'utilisateur, ou une carte de fidélité affichant son dernier solde. L'image est générée lorsque l'e-mail est ouvert.
L'éditeur « glisser-déposer » d'Iterable dispose d'une option « Image dynamique » qui charge une image à partir d’une URL contenant du code Handlebars, et sa propre documentation recommande d’utiliser des services d’images externes pour créer ces images. Sendtric fait partie de ces services : tu crées l’image, et son URL contient tes champs Iterable.
Ce que tu peux faire avec les Images Personnalisées dans Iterable
- Résumés du voyage et des réservations : ville de départ, ville d'arrivée et date d'un événement de réservation, présentées sur un seul graphique de voyage. Voir textes personnalisés sur les images pour des exemples.
- Étapes importantes de l'appli : « Tu as terminé 30 séances d'entraînement » ou « 12 leçons terminées » à partir d'un champ de profil personnalisé, dans un e-mail de félicitations.
- Relevés de fidélité : points, niveau et nom du membre sur l'image d'une carte dans un e-mail mensuel de suivi du parcours client.
- Bilan de fin d'année : plusieurs statistiques tirées du profil utilisateur sur un même fond, une utilisation courante des les e-mails de bilan de fin d'année.
| Fonctionnalité d'image | Free | Micro | Standard | Pouvoir et Grandes Entreprises |
|---|---|---|---|---|
| Des calques de texte personnalisés pour chaque image | 1 | 2 | 4 | 20 |
| Tes propres calques d'images (logo, produit) | No | No | Yes | Yes |
| Fond de couleur unie | No | No | Yes | Yes |
| Fond transparent | No | No | No | Yes |
Comment ajouter une image personnalisée à Iterable
Étape 1 : Créer l'image
Dans Sendtric, va dans Personnalisation d'Image et clique sur Créer un nouveau. Choisis un arrière-plan dans la bibliothèque multimédia, ou une toile unie ou transparente, puis ajoute textes dynamiques pour chaque valeur. Adapte la taille de chaque zone de texte à la valeur la plus longue que tu prévois, car le texte s'ajuste mais ne se réduit pas.
Étape 2 : Remplis le champ « Iterable » pour chaque couche
Pour chaque calque de texte dynamique, donne à la variable un nom en minuscules nom de variable et insère l'expression Handlebars « Iterable » dans balise de fusion ESP, par exemple {{firstName}}. Les champs sont spécifiques à ton projet, utilise donc les noms exacts que tu vois sur un profil utilisateur, y compris la notation par points pour les champs imbriqués, par exemple {{address.city}} si ta ville se trouve dans un objet « adresse ». Ajoute un texte de secours pour les utilisateurs qui n'ont pas de valeur.
Étape 3 : Enregistre et copie le code
Enregistre l'image. La zone de code apparaît après la première sauvegarde, avec chaque variable ajoutée à l'URL de l'image et remplie par ton expression Iterable. Choisis l'alignement et clique sur Copier le code.
Étape 4 : Colle-le dans un bloc HTML
Ouvre ton modèle Iterable et clique sur Modifier le design. Dans l'éditeur glisser-déposer, fais glisser un bloc HTML à partir de la section Contenu vers l'emplacement souhaité, sélectionne-le et colle le code dans l'éditeur HTML. Dans l'éditeur WYSIWYG ou « côte à côte », colle le code dans le code source.
Étape 5 : Prévisualisation avec de vrais utilisateurs
Clique Aperçu, entre l'adresse e-mail (ou l'identifiant) d'un utilisateur, puis clique sur Charger les données de l'utilisateur pour voir l'image avec ses valeurs. Essaie avec un utilisateur dont le nom est long et un autre dont le champ est vide. Ensuite, envoie une épreuve à toi-même, ce qui remplit les champs à partir de ton propre profil.
Utiliser le bloc « Image » à la place du code HTML
Si tu préfères garder un bloc « Image », copie uniquement l'adresse qui se trouve à l'intérieur du src du code de Sendtric, fais glisser un bloc « Image » , active l’option « Image dynamique » et colle l'adresse dans URL dynamique. Si le bloc semble vide pendant que tu le crées, vérifie-le dans Aperçu une fois les données d'un utilisateur chargées.
Solutions de secours dans Iterable ou Sendtric
Tu peux laisser le « Fallback Text » de Sendtric gérer les valeurs vides, ou utiliser la fonction d'aide d'Iterable à l'intérieur de la balise, comme {{defaultIfEmpty firstName 'there'}}. Utilise des guillemets simples pour la valeur par défaut, car l'expression se trouve à l'intérieur de l'adresse de l'image, qui est entre guillemets doubles. Si Iterable fournit une valeur par défaut, le texte de secours de Sendtric ne s'affiche jamais.
FAQ sur les Images Personnalisées d'Iterable
Est-ce que je peux utiliser les données d'événement, et pas seulement les champs de profil ?
Oui. Toute valeur Handlebars qu'Iterable peut résoudre lors du rendu de l'e-mail peut être placée dans une couche, y compris les champs de l'événement qui a déclenché un parcours ou une campagne. La documentation d'Iterable précise qu'un champ d'événement portant le même nom qu'un champ de profil a la priorité, et {{profile.fieldName}} lit explicitement la valeur du profil.
Et si une valeur contient des espaces ou des caractères spéciaux ?
Si un champ peut contenir des espaces ou des caractères comme & ou #, mets-le dans l'aide de bloc urlEncode , par exemple {{#urlEncode}}{{city}}{{/urlEncode}}, pour que l'adresse de l'image reste intacte. Vérifie ensuite le résultat dans « Aperçu ».
Qu'est-ce que les utilisateurs voient quand un champ est vide ?
Si le « texte de secours » est défini, ils ne voient que ce texte ; veille donc à le rédiger sous forme de phrase complète. Sans ça, tout le calque est masqué, y compris les mots qui entourent la variable.
Est-ce que je peux mettre à jour l'image après l'avoir envoyée ?
Oui. Quand tu enregistres dans Sendtric, ça modifie l'image dans tous les e-mails envoyés dès la prochaine ouverture. Les versions générées sont mises en cache pendant environ une heure par combinaison de valeurs, et l'enregistrement efface ça.
Est-ce que les aperçus comptent dans le nombre de vues ?
Ce n'est pas le cas des aperçus dans l'éditeur Sendtric. En revanche, chaque chargement réel de l'image le fait, y compris les épreuves Iterable que tu ouvres et les ouvertures répétées.
Ce guide traite d'un aspect de la Plateforme de personnalisation d'Email . Pour chaque Images Personnalisées , consulte la page principale.
Plus de guides Iterable
- Minuteurs de compte à rebours - Comment ajouter des minuteurs de compte à rebours à Iterable
- Minuteurs de compte à rebours - Ajouter des minuteurs dynamiques dans Iterable
- Sondages en direct - Comment ajouter des sondages en direct à Iterable
- Images Basées sur des Règles - Comment ajouter des images basées sur des règles à Iterable
- Météo Dynamique - Comment ajouter la Météo Dynamique à Iterable
- Alertes critiques - Comment ajouter des alertes critiques à Iterable
- Compteurs de preuves sociales - Comment ajouter des compteurs de preuves sociales à Iterable
Tu utilises une autre plateforme ? Découvre toutes les intégrations Sendtric.
