배너를 위한 커스텀 코드 및 자바스크립트 브리지

배너 작곡기에서 커스텀 코드 편집기 블록을 사용할 때, 클릭을 기록하기 위해 커스텀 HTML 내에서 brazeBridge.logClick()를 호출해야 합니다. 배너는 HTML 인앱 메시지와 동일한 자바스크립트 브리지를 사용하므로 동일한 메서드와 패턴이 적용됩니다.

배너 디자인에 커스텀 HTML을 사용하는 경우, Braze SDK는 커스텀 코드 내의 요소에 클릭 리스너를 자동으로 첨부할 수 없습니다. 캠페인 분석에서 추적하려는 클릭 가능한 요소(링크, 버튼 등)에 대해 brazeBridge.logClick()을 명시적으로 호출해야 합니다.

예를 들어, 사용자가 커스텀 HTML의 버튼을 탭할 때 클릭을 기록하려면:

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

모든 사용 가능한 메서드 및 클릭 추적 옵션을 포함한 전체 자바스크립트 브리지 참조는 아래 섹션을 참조하세요.

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.