Créer un e-mail par glisser-déposer

Grâce à l’éditeur par glisser-déposer, vous pouvez créer des messages e-mail entièrement personnalisés pour les campagnes ou les toiles, sans utiliser le langage HTML pour construire le corps de votre e-mail.

À propos de l’éditeur

L’éditeur de glisser-déposer utilise Contenu et Lignes comme les deux composants clés pour simplifier votre flux de travail, sans utilisation supplémentaire de HTML.

Contenu	Lignes

Contenu

Le contenu comprend une série de tuiles qui représentent différents types de contenu que vous pouvez utiliser dans votre message. Elles sont organisées en trois catégories : de base, multimédia et avancé.

• de base
• les médias
• l'avancement

Lignes

Les lignes sont des unités structurelles qui définissent la composition horizontale d’une section du message en utilisant des colonnes. Vous pouvez soit vider les lignes, soit blocs de contenu. L’utilisation de plusieurs colonnes permet de placer différents éléments de contenu côte à côte. De cette façon, vous pouvez ajouter tous les éléments structurels dont vous avez besoin à votre message, quel que soit le modèle que vous avez sélectionné au début.

Utiliser l’éditeur par glisser-déposer

Vous ne savez pas si votre e-mail doit être envoyé à l’aide d’une campagne ou d’un Canvas ? Les campagnes sont mieux adaptées aux campagnes de communication simples et uniques, tandis que les Canvas sont mieux adaptés aux parcours client en plusieurs étapes.

Une fois que vous avez choisi l’endroit où créer votre message, passons aux étapes de la création d’un e-mail par glisser-déposer.

Étape 1 : Sélectionnez votre modèle

Après avoir sélectionné l’éditeur par glisser-déposer comme votre expérience d’édition, vous pouvez choisir de :

• Commencez avec un modèle vierge.
• Utilisez un modèle d’e-mail prédéfini à glisser-déposer de Braze.
• Utilisez un modèle d’e-mail par glisser-déposer enregistré.

Vous pouvez également accéder à tous les modèles depuis la section Modèles.

Après avoir sélectionné votre modèle, vous verrez un aperçu de votre e-mail sous Variantes d’e-mails qui inclut les informations d’envoi et le corps de l’e-mail.

Ensuite, sélectionnez Modifier le corps de l’e-mail pour commencer à concevoir la structure de l’e-mail dans l’éditeur par glisser-déposer.

Étape 2 : Créez votre e-mail

L’expérience d’édition par glisser-déposer est divisée en trois sections : Envoi des paramètres, Contenu, et Aperçu et test. La magie de la création de votre corps d’e-mail se produit dans la section Contenu. Avant de créer votre e-mail, il est important de comprendre les principaux composants de votre expérience de création d’e-mail. Si vous avez besoin d’une révision, consultez la rubrique À propos de l’éditeur.

Lorsque vous êtes prêt, utilisez les blocs de contenu à glisser-déposer pour créer votre e-mail.

1. Sélectionnez le panneau des lignes. Faites glisser et déposez les configurations de ligne dans l’éditeur principal. Cela permettra de définir la mise en page du contenu de votre e-mail.
   • Notez que les nouvelles configurations doivent être déplacées vers le haut ou le bas d’une section existante.
   • Lorsque vous sélectionnez une configuration de ligne, les Propriétés de la ligne apparaissent pour une personnalisation supplémentaire des couleurs de fond de ligne, des images et des tailles de colonnes personnalisées.
2. Sélectionnez le panneau Contenu. Faites glisser et déposez les tuiles de contenu souhaitées dans les composants de la ligne.
   • Vous pouvez également faire glisser n’importe laquelle des tuiles de Contenu dans l’éditeur principal. Cela crée une ligne pour la tuile.
   • Vous pouvez affiner davantage la tuile en sélectionnant la tuile et en ajustant les champs dans Propriétés du contenu et Options de bloc. Cela inclut l’espacement des lettres, la marge intérieure, la hauteur de ligne, etc.

Consultez la rubrique Autres personnalisations pour découvrir d’autres moyens de personnaliser davantage votre e-mail glissé-déposé.

Lorsque vous créez votre e-mail, vous pouvez basculer entre un affichage de bureau et un affichage mobile pour visualiser la façon dont votre communication par e-mail recherchera vos groupes d’utilisateurs. Cela vérifiera que votre contenu est réactif et vous pourrez apporter les ajustements nécessaires en cours de route.

Étape 3 : Ajoutez vos informations d’envoi

Une fois que vous avez terminé de concevoir et de créer votre message électronique, il est temps d’ajouter vos informations d’envoi dans la section Paramètres d’envoi.

1. Sous Envoi d’informations, sélectionnez un e-mail comme Nom d’affichage + Adresse de l’expéditeur. Vous pouvez également personnaliser cela en sélectionnant Personnaliser à partir du nom d’affichage + adresse.
2. Sélectionnez un e-mail comme l’adresse de réponse. Vous pouvez également personnaliser ceci en sélectionnant Personnaliser l’adresse de réponse.
3. Ensuite, sélectionnez un e-mail comme BCC Address pour rendre votre e-mail visible à cette adresse.
4. Ajoutez une ligne d’objet à votre e-mail. Vous avez également la possibilité d’ajouter une accroche suivie d’un espace.

Les informations d’envoi que vous avez ajoutées sont renseignées dans un aperçu dans le panneau de droite. Cette information peut également être mise à jour en accédant à Paramètres > Préférences de messagerie > Configuration de l’envoi.

Personnalisation de l’en-tête de votre e-mail (avancé)

Sous Paramètres d’envoi, vous pouvez ajouter une personnalisation pour les en-têtes d’e-mail et les extras d’e-mail, ce qui vous permet d’envoyer des données supplémentaires à d’autres fournisseurs de services de messagerie. Personnaliser un en-tête d’e-mail, comme inclure le nom d’un destinataire, peut également contribuer à la probabilité que votre e-mail soit ouvert.

Étape 4 : Tester votre e-mail

Après avoir ajouté vos informations d’envoi, il est enfin temps de tester votre e-mail.

Allez à la section Prévisualiser et tester. Ici, vous avez la possibilité de prévisualiser votre e-mail en tant qu’utilisateur ou d’envoyer un message de test. Cette section inclut également Inbox Vision, qui vous permet de vérifier que votre e-mail s’est affiché correctement sur différents clients mobiles et web.

Étant donné que vous pouvez afficher trois versions différentes du même e-mail dans l’éditeur proprement dit, dans Inbox Vision et en testant effectivement l’e-mail, il est important d’aligner les détails entre toutes vos plateformes.

Aperçu et test d’envoi

Sous l’onglet Prévisualiser en tant qu’utilisateur, vous pouvez sélectionner les types d’utilisateurs suivants pour prévisualiser votre message.

• Utilisateur Aléatoire: Braze sélectionnera de manière aléatoire un utilisateur de la base de données et prévisualisera l’e-mail en fonction de ses attributs ou informations sur l’événement.
• Sélectionner un utilisateur : Vous pouvez sélectionner un utilisateur spécifique en fonction de son adresse e-mail ou de son identifiant externe. L’aperçu de l’e-mail s’affichera en fonction des attributs et des informations d’événement de cet utilisateur
• Utilisateur personnalisé: Vous pouvez personnaliser un utilisateur. Braze offre des entrées pour tous les attributs et événements disponibles. Vous pouvez saisir toutes les informations que vous souhaitez voir dans l’aperçu d’e-mail.

Utiliser Inbox Vision

Inbox Vision vous permet de voir vos campagnes d’e-mails du point de vue des clients de messagerie et des appareils mobiles. Pour tester votre message e-mail à l’aide de Inbox Vision, sélectionnez Inbox Vision dans la section Prévisualisation et test et choisissez Exécuter Inbox Vision.

Après avoir utilisé l’éditeur par glisser-déposer pour concevoir et créer votre e-mail, continuez à développer le reste de votre campagne ou canvas.

À propos du moteur HTML mis à jour

Le moteur sous-jacent qui produit du HTML à partir de l’éditeur de glisser-déposer a été optimisé et mis à jour, ce qui entraîne des avantages liés à la compression et au rendu des fichiers HTML.

La taille moyenne de l’empreinte de nos données HTML exportées a été réduite, ce qui permet un chargement et un rendu plus rapides, une réduction du clipping sur les appareils mobiles et une consommation réduite de bande passante.

Le rendu HTML s’est amélioré grâce aux mises à jour suivantes qui minimisent le nombre de commentaires conditionnels et de requêtes média CSS. En conséquence, les fichiers HTML sont plus petits et mieux codés.

• Migration d’une conception basée sur des éléments <div> vers une base de code formatée <table> standard
• [Les blocs éditeur][7] ont été recodés pour plus de concision
• Le code HTML final est compressé pour supprimer les espaces blancs entre les balises
• Les lignes de séparation transparentes sont automatiquement converties en marge intérieure de contenu

Autres personnalisations

Au fur et à mesure que vous continuez à créer des e-mails par glisser-déposer, vous pouvez personnaliser davantage chaque corps d’e-mail en utilisant une combinaison de ces détails créatifs pour capter l’attention et l’intérêt de votre audience pour votre message.

Images à largeur automatique

Les images ajoutées à votre e-mail seront automatiquement définies sur Largeur automatique. Pour ajuster ce paramètre, désactivez Largeur automatique et ajustez le pourcentage de largeur selon vos besoins.

Superposition de couleurs

En utilisant la superposition de couleurs, vous pouvez changer la couleur de l’arrière-plan de l’email, de la zone de contenu et des différents composants de contenu. L’ordre des couleurs de l’avant vers l’arrière est : couleur du composant de contenu, couleur de fond de la zone de contenu et couleur de fond.

Marge intérieure de contenu

Pour ajuster le remplissage, faites défiler vers le bas jusqu’à Options de bloc et sélectionnez Plus d’options. Vous pouvez ajuster votre espacement pour que votre e-mail soit parfait.

Arrière-plan du contenu

Vous pouvez ajouter une image d’arrière-plan pour votre configuration de ligne, ce qui vous permet d’incorporer plus d’esthétique et de contenu visuel dans votre campagne e-mail.

Ajouter une personnalisation

Le Liquid de base est pris en charge dans l’éditeur d’e-mails par glisser-déposer. Pour ajouter une personnalisation à votre e-mail :

1. Sélectionnez Personnalisation dans la section Contenu.
2. Sélectionnez le type de personnalisation. Ceci inclut les attributs par défaut (standard), les attributs de l’appareil, les attributs personnalisés, et plus encore.
3. Recherchez l’attribut à ajouter.
4. Copiez votre extrait de code Liquid généré et collez-le dans un de votre corps d’email.

La personnalisation liquide n’est pas prise en charge pour les blocs d’images et les champs de type lien de bouton.

Images dynamiques

Vous pouvez choisir d’insérer des images dynamiques dans vos e-mails en incluant du code Liquid dans l’attribut source de votre image. Par exemple, au lieu d’une image statique, vous pouvez insérer https://example.com/images/?imageBanner={{first_name}} comme URL de l’image pour inclure le prénom d’un utilisateur dans l’image. Ceci vous aide à personnaliser vos e-mails pour chaque utilisateur.

Ajouter des attributs HTML aux liens

Lors de l’utilisation de liens, de boutons, d’images et de vidéos dans l’éditeur de glisser-déposer, sélectionnez Ajouter un nouvel attribut sous Attributs dans la section Contenu pour ajouter des informations supplémentaires aux balises HTML dans les e-mails. Ceci peut être particulièrement utile dans le cadre de la personnalisation, de la segmentation et de la mise en page de messages.

Un cas d’utilisation courant consiste à insérer un attribut dans votre balise d’ancrage pour désactiver le suivi des clics lors de l’envoi via Braze.

• SendGrid: clicktracking = "off"
• SparkPost: data-msys-clicktrack = "0"

Un autre cas d’utilisation courant consiste à marquer des liens spécifiques en tant que liens universels. Les liens universels sont des liens qui redirigent vers votre application, offrant à vos utilisateurs une expérience intégrée.

• SendGrid: universal = "true"
• SparkPost: data-msys-sublink = "open-in-app" (un sub-chemin personnalisé doit être configuré)

Pour configurer des liens universels, consultez Liens universels et liens d’application.

Vous pouvez également vous intégrer à l’un de nos partenaires d’attribution, tels que Branch ou AppsFlyer, pour gérer les liens universels.