Messages in-app HTML personnalisés

Bien que nos messages in-app standard puissent être personnalisés de nombreuses façons, vous pouvez obtenir un contrôle encore plus grand sur l’apparence de vos campagnes en utilisant des messages conçus et construits avec HTML, CSS et JavaScript. Avec une composition simple, vous pouvez débloquer des fonctionnalités et un branding personnalisés pour répondre à tous vos besoins.

Ce type de message est disponible dans l’éditeur traditionnel.

Comment ça fonctionne

Les messages in-app HTML permettent un contrôle accru sur l’apparence d’un message, notamment les éléments suivants :

• Polices et styles personnalisés
• Vidéos
• Images multiples
• Comportements au clic
• Composants interactifs
• Animations personnalisées

Les messages HTML personnalisés peuvent utiliser les méthodes du pont JavaScript pour enregistrer des événements, définir des attributs personnalisés, fermer le message, et bien plus encore ! Consultez notre dépôt GitHub qui contient des instructions détaillées sur la façon d’utiliser et de personnaliser les messages in-app HTML selon vos besoins, ainsi qu’un ensemble de modèles de messages in-app HTML5 pour vous aider à démarrer.

Remarque

Pour activer les messages in-app HTML via le SDK Web, vous devez fournir l’option d’initialisation allowUserSuppliedJavascript à Braze : par exemple, braze.initialize('YOUR-API_KEY', {allowUserSuppliedJavascript: true}). Ceci est pour des raisons de sécurité, car les messages in-app HTML peuvent exécuter du JavaScript, nous exigeons donc qu’un responsable du site les active.

Pont JavaScript

Custom HTML in-app messages and Banners support a JavaScript “bridge” to interface with the Braze SDK, allowing you to trigger custom Braze actions when users click on elements with links or otherwise engage with your content. These methods exist with the global brazeBridge or appboyBridge variable.

Important

Braze recommends that you use the global brazeBridge variable. The global appboyBridge variable is deprecated but will continue to function for existing users. If you are using appboyBridge, we suggest you migrate to brazeBridge.

appboyBridge was deprecated in the following SDK versions:

• Web: 3.3.0+
• Android: 14.0.0+
• iOS: 4.2.0+

For example, to log a custom attribute and custom event, then close the message, you could use the following JavaScript within your custom HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<button id="button">Set Favorite Color</button>
<script>
// Wait for the `brazeBridge` ready event, "ab.BridgeReady"
window.addEventListener("ab.BridgeReady", function(){
  // Event handler when the button is clicked
  document.querySelector("#button").onclick = function(){
    // Track Button 1 clicks for analytics
    // Note: This requires Android SDK v8.0.0, Web SDK v2.5.0, Swift SDK v5.4.0, and iOS SDK v3.23.0
    brazeBridge.logClick("0");
    // Set the user's custom attribute
    brazeBridge.getUser().setCustomUserAttribute("favorite color", "blue");
    // Track a custom event
    brazeBridge.logCustomEvent("completed survey");
    // Send the enqueued data to Braze
    brazeBridge.requestImmediateDataFlush();
    // Close the message
    brazeBridge.closeMessage();
  };
}, false);
</script>

JavaScript Bridge methods

The following JavaScript methods are supported within custom HTML for in-app messages and Banners:

Remarque

You cannot reference Liquid to insert customAttributes into JavaScript Bridge methods.

Button click tracking

Use the brazeBridge.logClick(button_id) method to track clicks in your custom HTML.

Remarque

Banners: Only brazeBridge.logClick() (without arguments) is supported. Button IDs and custom button tracking are supported for in-app messages only.

For in-app messages, you can programmatically track “Button 1”, “Button 2”, and “Body Clicks” using brazeBridge.logClick('0'), brazeBridge.logClick('1'), or brazeBridge.logClick(), respectively.

For in-app messages, you can track multiple button click events per impression. For example, to close a message and log a Button 2 click:

1
<a href="#" onclick="brazeBridge.logClick('1');brazeBridge.closeMessage()">✖</a>

You can also track new custom button names—up to 100 unique names per campaign. For example, brazeBridge.logClick('blue button') or brazeBridge.logClick('viewed carousel page 3').

Conseil

When using JavaScript methods inside an onclick attribute, wrap string values in single quotes to avoid conflicts with the double-quoted HTML attribute.

Limitations (in-app messages only)

• You can have up to 100 unique button IDs per campaign.
• Button IDs can have up to 255 characters each.
• Button IDs can only include letters, numbers, spaces, dashes, and underscores.

Actions basées sur les liens

En plus du JavaScript personnalisé, les SDK Braze peuvent également envoyer des données d’analyse avec ces raccourcis URL pratiques. Notez que ces paramètres de requête et schémas d’URL sont tous sensibles à la casse.

Suivi des clics sur les boutons (obsolète)

Avertissement

L’utilisation de abButtonID n’est pas prise en charge dans les types de messages HTML avec prévisualisation. Pour plus d’informations, consultez notre guide de mise à niveau.

Pour enregistrer les clics sur les boutons dans les analyses des messages in-app, vous pouvez ajouter abButtonId comme paramètre de requête à tout lien profond, URL de redirection ou élément d’ancrage <a>. Utilisez ?abButtonId=0 pour enregistrer un clic sur « Bouton 1 », et ?abButtonId=1 pour enregistrer un clic sur « Bouton 2 ».

Comme pour les autres paramètres d’URL, le premier paramètre doit commencer par un point d’interrogation ?, tandis que les paramètres suivants doivent être séparés par une esperluette &.

Exemples d’URL

• https://example.com/?abButtonId=0 - Clic sur le Bouton 1
• https://example.com/?abButtonId=1 - Clic sur le Bouton 2
• https://example.com/?utm_source=braze&abButtonId=0 - Clic sur le Bouton 1 avec d’autres paramètres d’URL existants
• myApp://deep-link?page=home&abButtonId=1 - Lien profond mobile avec clic sur le Bouton 2
• <a href="https://example.com/?abButtonId=1"> - Élément d’ancrage <a> avec clic sur le Bouton 2

Remarque

Les messages in-app ne prennent en charge que les clics sur le Bouton 1 et le Bouton 2. Les URL qui ne spécifient pas l’un de ces deux identifiants de bouton seront enregistrées comme des « clics sur le corps » génériques.

Ouvrir un lien dans une nouvelle fenêtre (mobile uniquement)

Pour ouvrir des liens en dehors de votre application dans une nouvelle fenêtre, définissez ?abExternalOpen=true. Le message sera fermé avant l’ouverture du lien.

Pour la création de liens profonds, Braze ouvrira votre URL quelle que soit la valeur de abExternalOpen.

Ouvrir en tant que lien profond (mobile uniquement)

Pour que Braze traite votre lien HTTP ou HTTPS comme un lien profond, définissez ?abDeepLink=true.

Lorsque ce paramètre de requête est absent ou défini sur false, Braze tentera d’ouvrir le lien web dans un navigateur web interne à l’intérieur de l’application hôte.

Fermer le message in-app

Pour fermer un message in-app, vous pouvez utiliser la méthode JavaScript brazeBridge.closeMessage().

Par exemple, <a onclick="brazeBridge.closeMessage()" href="#">Fermer</a> fermera le message in-app.

Téléchargement HTML avec prévisualisation

Lors de la création de messages in-app HTML personnalisés, vous pouvez prévisualiser votre contenu interactif directement dans Braze.

Le panneau de prévisualisation du message de l’éditeur affiche un aperçu réaliste qui rend le JavaScript inclus dans votre message. Vous pouvez prévisualiser et interagir avec vos messages personnalisés depuis le panneau de prévisualisation en cliquant à travers la pagination, en soumettant des formulaires ou des sondages, en regardant des animations JavaScript, et bien plus encore !

Conseil

Les méthodes JavaScript brazeBridge que vous utilisez dans votre HTML ne mettront pas à jour les profils utilisateur lors de la prévisualisation dans le tableau de bord.

Exigences du SDK

Pour utiliser la prévisualisation HTML pour les messages in-app, vous devez effectuer la mise à niveau vers les versions minimales suivantes du SDK Braze :

Avertissement

Étant donné que ce type de message ne peut être reçu que par certaines versions ultérieures du SDK, les utilisateurs disposant de versions du SDK non prises en charge ne recevront pas le message. Envisagez d’adopter ce type de message une fois qu’une partie significative de votre base d’utilisateurs est accessible, ou ciblez uniquement les utilisateurs dont la version de l’application est ultérieure aux exigences. En savoir plus sur le filtrage par version la plus récente de l’application.

Créer une campagne

Les utilisateurs de votre application mobile doivent effectuer la mise à niveau vers les versions du SDK prises en charge pour recevoir un message in-app Code personnalisé. Nous vous recommandons d’encourager les utilisateurs à mettre à niveau leurs applications mobiles avant de lancer des campagnes qui dépendent de versions plus récentes du SDK Braze.

Fichiers de ressources

Lors de la création de messages in-app avec code personnalisé et téléchargement HTML, vous pouvez télécharger les ressources de la campagne dans la bibliothèque multimédia pour les référencer dans votre message.

Les types de fichiers suivants sont pris en charge pour le téléchargement :

Braze recommande de télécharger les ressources dans la bibliothèque multimédia pour deux raisons :

1. Les ressources ajoutées à une campagne via la bibliothèque multimédia permettent à vos messages d’être affichés même lorsque l’utilisateur est hors ligne ou dispose d’une mauvaise connexion internet.
2. Les ressources téléchargées sur Braze peuvent être réutilisées dans plusieurs campagnes.

Ajouter des fichiers de ressources

Vous pouvez ajouter des ressources nouvelles ou existantes à votre campagne.

Pour ajouter de nouvelles ressources à votre campagne, utilisez la section de glisser-déposer pour télécharger un fichier. Les ressources ajoutées dans cette section seront également automatiquement ajoutées à la bibliothèque multimédia. Pour ajouter des ressources que vous avez déjà téléchargées dans la bibliothèque multimédia, sélectionnez Add from Media Library.

Une fois vos ressources ajoutées, elles apparaîtront dans la section Assets for this campaign.

Si le nom de fichier d’une ressource correspond à celui d’une ressource HTML locale, elle est remplacée automatiquement (par exemple, cat.png est téléchargé et <img src="cat.png" /> existe).

Sinon, survolez une ressource de la liste et sélectionnez Copy pour copier l’URL du fichier dans votre presse-papiers. Collez ensuite l’URL de la ressource copiée dans votre HTML comme vous le feriez normalement pour référencer une ressource distante.

Éditeur HTML

Les modifications que vous apportez dans le HTML sont automatiquement rendues dans le panneau de prévisualisation au fur et à mesure que vous tapez. Les méthodes JavaScript brazeBridge que vous utilisez dans votre HTML ne mettront pas à jour les profils utilisateur lors de la prévisualisation dans le tableau de bord.

Conseil

Vous pouvez sélectionner Search dans l’éditeur HTML pour effectuer une recherche dans votre code !

Suivi des boutons

Vous pouvez suivre les performances au sein de votre message in-app avec code personnalisé en utilisant la méthode JavaScript brazeBridge.logClick(button_id). Cela vous permet de suivre programmatiquement « Bouton 1 », « Bouton 2 » et « Clics sur le corps » en utilisant respectivement brazeBridge.logClick('0'), brazeBridge.logClick('1') ou brazeBridge.logClick().

Remarque

Cette méthode de suivi des boutons remplace les méthodes de suivi automatique des clics précédentes (telles que ?abButtonId=0), qui ont été supprimées.

Modifications rétro-incompatibles

1. La modification incompatible la plus notable avec ce nouveau type de message concerne les exigences du SDK. Les utilisateurs dont le SDK de l’application ne répond pas aux exigences minimales de version du SDK ne verront pas le message.
2. Le lien profond braze://close, qui était auparavant pris en charge sur les applications mobiles, a été supprimé au profit de la méthode JavaScript brazeBridge.closeMessage(). Cela permet des messages HTML multiplateformes, car le web ne prend pas en charge les liens profonds.

3. Le suivi automatique des clics, qui utilisait ?abButtonId=0 pour les identifiants de bouton, et le suivi des « clics sur le corps » sur les boutons de fermeture ont été supprimés. Les exemples de code suivants montrent comment modifier votre HTML pour utiliser nos nouvelles méthodes JavaScript de suivi des clics :

   Avant	Après
   <a href="braze://close">Close Button</a>	<a href="#" onclick="brazeBridge.logClick();brazeBridge.closeMessage()">Close Button</a>
   <a href="braze://close?abButtonId=0">Close Button</a>	<a href="#" onclick="brazeBridge.logClick('0');brazeBridge.closeMessage()">Close Button</a>
   <a href="app://deeplink?abButtonId=0">Track button 1</a>	<a href="app://deeplink" onclick="brazeBridge.logClick('0')">Track button 1</a>
   <script> location.href = "braze://close?abButtonId=1" </script>	<script> window.addEventListener("ab.BridgeReady", function(){   brazeBridge.logClick("1");   brazeBridge.closeMessage(); }); </script>