Créer une bannière

Découvrez comment créer des bannières lors de la conception de Campaigns et de Canvas dans Braze. Pour des informations plus générales, consultez À propos des bannières.

Prérequis

Avant de pouvoir lancer votre Banner, votre équipe de développement doit configurer les placements dans votre application ou votre site web. Vous pouvez tout de même préparer votre campagne Banner en attendant, mais vous ne pourrez pas lancer la campagne tant que les placements ne seront pas configurés.

Créer un message Banner

Étape 1 : Créer des placements dans Braze

Si vous ne l’avez pas encore fait, vous devrez créer des emplacements/localisations de bannières dans Braze, qui servent à définir les emplacements dans votre application ou votre site pouvant afficher des bannières. Pour créer un placement, allez dans Paramètres > Placements de bannières, puis sélectionnez Créer un placement.

Donnez un nom à votre placement et attribuez-lui un ID. Veillez à consulter les autres Teams avant d’attribuer un ID, car il sera utilisé tout au long du cycle de vie de la carte et ne devrait pas être modifié par la suite. Pour plus d’informations, voir ID de placement.

Étape 2 : Choisir où créer votre message

Vous ne savez pas si votre message doit être envoyé via une campagne ou un Canvas ? Les Campaigns sont plus adaptées aux campagnes de communication ciblées et ponctuelles, tandis que les Canvas sont plus adaptés aux parcours utilisateur en plusieurs étapes.

• campaign
• canvas

1. Allez dans Messagerie > Campaigns et sélectionnez Créer une campagne.
2. Sélectionnez Banner.
3. Donnez à votre campagne un nom clair et significatif.
4. Ajoutez des équipes et des tags selon vos besoins. Les tags 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 les tags pertinents.
5. Sélectionnez l’emplacement que vous avez précédemment créé pour l’associer à votre campagne.
6. Ajoutez des variantes selon vos besoins. Vous pouvez choisir un type de message et une mise en page différents pour chacune. Pour plus d’informations sur les variantes, consultez Test multivarié et A/B.
7. Choisissez une date et une heure de début pour votre campagne Banner. Par défaut, les Banners durent indéfiniment. Vous pouvez modifier cela en sélectionnant Heure de fin et en spécifiant une date et une heure de fin.

Conseil

Si tous les messages de votre campagne vont être similaires ou avoir le même contenu, composez votre message avant d’ajouter des variantes supplémentaires. Vous pouvez ensuite sélectionner Copier depuis la variante dans le menu déroulant Ajouter une variante.

1. Créez votre Canvas à l’aide du compositeur Canvas.
2. Après avoir configuré votre Canvas, ajoutez une étape Message dans le générateur Canvas. Donnez à votre étape un nom clair et significatif.
3. Sélectionnez Banner comme canal de communication.
4. Sélectionnez un emplacement pour le Banner.
5. Définissez la priorité. La priorité du Banner détermine l’ordre dans lequel les Banners sont affichés s’ils partagent le même emplacement.
6. Définissez une expiration pour le Banner. Celle-ci peut être définie après une durée suivant la disponibilité de l’étape ou à une date et une heure spécifiques. La durée d’expiration maximale est de 31 jours après que l’étape devient disponible pour l’utilisateur.

Étape 3 : Composer un Banner

Ensuite, choisissez comment vous souhaitez commencer la création :

• Éditeur par glisser-déposer : Commencez avec un Banner vierge et construisez visuellement avec des blocs et des lignes.
• Éditeur HTML : Commencez avec un Banner vierge et travaillez directement en HTML.
• Modèles : Ouvrez la bibliothèque de modèles et sélectionnez un design parmi les modèles Braze ou vos modèles. Les modèles s’ouvrent dans l’éditeur par glisser-déposer pour personnalisation.

Étape 3.1 : Styliser le Banner

• éditeur par glisser-déposer
• éditeur html

Vous pouvez glisser-déposer des blocs et des lignes dans la zone de travail pour commencer à créer votre message. Pour une référence des blocs de l’éditeur Banner et des liens vers les détails des propriétés partagées, consultez Blocs éditeur (Banners).

Important

Si vous intégrez des images via le contenu connecté ou Liquid, assurez-vous que l’URL de votre image commence par https://. L’utilisation de http:// provoquera le plantage de votre application.

Pour personnaliser les propriétés d’arrière-plan de votre message, les paramètres de bordure et plus encore, sélectionnez Styles. Si vous souhaitez uniquement personnaliser le style d’un bloc ou d’une ligne spécifique, sélectionnez-le pour effectuer les modifications.

Masquer des lignes et des blocs par appareil

Pour adapter votre mise en page aux ordinateurs de bureau par rapport aux tablettes et aux appareils mobiles, sélectionnez une ligne ou un bloc sur le canevas, puis utilisez le bouton Hide on dans le panneau de propriétés pour le masquer sur Desktop ou Tablet and smaller devices. Une ligne ou un bloc masqué n’apparaîtra pas pour ce type d’appareil, que ce soit lors de la prévisualisation de votre bannière dans l’éditeur par glisser-déposer ou dans la bannière en direct.

L’éditeur HTML est idéal pour les équipes qui maintiennent déjà leurs propres modèles HTML ou qui souhaitent un contrôle total sur le balisage et le style. Vous pouvez écrire ou coller du HTML personnalisé directement dans l’éditeur. Les balises de personnalisation Liquid sont entièrement prises en charge, vous pouvez donc référencer des attributs utilisateur, des attributs personnalisés, des éléments de catalogue, et plus encore.

Conseil

Besoin d’aide pour créer le HTML de votre Banner ? Sélectionnez Ask Operator dans l’éditeur HTML et décrivez le Banner que vous souhaitez. BrazeAI^TM Operator génère du HTML que vous pouvez examiner et insérer dans l’éditeur. Pour plus d’informations, consultez Générer des messages.

Pour le suivi des clics et des fermetures dans votre HTML personnalisé, vous devez appeler explicitement les méthodes du pont JavaScript. Pour la référence complète, consultez Code personnalisé et pont JavaScript pour les Banners.

Remarque

Pour cibler des utilisateurs dans différentes langues au sein d’une seule campagne Banner, consultez Messages multilingues.

Étape 3.2 : Définir le comportement au clic (facultatif)

• éditeur par glisser-déposer
• éditeur html

Lorsqu’un utilisateur clique sur un lien dans le Banner, vous pouvez choisir de le diriger plus profondément dans votre application ou de le rediriger vers une autre page web. De plus, vous pouvez choisir d’enregistrer un attribut personnalisé ou un événement, ce qui met à jour le profil de votre utilisateur avec des données personnalisées lorsqu’il clique sur le Banner. Pour un suivi des clics plus granulaire, attribuez un identifiant personnalisé à chaque élément interactif en utilisant le champ Identifiant pour le reporting dans son panneau de propriétés.

Important
Le comportement au clic peut être remplacé si un élément spécifique (comme un bouton, un lien ou une image du Banner) possède son propre comportement au clic. Par exemple, étant donné les comportements au clic suivants :

• Un Banner a un comportement au clic qui redirige vers la page d'accueil d'un site web.
• Une image dans le Banner a un comportement au clic qui redirige vers la page produit d'un site web.

Si un utilisateur clique sur l'image, il est redirigé vers la page produit. Cependant, cliquer sur la zone environnante du Banner le redirige vers la page d'accueil.

Dans l’éditeur HTML, le suivi des clics n’est pas automatique. Vous devez appeler brazeBridge.logClick() depuis votre HTML pour chaque élément cliquable que vous souhaitez suivre. Par exemple :

1
<a href="https://example.com" onclick="brazeBridge.logClick()">Shop now</a>

Pour la référence complète du pont JavaScript, consultez Code personnalisé et pont JavaScript pour les Banners.

Étape 3.3 : Configurer le comportement de fermeture (facultatif)

Important

Les fermetures de Banner nécessitent les versions minimales de SDK suivantes. Les versions plus anciennes du SDK n’affichent pas les Banners avec la fermeture activée.

  Swift: 14.1.0+     Web: 6.7.1+     Android: 42.1.0+  Flutter: 20.0.0+  React Native: 22.0.0+  

• éditeur par glisser-déposer
• éditeur html

1
<a href="#" onclick="brazeBridge.logClick(); brazeBridge.closeMessage();">&#x2715; Close</a>

Étape 3.4 : Ajouter des propriétés personnalisées (facultatif)

Vous pouvez ajouter des propriétés personnalisées à un Banner pour y attacher des métadonnées structurées, telles que des chaînes de caractères ou des objets JSON. Ces propriétés n’affectent pas l’affichage du Banner mais peuvent être accessibles via le SDK Braze pour modifier le comportement ou l’apparence de votre application. Par exemple, vous pourriez :

• Envoyer des métadonnées pour vos analyses tierces ou intégrations.
• Utiliser des métadonnées telles qu’un timestamp ou un objet JSON pour déclencher une logique conditionnelle.
• Contrôler le comportement d’un Banner en fonction de métadonnées incluses comme ratio ou format.

Les propriétés personnalisées fonctionnent de la même manière dans l’éditeur par glisser-déposer et dans l’éditeur HTML. Pour ajouter une propriété personnalisée, sélectionnez Paramètres > Propriétés > Ajouter une propriété.

Pour chaque propriété que vous souhaitez ajouter, remplissez les champs suivants :

Lorsque vous avez terminé, sélectionnez Terminé.

Étape 3.5 : Personnaliser avec le contenu connecté (facultatif)

Important

Connected Content for Banners est actuellement en accès anticipé. Contactez votre Braze account manager si vous souhaitez participer à l’accès anticipé.

Étant donné que les Banners s’affichent en ligne lors d’une actualisation de session, le contenu connecté dans ce canal fonctionne différemment des autres canaux :

• Seules les requêtes GET sont prises en charge.
• Tous les emplacements dans une seule actualisation (jusqu’à 10) partagent un budget de rendu d’environ deux secondes. Si un appel est lent, expire ou si le budget est dépassé, le résultat du contenu connecté pour cet emplacement est traité comme nul. Les Banners ne réessaient pas.

Pour de meilleurs résultats :

• Gardez vos endpoints rapides et mettez en cache les réponses autant que possible.
• Limitez le nombre d’URL de contenu connecté uniques parmi les emplacements qui s’affichent ensemble.
• Évitez de chaîner les appels où une réponse de contenu connecté détermine l’URL de l’appel suivant. Chaque appel supplémentaire s’ajoute au budget partagé.
• Utilisez des instructions de garde Liquid ou le filtre default pour gérer les résultats nuls et éviter les Banners vides.

Étape 4 : Construire le reste de votre campagne ou Canvas

• campaign
• canvas

Définir la priorité du Banner (facultatif)

La priorité du Banner détermine l’ordre dans lequel les Banners sont affichés s’ils partagent le même emplacement. Pour définir manuellement la priorité :

1. Sélectionnez Set exact priority.
2. Glissez-déposez les campagnes pour les ordonner avec la bonne priorité.
3. Sélectionnez Apply Sort.

Conseil

Si vous avez plusieurs campagnes Banner utilisant le même ID d’emplacement, nous vous recommandons d’utiliser le trieur de priorité par glisser-déposer pour définir la priorité exacte.

Configurer la rééligibilité (facultatif)

Par défaut, les utilisateurs qui ferment un Banner ne sont jamais rééligibles pour cette campagne. Pour permettre aux utilisateurs ayant fermé le Banner de le revoir, allez à l’étape Contrôles de distribution et sélectionnez Permettre aux utilisateurs de redevenir éligibles pour recevoir la campagne. Lorsque cette option est activée, définissez une fenêtre de temporisation en minutes, heures, jours ou semaines.

Le compte à rebours commence lorsque l’utilisateur ferme le Banner. Après l’expiration de la fenêtre, l’utilisateur est automatiquement rééligible — aucun redémarrage de campagne n’est nécessaire. La rééligibilité est suivie par utilisateur et par campagne.

Choisir votre audience

1. Dans Audiences cibles, choisissez des Segments ou des filtres pour affiner votre audience. Vous recevez automatiquement un aperçu de la population approximative du segment. L’appartenance exacte au segment est calculée avant l’envoi du message.

Important

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.

2. Dans Attribuer des conversions, suivez la fréquence à laquelle les utilisateurs effectuent des actions spécifiques après avoir reçu une campagne en définissant des événements de conversion avec une fenêtre allant jusqu’à 30 jours pour comptabiliser l’action comme une conversion.

Choisir les événements de conversion

Braze vous permet de suivre les événements de conversion, c’est-à-dire la fréquence à laquelle les utilisateurs effectuent des actions spécifiques après avoir reçu une campagne. Vous avez la possibilité d’autoriser une fenêtre allant jusqu’à 30 jours pendant laquelle une conversion est comptabilisée si l’utilisateur effectue l’action spécifiée.

Si vous ne l’avez pas encore fait, complétez les sections restantes de votre composant Canvas. Pour plus de détails sur la façon de construire le reste de votre Canvas, mettre en œuvre le test multivarié et la sélection intelligente, et plus encore, consultez l’étape Construire votre Canvas de notre documentation Canvas.

Pour contrôler la rééligibilité des étapes Banner dans Canvas, utilisez les paramètres de réentrée Canvas. Pour plus d’informations, consultez Rééligibilité pour les campagnes et Canvas.

Étape 5 : Tester votre message (facultatif)

Sélectionnez Prévisualisation pour prévisualiser votre bannière ou envoyer un message test.

Gardez à l’esprit que la prévisualisation peut différer du rendu final sur l’appareil d’un utilisateur en raison des différences matérielles.

Pour envoyer un message test, ajoutez un groupe de test de contenu ou un ou plusieurs utilisateurs individuels en tant que destinataires du test, puis sélectionnez Envoyer le test. Vous pourrez consulter votre message test sur l’appareil pendant 5 minutes maximum. Vous pouvez ensuite sélectionner Copier le lien de prévisualisation pour générer et copier un lien de prévisualisation partageable qui montre à quoi ressemblera la bannière pour un utilisateur aléatoire. Ce lien restera valide pendant sept jours avant de devoir être régénéré.

Lors de la vérification de votre bannière test, assurez-vous des points suivants :

• Votre Campaign de bannière est-elle affectée à un emplacement ?
• Les images et les médias s’affichent-ils et fonctionnent-ils comme prévu sur les types d’appareils et les tailles d’écran ciblés ?
• Vos liens et boutons dirigent-ils l’utilisateur vers la bonne destination ?
• Le Liquid fonctionne-t-il comme prévu ? Avez-vous prévu une valeur d’attribut par défaut dans le cas où le Liquid ne renvoie aucune information ?
• Votre texte est-il clair, concis et correct ?

Pour en savoir plus, consultez Envoyer des messages test.

Étape 6 : Vérifier et déployer

Après avoir terminé la création de votre campagne ou Canvas, vérifiez ses détails, testez-la, puis envoyez-la lorsque vous êtes prêt.