バナー用のカスタムコードとJavaScriptブリッジ

バナーコンポーザーでカスタムコードエディターブロックを使用する場合、クリックを記録するにはカスタムHTML内からbrazeBridge.logClick()を呼び出す必要があります。バナーはHTMLアプリ内メッセージと同じJavaScriptブリッジを使用するため、同じメソッドとパターンが適用されます。

バナーデザインでカスタムHTMLを使用する場合、Braze SDKはカスタムコード内の要素にクリックリスナーを自動的にアタッチできません。Campaign分析でトラッキングしたいクリック可能な要素（リンク、ボタンなど）については、明示的にbrazeBridge.logClick()を呼び出す必要があります。

例えば、カスタムHTML内のボタンをユーザーがタップした際にクリックを記録するには、次のようにします。

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

利用可能なすべてのメソッドやクリックトラッキングオプションを含む完全なJavaScriptブリッジリファレンスについては、以下のセクションを参照してください。

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.