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.

Conditions préalables

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

Créer un message de type bannière

É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 Campaign ou un Canvas ? Les Campaigns conviennent mieux aux messages ciblés ponctuels, tandis que les Canvas sont plus adaptés aux parcours utilisateur en plusieurs étapes.

• campaign
• canvas

1. Accédez à Messaging > Campaigns et sélectionnez Create Campaign.
2. Sélectionnez Banner.
3. Donnez à votre Campaign un nom clair et explicite.
4. Ajoutez des équipes et des tags si nécessaire. Les tags facilitent la recherche de vos Campaigns et la création de rapports. Par exemple, avec le générateur de rapports, vous pouvez filtrer par tags pertinents.
5. Sélectionnez l’emplacement que vous avez créé précédemment pour l’associer à votre Campaign.
6. Ajoutez des variantes si nécessaire. Vous pouvez choisir un type de message et une disposition différents pour chacune. Pour en savoir plus sur les variantes, consultez Tests multivariés et A/B.
7. Choisissez une date et une heure de début pour votre Campaign de bannière. Par défaut, les bannières durent indéfiniment. Vous pouvez modifier ce comportement en sélectionnant End Time et en spécifiant une date et une heure de fin.

Conseil

Si tous les messages de votre Campaign sont similaires ou ont le même contenu, rédigez votre message avant d’ajouter des variantes supplémentaires. Vous pourrez ensuite sélectionner Copy from Variant dans le menu déroulant Add Variant.

1. Créez votre Canvas à l’aide du compositeur de Canvas.
2. Après avoir configuré votre Canvas, ajoutez une étape Message dans le générateur de Canvas. Donnez à votre étape un nom clair et explicite.
3. Sélectionnez Banner comme canal de communication.
4. Sélectionnez un emplacement pour la bannière.
5. Définissez la priorité. La priorité des bannières détermine l’ordre d’affichage des bannières lorsqu’elles partagent le même emplacement.
6. Définissez une expiration pour la bannière. Celle-ci peut intervenir après une durée déterminée suivant la disponibilité de l’étape, ou à une date et une heure précises. La durée d’expiration maximale est de 31 jours après que l’étape devient disponible pour l’utilisateur.

Étape 3 : Rédiger une bannière

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

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

Étape 3.1 : Styliser la bannière

• é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 de bannières et des liens vers les détails des propriétés partagées, consultez Blocs de l’éditeur (bannières).

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, les paramètres de bordure et autres éléments de votre message, sélectionnez Styles. Si vous souhaitez personnaliser le style d’un bloc ou d’une ligne spécifique uniquement, sélectionnez-le pour effectuer les modifications.

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, ce qui vous permet de référencer des attributs utilisateur, des attributs personnalisés, des éléments de catalogue, et bien plus encore.

Conseil

Besoin d’aide pour créer le HTML de votre bannière ? Sélectionnez Ask Operator dans l’éditeur HTML et décrivez la bannière souhaitée. BrazeAI^TM Operator génère du HTML que vous pouvez examiner et insérer dans l’éditeur. Pour en savoir plus, 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 bannières.

Remarque

Pour cibler des utilisateurs dans différentes langues au sein d’une même Campaign de bannière, 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 la bannière, vous pouvez choisir de le diriger plus en profondeur dans votre application ou de le rediriger vers une autre page web. De plus, vous pouvez choisir de journaliser un attribut personnalisé ou un événement, ce qui met à jour le profil de l’utilisateur avec des données personnalisées lorsqu’il clique sur la bannière. Pour un suivi des clics plus granulaire, attribuez un identifiant personnalisé à chaque élément interactif à l’aide du champ Identifier for 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 de la bannière) possède son propre comportement au clic. Par exemple, avec les comportements au clic suivants :

• Une bannière a un comportement au clic qui redirige vers la page d'accueil d'un site web.
• Une image dans la bannière 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. En revanche, un clic sur la zone environnante de la bannière 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 bannières.

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

• é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 à une bannière pour y associer 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 de la bannière, mais peuvent être consultées 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 vos 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’une bannière 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 Settings > Properties > Add property.

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

Lorsque vous avez terminé, sélectionnez Done.

Étape 4 : Finaliser votre Campaign ou Canvas

• campaign
• canvas

Définir la priorité de la bannière (facultatif)

La priorité des bannières détermine l’ordre d’affichage des bannières lorsqu’elles partagent le même emplacement. Pour définir manuellement la priorité :

1. Sélectionnez Set exact priority.
2. Glissez-déposez les Campaigns pour les ordonner selon la priorité souhaitée.
3. Sélectionnez Apply Sort.

Conseil

Si vous avez plusieurs Campaigns de bannière utilisant le même ID d’emplacement, nous vous recommandons d’utiliser le tri par priorité en glisser-déposer pour définir la priorité exacte.

Configurer la rééligibilité (facultatif)

Par défaut, les utilisateurs qui ferment une bannière ne sont jamais rééligibles pour cette Campaign. Pour permettre aux utilisateurs ayant fermé la bannière de la revoir, accédez à l’étape Delivery Controls et sélectionnez Allow users to become re-eligible to receive campaign. Lorsque cette option est activée, définissez une période de temporisation en minutes, heures, jours ou semaines.

Le décompte commence à partir du moment où l’utilisateur ferme la bannière. Une fois la période écoulée, l’utilisateur redevient automatiquement éligible, sans qu’il soit nécessaire de relancer la Campaign. La rééligibilité est suivie par utilisateur et par Campaign.

Choisir votre audience

1. Dans Target Audiences, choisissez des Segments ou des filtres pour affiner votre audience. Vous obtenez 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 Assign Conversions, suivez la fréquence à laquelle les utilisateurs effectuent des actions spécifiques après avoir reçu une Campaign en définissant des événements de conversion avec une fenêtre pouvant aller 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 Campaign. 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 ce n’est pas déjà fait, complétez les sections restantes de votre composant Canvas. Pour plus de détails sur la finalisation de votre Canvas, la mise en œuvre de tests multivariés et de la sélection intelligente, et bien plus encore, consultez l’étape Créer votre Canvas de notre documentation Canvas.

Pour contrôler la rééligibilité des étapes de bannière dans un Canvas, utilisez les paramètres de réentrée du Canvas. Pour en savoir plus, consultez Rééligibilité pour les Campaigns et les 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 Campaign ou Canvas, vérifiez ses détails, testez-la, puis envoyez-la quand vous êtes prêt.