Messages in-app HTML personnalisés

Bien que nos messages in-app standard puissent être personnalisés de diverses manières, vous pouvez avoir un contrôle encore plus grand sur l’aspect et la convivialité de vos campagnes en utilisant des messages conçus et créés à l’aide de HTML, CSS et JavaScript. Via à une composition simple, vous pouvez débloquer des fonctionnalités et des marques personnalisées pour répondre à vos besoins.

Les messages in-app HTML permettent de contrôler davantage l’apparence et l’impression d’un message, y compris les éléments suivants :

• Polices et styles personnalisés
• Vidéos
• Plusieurs images
• Comportements lors du 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 ! Découvrez notre référentiel GitHub qui contient des instructions détaillées sur l’utilisation et la personnalisation de messages in-app HTML selon vos besoins, ainsi qu’un ensemble de modèles de messages in-app HTML5 pour vous aider à démarrer.

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.

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:

Button click tracking

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

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').

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 des liens

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

Suivi des clics sur les boutons (obsolète)

Pour enregistrer les clics de bouton dans l’analyse 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 de « Bouton 1 », et ?abButtonId=1 pour enregistrer un clic de « Bouton 2 ».

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

Exemples d’URL

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

Ouvrir le 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 est rejeté avant d’ouvrir le lien.

Pour un lien profond, Braze ouvre votre URL indépendamment de la valeur de abExternalOpen.

Ouvrir comme 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 chaîne de requête est absent ou défini sur false, Braze tente d’ouvrir le lien Web dans un navigateur Web interne au sein de l’application hôte.

Fermer un 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="#">Close</a> ferme le message in-app.

Téléchargement HTML avec aperçu

Lorsque vous concevez des messages in-app HTML personnalisés, vous pouvez prévisualiser votre contenu interactif directement dans Braze.

Le panneau d’aperçu de message de l’éditeur offre un aperçu réaliste avec le rendu du Javascript inclus dans votre message. Vous pouvez prévisualiser et interagir avec vos messages personnalisés depuis le panneau d’aperçu en cliquant sur les pages, en soumettant des formulaires ou des enquêtes, en regardant des animations Javascript, et bien plus encore !

Exigences du SDK

Pour utiliser l’aperçu HTML des messages in-app, vous devez mettre à niveau les versions minimum suivantes du SDK Braze :

Créer une campagne

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

Fichiers de ressources

Lors de la création de messages in-app avec code personnalisé avec téléchargement HTML, vous pouvez télécharger des ressources de 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 téléchargement :

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

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

Ajout de 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 ajoutées automatiquement à 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 Ajouter à partir de la bibliothèque multimédia.

Une fois vos ressources ajoutées, elles apparaîtront dans la section Ressources pour cette campagne.

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

Sinon, survolez une ressource dans 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 lors du référencement d’une ressource distante.

Éditeur HTML

Les modifications effectuées dans le HTML sont automatiquement affichées dans le panneau d’aperçu à la saisie. Toutes les méthodes JavaScriptbrazeBridge que vous utilisez dans votre HTML ne mettront pas à jour les profils utilisateurs lors de la prévisualisation dans le tableau de bord.

Suivi des boutons

Vous pouvez suivre les performances dans votre message in-app avec code personnalisé à l’aide de la méthode Javascript brazeBridge.logClick(button_id). Pour la référence complète, veuillez consulter les méthodes JavaScript Bridge ci-dessus.

Changements non-rétrocompatibles

1. Les exigences de SDK sont le changement incompatible le plus notable avec ce nouveau type de message. Les utilisateurs dont le SDK de l’app ne répond pas aux exigences minimales en matière de version du SDK ne verront pas le message s’afficher.
2. Le lien profond braze://close, auparavant pris en charge par les applications mobiles, a été supprimé en faveur du Javascript brazeBridge.closeMessage(). Vous bénéficiez ainsi de messages HTML multiplateforme, sachant que le Web ne prend pas en charge les liens profonds.

3. Le suivi automatique des clics, qui utilisait ?abButtonId=0 pour les ID de boutons et le suivi de clics dans le corps pour les boutons de fermeture, a été supprimé. 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="">Close Button</a>	<a href="#" onclick="brazeBridge.logClick();brazeBridge.closeMessage()">Close Button</a>
   <a href="">Close Button</a>	<a href="#" onclick="brazeBridge.logClick('0');brazeBridge.closeMessage()">Close Button</a>
   <a href="">Track button 1</a>	<a href="" onclick="brazeBridge.logClick('0')">Track button 1</a>
   <script> location.href = "" </script>	<script> window.addEventListener("ab.BridgeReady", function(){   brazeBridge.logClick("1");   brazeBridge.closeMessage(); }); </script>