커스텀 HTML 인-앱 메시지

표준 인앱 메시지는 다양한 방식으로 사용자 정의할 수 있지만, HTML, CSS 및 JavaScript를 사용하여 설계되고 구축된 메시지를 사용하면 캠페인의 모양과 느낌을 더욱 세밀하게 제어할 수 있습니다. 간단한 구성으로 커스텀 기능과 브랜딩을 필요에 맞게 사용할 수 있습니다.

HTML 인앱 메시지는 메시지의 모양과 느낌을 더 잘 제어할 수 있게 해줍니다. 다음을 포함합니다.

• 커스텀 글꼴 및 스타일
• 비디오
• 다중 이미지
• 클릭 시 동작
• 대화형 구성 요소
• 커스텀 애니메이션

커스텀 HTML 메시지는 JavaScript Bridge 메서드를 사용하여 이벤트를 기록하고, 커스텀 속성을 설정하고, 메시지를 닫는 등의 작업을 수행할 수 있습니다! Check out our GitHub repository that contains detailed instructions on how to use and customize HTML in-app messages for your needs, and for a set of HTML5 in-app messages templates to help you get started.

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.

링크 기반 작업

커스텀 JavaScript 외에도, Braze SDK는 이러한 편리한 URL 바로 가기를 사용하여 분석 데이터를 보낼 수 있습니다. 이 쿼리 매개변수와 URL 스킴은 모두 대소문자를 구분합니다.

버튼 클릭 추적 (사용되지 않음)

인앱 메시지 분석을 위해 버튼 클릭을 기록하려면 abButtonId를 쿼리 매개변수로 딥링크, 리디렉션 URL 또는 앵커 요소 <a>에 추가할 수 있습니다. ?abButtonId=0을 사용하여 “버튼 1” 클릭을 기록하고, ?abButtonId=1을 사용하여 “버튼 2” 클릭을 기록합니다.

다른 URL 매개변수와 마찬가지로 첫 번째 매개변수는 물음표?로 시작해야 하며, 이후 매개변수는 앰퍼샌드&로 구분해야 합니다.

예제 URL

• https://example.com/?abButtonId=0 - 버튼 1 클릭
• https://example.com/?abButtonId=1 - 버튼 2 클릭
• https://example.com/?utm_source=braze&abButtonId=0 - 다른 기존 URL 매개변수와 함께 버튼 1 클릭
• myApp://deep-link?page=home&abButtonId=1 - 모바일 딥링크와 버튼 2 클릭
• <a href="https://example.com/?abButtonId=1"> - 앵커 요소 <a> 버튼 2 클릭

새 창에서 링크 열기 (모바일 전용)

링크를 새 창에서 열려면 ?abExternalOpen=true를 설정하세요. 메시지는 링크를 열기 전에 해제됩니다.

딥링킹의 경우 Braze는 abExternalOpen의 값에 관계없이 사용자의 URL을 엽니다.

딥링크로 열기 (모바일 전용)

Braze가 HTTP 또는 HTTPS 링크를 딥링크로 처리하도록 하려면 ?abDeepLink=true를 설정하세요.

이 쿼리 문자열 매개변수가 없거나 false로 설정된 경우, Braze는 호스트 앱 내부의 웹 브라우저에서 웹 링크를 열려고 합니다.

인앱 메시지 닫기

인앱 메시지를 닫으려면 brazeBridge.closeMessage() JavaScript 메서드를 사용할 수 있습니다.

예를 들어, <a onclick="brazeBridge.closeMessage()" href="#">Close</a> 인앱 메시지를 닫습니다.

미리보기가 있는 HTML 업로드

커스텀 HTML 인앱 메시지를 만들 때 Braze에서 직접 인터랙티브 콘텐츠를 미리 볼 수 있습니다.

편집기의 메시지 미리보기 패널은 메시지에 포함된 JavaScript를 렌더링하는 현실적인 미리보기를 보여줍니다. 미리보기 패널에서 페이지 매김을 클릭하거나, 양식 또는 설문지를 제출하거나, JavaScript 애니메이션을 시청하는 등 커스텀 메시지를 미리보고 상호작용할 수 있습니다!

SDK 요구 사항

인앱 메시지에 대한 HTML 미리보기를 사용하려면 다음 최소 Braze SDK 버전으로 업그레이드해야 합니다.

캠페인 {#instructions} 만들기

모바일 앱 사용자는 지원되는 소프트웨어 개발 키트 버전으로 업그레이드해야 사용자 지정 코드 인앱 메시지를 수신할 수 있습니다. 캠페인 실행 전에 사용자가 최신 Braze SDK 버전에 의존하는 모바일 앱을 업그레이드하도록 유도하는 것을 권장합니다.

자산 파일

HTML 업로드를 사용하여 앱 내 메시지에 커스텀 코드를 만들 때, 캠페인 에셋을 미디어 라이브러리에 업로드하여 메시지에서 참조할 수 있습니다.

다음 파일 형식은 업로드를 지원합니다:

Braze는 두 가지 이유로 자산을 미디어 라이브러리에 업로드할 것을 권장합니다:

1. 미디어 라이브러리를 통해 캠페인에 추가된 자산은 사용자가 오프라인 상태이거나 인터넷 연결이 불안정한 경우에도 메시지를 표시할 수 있게 합니다.
2. Braze에 업로드된 자산은 캠페인 전반에 걸쳐 재사용할 수 있습니다.

자산 파일 추가

새로운 자산이나 기존 자산을 캠페인에 추가할 수 있습니다.

새 자산을 캠페인에 추가하려면 드래그 앤 드롭 섹션을 사용하여 파일을 업로드하세요. 이 섹션에 추가된 자산은 미디어 라이브러리에도 자동으로 추가됩니다. 자산을 미디어 라이브러리에 추가하려면 미디어 라이브러리에서 추가를 선택하세요.

자산이 추가되면 이 캠페인의 자산 섹션에 나타납니다.

자산의 파일명이 로컬 HTML 자산의 파일명과 일치하는 경우 자동으로 대체됩니다(예:cat.png 가 업로드되고<img src="cat.png" /> 가 존재하는 경우).

그렇지 않으면 목록에서 자산 위로 마우스를 이동하고 복사를 선택하여 파일의 URL을 클립보드에 복사합니다. 그런 다음 복사한 자산 URL을 원격 자산을 참조할 때처럼 HTML에 붙여넣습니다.

HTML 편집기

HTML에서 변경한 내용은 입력하는 즉시 미리보기 패널에 자동으로 렌더링됩니다. brazeBridge JavaScript 메서드를 HTML에서 사용해도 대시보드에서 미리 보는 동안 고객 프로필이 업데이트되지 않습니다.

버튼 추적

You can track performance within your custom code in-app message using the brazeBridge.logClick(button_id) JavaScript method. 전체 참조 사항은 위의 JavaScript Bridge 메서드를 참조하십시오.

하위 호환되지 않는 변경 사항

1. 이 새로운 메시지 유형과 관련된 가장 주목할 만한 비호환 변경 사항은 SDK 요구 사항입니다. 앱 SDK가 최소 SDK 버전 요구 사항을 충족하지 않는 사용자는 메시지가 표시되지 않습니다.
2. 이전에는 모바일 앱에서 지원되었던 braze://close 딥링크가 JavaScript brazeBridge.closeMessage()로 대체되었습니다. 이것은 웹이 딥링크를 지원하지 않기 때문에 크로스 플랫폼 HTML 메시지를 허용합니다.

3. 자동 클릭 추적, ?abButtonId=0 버튼 ID에 사용된 것, 그리고 닫기 버튼에 대한 “본문 클릭” 추적이 제거되었습니다. 다음 코드 예제는 새로운 클릭 추적 JavaScript 메서드를 사용하도록 HTML을 변경하는 방법을 보여줍니다:

   이전	이후
   <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>