Créer un message in-app par glisser-déposer

L’éditeur par glisser-déposer est la méthode recommandée pour créer la plupart des messages in-app. Créez des messages modaux et en plein écran avec les mêmes mises en page de base que l’éditeur traditionnel. Vous bénéficiez en plus d’options de personnalisation supplémentaires grâce aux lignes, aux Content Blocks, aux modèles et aux flux multi-pages. Pour en savoir plus sur les blocs de construction de l’éditeur, consultez la page Blocs éditeur.

Si vous souhaitez utiliser vos modèles HTML personnalisés existants ou des modèles créés par un tiers, vous devez les recréer dans l’éditeur par glisser-déposer.

Vous ne savez pas si votre message in-app doit être envoyé via une Campaign ou un Canvas ? Les Campaigns conviennent mieux aux messages ciblés et ponctuels. Les Canvas sont plus adaptés aux parcours utilisateur en plusieurs étapes. Une fois que vous avez choisi où créer votre message, suivez ces étapes pour créer un message in-app par glisser-déposer.

Conditions préalables

Exigences relatives au SDK

Autres conditions préalables

• Pour le SDK Web, l’option d’initialisation allowUserSuppliedJavascript doit être définie sur true. L’option enableHtmlInAppMessages permet également à ces messages de fonctionner, mais elle est obsolète et doit être remplacée par allowUserSuppliedJavascript.
• Si vous utilisez Google Tag Manager, vous devez activer « Allow HTML In-App Messages » dans la configuration de GTM.

Étape 1 : Créer un message in-app

Créez un nouveau message in-app ou une nouvelle étape du canvas, puis sélectionnez Éditeur par glisser-déposer comme expérience d’édition.

Étape 2 : Sélectionnez votre modèle

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

• Commencer avec un modèle de fenêtre modale vierge
• Utiliser un modèle de message in-app par glisser-déposer de Braze
• Sélectionner un modèle de message in-app par glisser-déposer enregistré

Sélectionnez Créer un message pour commencer à concevoir votre message in-app dans l’éditeur par glisser-déposer.

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

Étape 3 : Ajouter des pages supplémentaires (facultatif)

L’ajout de pages à votre message in-app vous permet de guider les utilisateurs à travers un flux séquentiel, comme un flux d’onboarding ou un parcours de bienvenue. Vous pouvez gérer les pages depuis la section Pages de l’onglet Build.

• ajouter des pages
• supprimer ou renommer des pages

Les messages in-app commencent avec une page par défaut. Pour ajouter une nouvelle page :

1. Sélectionnez + Add page.
2. Sélectionnez parmi la liste de modèles personnalisés ou fournis par Braze.
3. Donnez un nom significatif à la page. Cela vous aidera lorsque vous relierez les pages entre elles.

Conseil

Vous pouvez ajouter jusqu’à 10 pages par message in-app.

Pour dupliquer une page existante :

1. Survolez la page dans la liste et sélectionnez More options.
2. Sélectionnez Duplicate.
3. Donnez un nom significatif à la page. Cela vous aidera lorsque vous relierez les pages entre elles.

Pour supprimer ou renommer une page :

1. Survolez la page dans la liste et sélectionnez More options.
2. Sélectionnez Rename ou Delete.

Étape 3a : Relier les pages entre elles

Les messages in-app multi-pages sont séquentiels, ce qui signifie que les utilisateurs interagissent avec le message en appuyant ou en cliquant pour passer à la page suivante du flux.

Pour relier les pages entre elles :

1. Sélectionnez votre page de départ.
2. Sélectionnez un élément bouton ou image dans le canvas.
3. Définissez le On-click behavior sur Go to page.
4. Sélectionnez la page vers laquelle vous souhaitez créer un lien depuis la page de départ.
5. Continuez jusqu’à ce que toutes les pages soient reliées.

Si une page n’est reliée à aucune autre page, le message ne peut pas être lancé.

Remarque

Les utilisateurs peuvent sélectionner le bouton de fermeture X pour quitter le message à tout moment. Ce bouton ne peut pas être supprimé.

Étape 4 : Créez et concevez votre message in-app

C’est ici que votre message défile sur le podium, habillé du style emblématique de votre marque. En combinant des blocs éditeur et des paramètres de style, vous pouvez personnaliser et concevoir votre message in-app.

• Pour obtenir la liste des blocs éditeur disponibles et de leurs propriétés, consultez Blocs éditeur.
• Pour vous aider à personnaliser l’apparence de votre message, consultez Paramètres de style.
• Pour découvrir les bonnes pratiques de création de messages s’affichant de droite à gauche, consultez Créer des messages de droite à gauche.

Étape 5 : Tester votre message in-app

La section Aperçu et test vous permet de prévisualiser vos messages in-app sur différents appareils et d’envoyer un message test sur votre appareil. Vous pouvez ainsi vérifier que les détails sont cohérents sur toutes vos plateformes pour votre campagne de messages in-app par glisser-déposer.

Testez toujours vos messages in-app avant d’envoyer vos campagnes : vous pourrez ainsi visualiser le rendu final de votre message du point de vue de vos utilisateurs.

Prévisualiser le message en tant qu’utilisateur

Avertissement

Pour envoyer un test à des groupes de test de contenu ou à des utilisateurs individuels, les notifications push doivent être activées sur vos appareils de test avant l’envoi.

Dans l’onglet Aperçu et test, vous pouvez prévisualiser les messages comme si vous étiez un utilisateur. Vous pouvez sélectionner un utilisateur spécifique, un utilisateur aléatoire ou créer un utilisateur personnalisé :

• Utilisateur aléatoire : Braze sélectionne au hasard un utilisateur dans la base de données et prévisualise le message in-app en fonction de ses attributs ou de ses informations d’événement.
• Sélectionner un utilisateur : Vous pouvez sélectionner un utilisateur spécifique à partir de son adresse e-mail ou de son external_id. Le message in-app est prévisualisé en fonction des attributs et des informations d’événement de cet utilisateur.
• Utilisateur personnalisé : Vous pouvez personnaliser un utilisateur. Braze propose des champs pour tous les attributs et événements disponibles. Saisissez les informations que vous souhaitez voir dans l’aperçu de l’e-mail.

Liste de contrôle des tests

Posez-vous les questions suivantes lorsque vous testez votre message in-app :

• Avez-vous testé le message sur différents appareils ?
• Les images et les médias s’affichent-ils et se comportent-ils comme prévu ?
• Le Liquid fonctionne-t-il comme prévu ? Avez-vous prévu une valeur d’attribut par défaut au cas où le Liquid ne renverrait aucune information ?
• Votre texte est-il clair, concis et correct ?
• Vos boutons redirigent-ils l’utilisateur vers la bonne destination ?

Questions fréquemment posées

Pourquoi les clics sur le corps n’apparaissent-ils pas sur ma page d’analyse ?

Les clics sur le corps ne sont pas collectés automatiquement pour les messages in-app créés avec l’éditeur par glisser-déposer. Pour plus de détails, consultez les journaux des modifications du SDK pour iOS et Android.

Puis-je segmenter en fonction des clics sur les boutons ?

Oui, vous pouvez segmenter en fonction des clics sur les boutons, pour un maximum de deux boutons dans votre message. Pour ce faire, définissez l’Identifiant pour les rapports de vos boutons sur « 0 » et « 1 », qui correspondront respectivement aux filtres de segmentation « A cliqué sur le bouton 1 du message in-app » et « A cliqué sur le bouton 2 du message in-app ».

Puis-je personnaliser mon message in-app avec du HTML ou du JavaScript personnalisé, ou transférer des messages HTML existants dans l’éditeur ?

Vous ne pouvez pas transférer directement des messages HTML existants dans l’éditeur, mais vous pouvez insérer du HTML, du CSS et du JavaScript bruts dans un bloc Code personnalisé. Les blocs Code personnalisé vous permettent d’intégrer des vidéos tierces et du Liquid avancé, comme le contenu connecté ou les instructions conditionnelles. Pour les méthodes JavaScript brazeBridge et des exemples de suivi des clics, consultez Messages in-app HTML personnalisés.

Pourquoi la vue de composition de l’éditeur par glisser-déposer peut-elle différer du message final ?

L’éditeur par glisser-déposer affiche votre message dans un compositeur et applique des styles et des valeurs par défaut propres à l’aperçu, afin que vous puissiez créer et vérifier la mise en page. Ces traitements vous aident à visualiser la structure et le contenu de substitution pendant la modification ; ils ne sont pas inclus dans le message que reçoivent vos utilisateurs.

Voici quelques exemples courants de comportements propres à l’éditeur :

• L’éditeur encapsule les blocs Code personnalisé dans un conteneur bz-html-code-block avec une min-height par défaut de 40px, afin que les blocs vides ou courts restent visibles pendant la modification
• Les images vides ou contenant du Liquid affichent une marque substitutive dans l’éditeur
• Les groupes de cases à cocher et les boutons radio présélectionnent la première option pour que vous puissiez prévisualiser l’état actif

Si un élément n’apparaît différemment que dans l’éditeur, il s’agit généralement d’un comportement d’aperçu. Pour résoudre un problème sur le message envoyé, examinez les styles et le balisage de vos blocs de message, et non le cadre ou les valeurs par défaut propres à l’aperçu de l’éditeur.

Comment créer un message in-app contextuel ?

Pour l’instant, l’éditeur est limité aux messages modaux et plein écran. Vous pouvez passer d’un type d’affichage à l’autre dans la section Conteneur de message du panneau Styles de message.

Puis-je enregistrer mon message in-app comme modèle après l’avoir créé dans ma campagne ou mon Canvas ?

Oui. Pour tout message in-app que vous souhaitez réutiliser dans une future campagne ou étape du canvas, vous pouvez l’enregistrer comme modèle personnalisé à l’aide du bouton Enregistrer comme modèle, disponible une fois que vous avez quitté l’éditeur. Avant de pouvoir l’enregistrer comme modèle, vous devez d’abord lancer la campagne OU l’enregistrer comme brouillon.

Vous pouvez également créer et enregistrer des modèles de messages in-app en allant dans Contenu > Message in-app.

Pourquoi ma syntaxe Liquid s’affiche-t-elle en texte brut dans mon message in-app paginé ?

Si la syntaxe Liquid s’affiche en texte brut lorsque vous testez un message in-app paginé (au lieu du contenu personnalisé), il se peut qu’une erreur de syntaxe Liquid soit présente sur l’une des pages. Une erreur de syntaxe sur une page affecte le rendu du Liquid sur toutes les pages du message : les pages ne sont pas indépendantes.

Pour résoudre le problème :

1. Vérifiez chaque page de votre message à la recherche d’erreurs de syntaxe Liquid. Un aperçu défaillant sur une page ne signifie pas que l’erreur se trouve sur cette page : comme les pages ne sont pas indépendantes, l’erreur de syntaxe peut se trouver n’importe où dans le message.
2. Vérifiez que toutes les étiquettes Liquid sont correctement fermées et formatées.