Créer un e-mail avec du HTML personnalisé
Les e-mails sont un excellent moyen de diffuser du contenu à vos utilisateurs selon leurs préférences. Ils constituent également d’excellents outils pour réengager les utilisateurs qui ont peut-être même désinstallé votre application. L’envoi d’e-mails personnalisés et adaptés améliorera l’expérience de vos utilisateurs et les aidera à tirer le meilleur parti de votre application.
Pour voir des exemples de campagnes e-mail, consultez nos études de cas.
Si c’est la première fois que vous créez une campagne e-mail, nous vous recommandons vivement de suivre ces cours d’apprentissage Braze :
Étape 1 : Choisir où créer votre message
Utilisez les Campaigns pour des communications simples et ponctuelles. Utilisez Canvas pour des parcours utilisateur en plusieurs étapes.
- Allez dans Messaging > Campaigns et sélectionnez Create Campaign.
- Sélectionnez Email ou, pour les Campaigns ciblant plusieurs canaux, sélectionnez Multichannel.
- Donnez à votre Campaign un nom clair et significatif.
- Ajoutez des Teams et des tags selon vos besoins.
- Les tags facilitent la recherche de vos Campaigns et la création de rapports. Par exemple, lorsque vous utilisez le générateur de rapports, vous pouvez filtrer par tags spécifiques.
- Ajoutez et nommez autant de variantes que nécessaire pour votre Campaign. Pour en savoir plus sur ce sujet, consultez Test multivarié et test A/B.
Si tous les messages de votre Campaign sont similaires ou ont le même contenu, composez votre message avant d’ajouter des variantes supplémentaires. Vous pouvez ensuite choisir Copy from Variant dans le menu déroulant Add Variant.
- Créez votre Canvas à l’aide du compositeur Canvas.
- Après avoir configuré votre Canvas, ajoutez une étape dans le générateur Canvas. Donnez à votre étape un nom clair et significatif.
- Choisissez une planification d’étape et spécifiez un délai si nécessaire.
- Filtrez votre audience pour cette étape si nécessaire. Vous pouvez affiner davantage les destinataires de cette étape en spécifiant des segments et en ajoutant des filtres supplémentaires. Les options d’audience seront vérifiées après le délai, au moment de l’envoi des messages.
- Choisissez votre comportement d’avancement.
- Choisissez tout autre canal de communication que vous souhaitez associer à votre message.
Si vous prévoyez de créer du HTML personnalisé et souhaitez que les arrière-plans restent cohérents dans l’application mobile Gmail avec le mode sombre de l’appareil activé, consultez Application mobile Gmail et couleurs d’arrière-plan en mode sombre.
Pour accéder à l’éditeur HTML, contactez votre administrateur informatique pour vérifier que votre pare-feu a bien inscrit *.bz-rndr.com sur sa liste d’autorisation.
Étape 2 : Sélectionner votre expérience d’édition
Braze propose deux expériences d’édition lors de la création d’une campagne e-mail : notre éditeur par glisser-déposer et notre éditeur HTML standard. Choisissez la tuile correspondant à l’expérience d’édition que vous préférez.
Ensuite, vous pouvez soit sélectionner un modèle d’e-mail existant, importer un modèle depuis un fichier (éditeur HTML uniquement), soit utiliser un modèle vierge.
Si vous utilisez l’éditeur HTML et que vous souhaitez que les couleurs d’arrière-plan restent cohérentes dans l’application mobile Gmail lorsque l’appareil est en mode sombre, consultez Application mobile Gmail et couleurs d’arrière-plan en mode sombre.
Nous recommandons de sélectionner une seule expérience d’édition par campagne e-mail. Par exemple, choisissez soit HTML Classic soit Block editor dans une même campagne e-mail plutôt que de basculer entre les éditeurs.
Étape 3 : Composer votre e-mail
Après avoir sélectionné votre modèle, vous verrez un aperçu de votre e-mail où vous pouvez accéder directement à l’éditeur en plein écran pour rédiger votre e-mail, modifier vos informations d’envoi et consulter les avertissements relatifs à la livrabilité ou à la conformité légale. Vous pouvez basculer entre les onglets HTML, classique, texte brut et AMP pendant la composition.
Braze met automatiquement à jour la version en texte brut à partir de la version HTML jusqu’à ce qu’il détecte une modification du texte brut. Après avoir détecté une modification, Braze cesse de mettre à jour le texte brut car il considère que vous avez effectué des changements intentionnels. Pour restaurer la synchronisation automatique, accédez à Plaintext et sélectionnez Regenerate from HTML (visible uniquement lorsque le texte brut n’est pas synchronisé).
Pour ajouter du mouvement dans un e-mail avec un aperçu fidèle, utilisez des GIF plutôt que des éléments nécessitant JavaScript, car la plupart des boîtes de réception ne prennent pas en charge JavaScript.
Braze supprime automatiquement les gestionnaires d’événements HTML référencés en tant qu’attributs. Cela modifie le HTML, alors vérifiez à nouveau l’e-mail une fois terminé. En savoir plus sur les gestionnaires HTML.
Besoin d’aide pour rédiger un texte percutant ? Essayez l’assistant de rédaction IA. Saisissez un nom ou une description de produit et l’IA générera un texte marketing au style naturel à utiliser dans vos communications.
Besoin d’aide pour rédiger des messages de droite à gauche pour des langues comme l’arabe et l’hébreu ? Consultez Créer des messages de droite à gauche pour les bonnes pratiques.
Application mobile Gmail et mode sombre
L’application mobile Gmail (Android et iOS) peut inverser les couleurs d’arrière-plan lorsque l’appareil est en mode sombre. Cela peut casser les mises en page où l’arrière-plan de l’e-mail doit correspondre au bord d’une image ou à une couleur de marque spécifique.
Pour éviter cela, dans la cellule du tableau qui nécessite un arrière-plan stable, utilisez un linear-gradient CSS monochrome au lieu de background-color. Gmail est moins susceptible d’inverser ce traitement qu’une couleur d’arrière-plan unie.
Par exemple, pour conserver un arrière-plan blanc sur une cellule, utilisez ceci :
1
<td style="background-image: linear-gradient(#ffffff, #ffffff);">
Remplacez #ffffff par la couleur souhaitée.
Cette approche ne s’applique pas de manière fiable aux éléments <table aria-label="Application mobile Gmail et mode sombre #gmail-dark-mode"> seuls, définissez donc le dégradé sur la cellule plutôt que sur le tableau uniquement.
Pour plus d’informations sur la syntaxe des dégradés, consultez Les dégradés CSS sur W3Schools.
Étape 3.1 : Ajouter vos informations d’envoi
Après avoir terminé la conception et la création de votre e-mail, ajoutez vos informations d’envoi dans Sending Settings.
- Sous Informations d’envoi, sélectionnez un e-mail comme Nom d’affichage de l’expéditeur + Adresse. Vous pouvez également personnaliser cela en sélectionnant Personnaliser le nom d’affichage de l’expéditeur + Adresse.
- Sélectionnez un e-mail comme Adresse de réponse. Vous pouvez également personnaliser cela en sélectionnant Personnaliser l’adresse de réponse.
- Ensuite, sélectionnez un e-mail comme Adresse CCI pour rendre votre e-mail visible à cette adresse.
- Ajoutez une ligne d’objet à votre e-mail. Vous pouvez également ajouter une accroche. Pour ajouter un espace après l’accroche, cochez la case Ajouter un espace après l’accroche.
Vous pouvez utiliser Liquid dans les champs « Nom d’affichage + Adresse » et « Adresse de réponse » pour créer des modèles dynamiques basés sur des attributs personnalisés. Cela vous permet d’envoyer des messages provenant de différentes marques, régions ou départements à l’aide d’une seule campagne d’e-mails ou d’une seule étape du canvas.
Un aperçu dans le panneau de droite se remplira avec les informations d’envoi que vous avez ajoutées. Ces informations peuvent également être mises à jour en accédant à Settings > Email Preferences > Sending Configuration.
Avancé
Sous Sending Settings > Advanced, activez inline CSS pour la compatibilité la plus large avec les clients de messagerie. Si les messages sont tronqués ou si les images s’étirent à la hauteur de la ligne, essayez de désactiver temporairement l’insertion CSS. Certains modèles fonctionnent mieux sans insertion.
Vous pouvez également ajouter de la personnalisation pour les en-têtes d’e-mail et les extras d’e-mail afin de renvoyer des données supplémentaires à d’autres fournisseurs de services d’e-mailing.
Pièces jointes d’e-mail
Vous pouvez également ajouter des pièces jointes aux e-mails par les méthodes suivantes :
- Téléverser un fichier : Glissez-déposez ou parcourez vos fichiers pour téléverser un fichier directement depuis votre ordinateur vers l’e-mail. Braze valide le type et la taille du fichier (jusqu’à 2 Mo par défaut) avant le téléversement, puis ces fichiers sont téléversés dans la bibliothèque multimédia. Les fichiers dépassant la limite de 2 Mo ne peuvent pas être téléversés.
- Utiliser la bibliothèque multimédia : Parcourez et sélectionnez des ressources déjà stockées dans la bibliothèque multimédia. Les fichiers PDF, les documents Word, les fichiers Excel et les présentations PowerPoint sont tous pris en charge.
- Ajouter depuis une URL : Saisissez une URL pointant vers le fichier et indiquez un nom d’affichage pour le fichier. Comme Braze ne peut pas interroger des URL arbitraires pour vérifier la taille lors de la composition de l’e-mail, la taille du fichier est vérifiée au moment de l’envoi.
Liquid n’est pas pris en charge dans le champ Ajouter depuis une URL.
Consultez les Directives pour les e-mails pour les bonnes pratiques spécifiques à prendre en compte.
En-têtes d’e-mail
Pour ajouter des en-têtes d’e-mail, sélectionnez Add New Header. Les en-têtes d’e-mail contiennent des informations sur l’e-mail envoyé. Ces paires clé-valeur incluent généralement l’expéditeur, le destinataire, le protocole d’authentification et les informations de routage. Braze ajoute automatiquement les informations d’en-tête requises par la RFC pour que les e-mails atteignent les fournisseurs de boîtes de réception.
Braze vous offre la flexibilité d’ajouter des en-têtes d’e-mail supplémentaires selon vos besoins pour des cas d’usage avancés. Il existe quelques champs réservés que la plateforme Braze écrasera lors de l’envoi.
Évitez d’utiliser les clés suivantes :
| Champs réservés | ||
|---|---|---|
| BCC | dkim-signature | Reply-To |
| CC | From | Subject |
| Content-Transfer-Encoding | MIME-Version | To |
| Content-Type | Received | x-sg-eid |
| DKIM-Signature | received | x-sg-id |
Ajouter des extras d’e-mail
Les extras d’e-mail vous permettent de renvoyer des données supplémentaires à d’autres fournisseurs de services d’e-mailing. Cela ne s’applique qu’aux cas d’usage avancés, vous ne devriez donc utiliser les extras d’e-mail que si votre entreprise a déjà mis cela en place.
Pour ajouter des extras d’e-mail, accédez à Sending Info et sélectionnez Add New Extra.
Le total des paires clé-valeur ajoutées ne doit pas dépasser 1 Ko. Sinon, les messages seront abandonnés.
Les valeurs des extras d’e-mail ne sont pas publiées vers Currents ou Snowflake. Si vous souhaitez envoyer des métadonnées supplémentaires ou des valeurs dynamiques vers Currents ou Snowflake, utilisez plutôt message_extras.
Étape 3.2 : Prévisualiser et tester votre message
Après avoir terminé la composition de votre e-mail, testez-le avant de l’envoyer. En bas de l’écran d’aperçu, sélectionnez Preview and Test.
Ici, vous pouvez prévisualiser l’apparence de votre e-mail dans la boîte de réception d’un client. Avec Preview as User sélectionné, vous pouvez prévisualiser votre e-mail en tant qu’utilisateur aléatoire, sélectionner un utilisateur spécifique ou créer un utilisateur personnalisé. Cela vous permet de vérifier que vos appels de contenu connecté et de personnalisation fonctionnent comme prévu.
Ensuite, vous pouvez Copy preview link pour générer et copier un lien de prévisualisation partageable qui montre à quoi ressemblera l’e-mail pour un utilisateur aléatoire. Pour plus d’informations, consultez Prévisualisation partageable.
Vous pouvez également basculer entre les vues bureau, mobile et texte brut pour avoir une idée de l’apparence de votre message dans différents contextes.
Curieux de savoir à quoi ressemble votre e-mail pour les utilisateurs en mode sombre ? Sélectionnez la bascule Dark Mode Preview située dans la section Preview and Test (éditeur par glisser-déposer uniquement). Si vous utilisez l’éditeur HTML, vous pouvez toujours gérer le rendu en mode sombre de l’application mobile Gmail avec Application mobile Gmail et mode sombre.
Lorsque vous êtes prêt pour une vérification finale, sélectionnez Test Send et envoyez un message de test à vous-même ou à un groupe de testeurs pour confirmer que l’e-mail s’affiche correctement sur tous les appareils et clients.
Si vous constatez des problèmes avec votre e-mail ou souhaitez apporter des modifications, sélectionnez Edit Email pour revenir à l’éditeur.
Les clients de messagerie qui prennent en charge le texte d’aperçu récupèrent toujours suffisamment de caractères pour remplir tout l’espace disponible pour le texte d’aperçu. Cependant, cela peut vous laisser dans des situations où le texte d’aperçu est incomplet ou non optimisé.
Pour éviter cela, vous pouvez créer un espace blanc après le texte d’aperçu souhaité afin que les clients de messagerie ne récupèrent pas d’autres textes ou caractères distrayants dans le contenu de l’enveloppe. Dans la section Sending Settings, vous pouvez cocher la case Add whitespace after preheader pour ajouter automatiquement un espace blanc.
Alternativement, si vous avez besoin de plus de contrôle, vous pouvez ajouter manuellement une chaîne de caractères de non-jointure de largeur nulle (‌) et d’espaces insécables ( ) après le texte d’aperçu que vous souhaitez afficher.
Lorsqu’il est ajouté à la fin de votre texte d’aperçu dans la section d’accroche, le morceau de code suivant pour l’éditeur HTML ajoutera l’espace blanc recherché :
1
<div style="display: none; max-height: 0px; overflow: hidden;"> ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ </div>
Pour l’éditeur par glisser-déposer, ajoutez uniquement les caractères de non-jointure de largeur nulle (‌) sans le formatage <div> directement dans l’accroche dans la section Sending Settings.
Dans l’application Apple Mail, les liens d’images dans les e-mails HTML doivent utiliser des URL https:// pour être cliquables. Utilisez des liens sécurisés pour toute image encapsulée dans une balise d’ancrage lorsque vous attendez des clics de la part de destinataires utilisant Apple Mail.
Étape 3.3 : Vérifier les erreurs d’e-mail
Avant l’envoi, l’éditeur signale les problèmes courants :
- Le nom d’affichage de l’expéditeur et l’en-tête ne sont pas définis ensemble
- Adresses d’expéditeur ou de réponse invalides
- Clés d’en-tête en double
- Erreurs de syntaxe Liquid
- Content Blocks qui incluent un
<!DOCTYPE html>complet - Le corps de l’e-mail dépasse 400 Ko
- Visez moins de 102 Ko pour éviter la troncature.
- Corps ou objet vide
- Lien de désabonnement manquant
- Le domaine d’expéditeur n’est pas dans la liste d’autorisation (envois fortement limités)
Étape 4 : Construire le reste de votre campagne ou Canvas
Ensuite, construisez le reste de votre campagne. Consultez les sections suivantes pour savoir comment utiliser les outils Braze pour créer votre campagne par e-mail.
Choisir un calendrier de réception ou un déclencheur
Envoyez des e-mails en fonction d’un horaire planifié, d’une action ou d’un déclencheur API. Pour en savoir plus, consultez Planifier votre campagne.
Pour les Campaigns déclenchées par API, lorsque l’action de déclenchement est définie sur Interact With Campaign, la sélection d’une option Receive comme interaction entraînera le déclenchement de votre nouvelle campagne dès que Braze marquera la Campaign sélectionnée comme envoyée, même si ce message rebondit ou n’est pas distribué.
Vous pouvez également définir la durée de la campagne, spécifier les heures calmes et configurer des règles de limite de fréquence.
Choisir les utilisateurs à cibler
Ensuite, ciblez les utilisateurs en choisissant des Segments ou des filtres. Braze affiche un aperçu en direct de la population du Segment, y compris le nombre d’utilisateurs joignables par e-mail. L’appartenance exacte au Segment est calculée juste avant l’envoi.
Votre message ne sera envoyé qu’aux utilisateurs qui correspondent déjà aux conditions que vous avez définies à l’étape Audience cible. Ensuite, ils devront toujours satisfaire le déclencheur que vous définissez à l’étape Planification de la distribution. Considérez l’audience cible comme une salle d’attente : seules les personnes qui s’y trouvent déjà peuvent avancer lorsque l’action suivante se produit.
Vous pouvez également choisir d’envoyer votre campagne uniquement aux utilisateurs ayant un statut d’abonnement spécifique, comme ceux qui sont abonnés et ont opté pour recevoir des e-mails.
Vous pouvez aussi limiter la distribution à un nombre spécifié d’utilisateurs au sein du Segment, ou permettre aux utilisateurs de recevoir le même message deux fois lors d’une récurrence de la campagne.
Lors de la création d’une nouvelle campagne par e-mail, le groupe de contrôle est défini par défaut à 20 % et peut être ajusté ou supprimé selon les besoins de votre campagne.
Campaigns multicanales avec e-mail et notification push
Pour les Campaigns multicanales ciblant à la fois les canaux e-mail et notification push, vous pouvez souhaiter limiter votre campagne afin que seuls les utilisateurs ayant explicitement opté pour la réception reçoivent le message (en excluant les utilisateurs abonnés ou désabonnés). Par exemple, supposons que vous ayez trois utilisateurs avec des statuts d’abonnement différents :
- Utilisateur A est abonné aux e-mails et a les notifications push activées. Cet utilisateur ne reçoit pas l’e-mail, mais recevra la notification push.
- Utilisateur B a explicitement consenti aux e-mails, mais n’a pas les notifications push activées. Cet utilisateur recevra l’e-mail, mais ne recevra pas la notification push.
- Utilisateur C a explicitement consenti aux e-mails et a les notifications push activées. Cet utilisateur recevra à la fois l’e-mail et la notification push.
Pour ce faire, sous Audience Summary, sélectionnez l’envoi de cette campagne aux « utilisateurs ayant opté uniquement ». Cette option garantira que seuls les utilisateurs ayant opté recevront votre e-mail, et Braze n’enverra votre notification push qu’aux utilisateurs pour lesquels les notifications push sont activées par défaut.
Avec cette configuration, n’incluez aucun filtre dans l’étape Target Audiences qui limiterait l’audience à un seul canal (par exemple, Foreground Push Enabled = True ou Email Subscription = Opted-In).
Choisir les événements de conversion
Braze vous permet de suivre la fréquence à laquelle les utilisateurs effectuent des actions spécifiques, les événements de conversion, après avoir reçu une campagne. Vous pouvez spécifier l’une des actions suivantes comme événement de conversion :
- Ouvre l’application
- Effectue un achat (il peut s’agir d’un achat générique ou d’un article spécifique)
- Effectue un événement personnalisé spécifique
- Ouvre l’e-mail
Vous pouvez autoriser une fenêtre allant jusqu’à 30 jours pendant laquelle Braze comptabilise une conversion si l’utilisateur effectue l’action spécifiée. Bien que Braze suive automatiquement les ouvertures et les clics, vous pouvez définir l’événement de conversion sur une ouverture ou un clic pour utiliser la sélection intelligente.
Si ce n’est pas déjà fait, complétez les sections restantes de vos composants Canvas. Pour plus de détails sur la construction du reste de votre Canvas, la mise en œuvre de tests multivariés et de la sélection intelligente, et bien plus encore, consultez l’étape Construire votre Canvas de notre documentation Canvas.
Étape 5 : Vérifier et déployer
La dernière section résume la campagne que vous avez conçue. Confirmez tous les détails pertinents et sélectionnez Launch Campaign.
Pour savoir comment accéder aux résultats de vos campagnes par e-mail, consultez Rapports sur les e-mails.