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 des emplacements dans votre application ou votre site web. Vous pouvez tout de même préparer le brouillon de votre campagne de bannières en attendant, mais vous ne pourrez pas la lancer tant que les emplacements ne seront pas configurés.

Remarque

Pour les emplacements web, vous pouvez également utiliser le ciblage Web pour choisir où une bannière s’affiche sur votre site web, sans écrire de code d’insertion pour chaque emplacement.

Créer un message de bannière

Étape 1 : Créer des emplacements dans Braze

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

Donnez un nom à votre emplacement et attribuez-lui un ID de placement. Veillez à consulter les autres équipes 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, consultez 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 campagnes conviennent mieux aux campagnes de communication ciblées et ponctuelles, tandis que les Canvas sont plus adaptés aux parcours utilisateurs en plusieurs étapes.

• campaign
• canvas

1. Accédez à Envoi de messages > Campagnes et sélectionnez Créer une campagne.
2. Sélectionnez Bannière.
3. Donnez à votre campagne un nom clair et explicite.
4. Ajoutez des équipes et des tags si nécessaire. Les tags facilitent la recherche de vos campagnes et la création de rapports. Par exemple, dans 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 campagne.
6. Ajoutez des variantes si nécessaire. Vous pouvez choisir un type de message et une mise en page différents pour chacune d’elles. Pour plus d’informations sur les variantes, consultez Tests multivariés et A/B.
7. Choisissez une date et une heure de début pour votre campagne de bannière. Par défaut, les bannières restent actives indéfiniment. Pour modifier ce comportement, sélectionnez Heure de fin et indiquez une date et une heure de fin.

Conseil

Si tous les messages de votre campagne sont similaires ou ont le même contenu, rédigez votre message avant d’ajouter d’autres variantes. Vous pourrez ensuite sélectionner Copier depuis la variante dans le menu déroulant Ajouter une variante.

1. Créez votre Canvas à l’aide de l’éditeur 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 Bannière comme canal de communication.
4. Sélectionnez un emplacement pour la bannière.
5. Définissez la priorité. La priorité de la bannière détermine l’ordre d’affichage des bannières qui partagent le même emplacement.
6. Définissez une expiration pour la bannière. Elle peut intervenir après une certaine duré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 : Composer une bannière

Ensuite, choisissez comment vous souhaitez commencer :

• Éditeur glisser-déposer : Partez d’une bannière vierge et créez-la visuellement à l’aide de blocs et de 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 Modèles Braze ou Vos modèles. Les modèles s’ouvrent dans l’éditeur glisser-déposer pour être personnalisés.

Étape 3.1 : Styliser la bannière

• éditeur 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 d’autres éléments de votre message, sélectionnez Styles. Si vous souhaitez uniquement personnaliser le style d’un bloc ou d’une ligne spécifique, sélectionnez-le pour le modifier.

L’éditeur HTML est idéal pour les équipes qui gèrent 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 étiquettes de personnalisation Liquid sont entièrement prises en charge : vous pouvez donc faire référence aux attributs utilisateur, aux attributs personnalisés, aux éléments de catalogue, et bien plus encore.

Conseil

Besoin d’aide pour créer le HTML de votre bannière ? Sélectionnez Demander à Operator dans l’éditeur HTML et décrivez la bannière souhaitée. BrazeAI Operator™ génère du HTML que vous pouvez vérifier puis 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 bannières.

Remarque

Pour cibler des utilisateurs dans différentes langues au sein d’une même campagne de bannière, consultez Messages multilingues.

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

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

Lorsqu’un utilisateur clique sur un lien dans la bannière, vous pouvez choisir de l’orienter plus loin dans votre application ou de le rediriger vers une autre page web. Vous pouvez également choisir d’enregistrer un attribut ou un événement personnalisé, 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 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 de la bannière (comme un bouton, un lien ou une image) possède son propre comportement au clic. Prenons par exemple 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 de 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, s’il clique sur la zone environnante de la bannière, il est redirigé vers la page d’accueil.

Dans l’éditeur HTML, le suivi des clics n’est pas automatique. Vous devez appeler brazeBridge.logClick() dans 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)

Important

La fermeture des bannières nécessite les versions minimales du SDK suivantes. Les versions plus anciennes du SDK n’affichent pas les bannières pour lesquelles la fermeture est activée.

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

• éditeur 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 joindre des métadonnées structurées, comme des chaînes de caractères ou des objets JSON. Ces propriétés n’affectent pas l’affichage de la bannière, mais vous pouvez y accéder via le SDK de 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 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, renseignez les champs suivants :

Une fois 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 gestionnaire si vous souhaitez participer à l’accès anticipé.

Comme les bannières s’affichent en ligne lors de l’actualisation d’une session, le contenu connecté fonctionne différemment dans ce canal que dans les autres :

• Seules les requêtes GET sont prises en charge.
• Tous les emplacements d’une même 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 considéré comme nul. Les bannières ne font pas de nouvelle tentative.

Pour de meilleurs résultats :

• Veillez à ce que vos endpoints soient rapides et mettez les réponses en cache dès que possible.
• Limitez le nombre d’URL de contenu connecté uniques parmi les emplacements affichés ensemble.
• Évitez d’enchaîner les appels où une réponse de contenu connecté détermine l’URL du 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 bannières vides.

Étape 4 : Créer le reste de votre campagne ou de votre Canvas

• campaign
• canvas

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

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

1. Sélectionnez Définir la priorité exacte.
2. Glissez-déposez les campagnes pour les classer selon la priorité souhaitée.
3. Sélectionnez Appliquer le tri.

Conseil

Si plusieurs campagnes de bannière utilisent le même ID d’emplacement, nous vous recommandons d’utiliser l’outil de tri par 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 redeviennent jamais éligibles pour cette campagne. Pour permettre aux utilisateurs ayant fermé la bannière de la revoir, accédez à l’étape Contrôles de livraison et sélectionnez Autoriser les utilisateurs à redevenir éligibles pour recevoir la campagne. Une fois cette option activée, définissez un délai de latence en minutes, heures, jours ou semaines.

Le compte à rebours démarre au moment où l’utilisateur ferme la bannière. Une fois le délai écoulé, l’utilisateur redevient automatiquement éligible, sans qu’il soit nécessaire de redémarrer la campagne. 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 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 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 pouvez définir 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 création du reste de votre Canvas, y compris les tests multivariés et l’optimisation avec BrazeAI^TM, consultez Créer votre Canvas.

Pour contrôler la rééligibilité des étapes Bannière d’un Canvas, utilisez les paramètres de rentrée du Canvas. Pour plus d’informations, consultez Rééligibilité pour les campagnes 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 placement ?
• 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

Une fois votre campagne ou votre Canvas terminé, vérifiez-en les détails, testez-le, puis envoyez-le lorsque vous êtes prêt.