Code personnalisé et pont JavaScript pour les bannières

Lorsque vous utilisez le bloc éditeur de code personnalisé dans le compositeur de bannières, vous devez appeler brazeBridge.logClick() depuis votre code HTML personnalisé pour enregistrer les clics. Les bannières utilisent le même pont JavaScript que les messages in-app HTML : les mêmes méthodes et modèles s’appliquent donc.

Si vous utilisez du code HTML personnalisé dans votre conception de bannière, le SDK Braze ne peut pas associer automatiquement des écouteurs de clic aux éléments de votre code personnalisé. Vous devez appeler explicitement brazeBridge.logClick() pour tout élément cliquable (liens, boutons et autres éléments similaires) que vous souhaitez suivre dans les analyses de campagne.

Par exemple, pour enregistrer un clic lorsqu’un utilisateur appuie sur un bouton dans votre code HTML personnalisé :

1
2
3
<button onclick="brazeBridge.logClick()">
  Click me
</button>

Pour obtenir la référence complète du pont JavaScript, y compris toutes les méthodes disponibles et les options de suivi des clics, consultez la section ci-dessous.

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.