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 campagnes pour un envoi de messages simple et unique. Utilisez les Canvas pour des parcours utilisateur en plusieurs étapes.
- Accédez à Messaging > Campaigns et sélectionnez Create Campaign.
- Sélectionnez Email ou, pour les campagnes ciblant plusieurs canaux, sélectionnez Multichannel.
- Donnez à votre campagne un nom clair et significatif.
- Ajoutez des équipes et des étiquettes si nécessaire.
- Les étiquettes facilitent la recherche de vos campagnes et la création de rapports. Par exemple, lorsque vous utilisez le Générateur de rapports, vous pouvez filtrer par étiquettes spécifiques.
- Ajoutez et nommez autant de variantes que nécessaire pour votre campagne. Pour en savoir plus sur ce sujet, consultez Tests multivariés et A/B.
Si tous les messages de votre campagne sont similaires ou ont le même contenu, rédigez 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 de Canvas.
- Après avoir configuré votre Canvas, ajoutez une étape dans le générateur de 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 que vous souhaitez que les arrière-plans restent cohérents dans l’application mobile Gmail avec le mode sombre 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 : Rédiger 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 rédaction.
Braze met automatiquement à jour la version en texte brut à partir de la version HTML jusqu’à ce qu’une modification du texte brut soit détectée. Dès qu’une modification est détectée, Braze cesse de mettre à jour le texte brut, considérant 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, vérifiez donc l’e-mail une fois que vous avez 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 de qualité humaine à utiliser dans vos messages.
Besoin d’aide pour créer 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> 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 Sending Info, sélectionnez un e-mail comme From Display Name + Address. Vous pouvez également personnaliser cela en sélectionnant Customize From Display Name + Address.
- Sélectionnez un e-mail comme Reply-To Address. Vous pouvez également personnaliser cela en sélectionnant Customize Reply-To Address.
- Ensuite, sélectionnez un e-mail comme BCC Address pour rendre votre e-mail visible à cette adresse.
- Ajoutez une ligne d’objet à votre e-mail. Vous pouvez également ajouter une accroche et un espace blanc 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 l’insertion 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 des extras d’e-mail pour renvoyer des données supplémentaires à d’autres fournisseurs de services d’e-mailing.
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’utilisation 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’utilisation avancés ; n’utilisez donc 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 dans Currents ou Snowflake. Si vous souhaitez envoyer des métadonnées supplémentaires ou des valeurs dynamiques à Currents ou Snowflake, utilisez plutôt message_extras.
Étape 3.2 : Prévisualiser et tester votre message
Après avoir terminé la rédaction 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 correctement.
Ensuite, vous pouvez utiliser 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. Le lien sera valide pendant sept jours avant de devoir être régénéré.
Vous pouvez également basculer entre les vues ordinateur de bureau, appareil mobile et texte brut pour avoir une idée de l’apparence de votre message dans différents contextes.
Vous souhaitez voir à quoi ressemble votre e-mail pour les utilisateurs en mode sombre ? Activez le bouton Dark Mode Preview situé 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 Gmail mobile 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. 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. Pour ce faire, ajoutez 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 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.
É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 autorisée (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 plus de détails sur l’utilisation des outils Braze pour créer votre campagne e-mail.
Choisir la planification de distribution ou le déclencheur
Distribuez les 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 campagnes 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 campagne 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 définir 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 temps réel 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 « Public cible ». Par la suite, ils devront toujours répondre aux déclencheurs que vous aurez définis à l’étape de planification de la réception/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 accepté de recevoir des e-mails.
Vous pouvez également 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 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.
Campagnes multicanales avec e-mail et push
Pour les campagnes multicanales ciblant à la fois les canaux e-mail et push, vous pouvez souhaiter limiter votre campagne afin que seuls les utilisateurs ayant explicitement accepté 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 :
- L’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.
- L’utilisateur B a accepté les e-mails mais n’a pas les notifications push activées. Cet utilisateur recevra l’e-mail mais ne recevra pas la notification push.
- L’utilisateur C a accepté les 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 accepté uniquement ». Cette option garantira que seuls les utilisateurs ayant accepté recevront votre e-mail, et Braze n’enverra vos notifications push qu’aux utilisateurs ayant les notifications push 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 façon de construire le reste de votre Canvas, de mettre en œuvre les tests multivariés et la Sélection intelligente, et 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 e-mail, consultez Rapports e-mail.