🚧
본 문서에서 다루는 모든 메서드는 HTML 기반으로 생성된 인앱 메시지 에서만 사용 가능한 JavaScript API입니다.

개요

JavaScript Bridge는 HTML 인앱 메시지와 핵클의 SDK가 상호작용 하기 위한 도구입니다.

닫기 버튼을 클릭했을 때
링크를 이동할 때
캠페인의 전환에 해당하는 액션을 했을 때

위와 같은 상황에서 JavaScript Bridge를 활용해 사용자 행동 추적 및 URL 이동 및 인앱 메시지 노출 여부를 제어할 수 있습니다.

Javascript Bridge

메서드 이름	설명
`window.addEventListener("hackleBridgeReady", function(){...})` 👉 🔗	핵클이 제공하는 JavaScript Bridge가 사용 가능한 시점을 알리는 이벤트를 구독합니다. Bridge에 접근하는 모든 자바스크립트 코드는 이 콜백 함수 내부에 작성하는 것을 권장합니다.
`Hackle.bridge.openUrl("https://hackle.io")` 👉 🔗	URL을 열고 인앱 메시지를 닫습니다.
`Hackle.bridge.trackClick("hackle_button_click")` 👉 🔗	인앱 메시지 캠페인의 전환에 해당하는 클릭을 추적합니다. `$in_app_action` 이벤트를 발생시킵니다.
`Hackle.bridge.handleUrl("https://hackle.io", "hackle_button_click")` 👉 🔗	링크 클릭과 클릭 전환 이벤트 추적을 함께 처리합니다.
`Hackle.bridge.closeInAppMessage()` 👉 🔗	인앱 메시지를 닫습니다.
`Hackle.bridge.track({ key: "custom_event", properties: {} })`	커스텀 이벤트를 발생시킵니다.

hackleBridgeReady 구독하기

HTML 내에서 Hackle.bridge 가 사용 가능해질 때, hackleBridgeReady 이벤트가 발행됩니다.

해당 이벤트 리스너의 콜백 안에서 Hackle.bridge 에 접근하는 것을 권장합니다.

<button id="hackle-url">
	Go to Hackle
</button>
<script>
  window.addEventListener("hackleBridgeReady", function(){
    document.querySelector("#hackle-url").addEventListener("click", function(e) {
      Hackle.bridge.openUrl("https://hackle.io");
    });
	})
</script>

URL 열기

인앱 메시지가 나타난 기기의 브라우저에서 URL을 열고 인앱 메시지를 닫습니다.

딥 링크를 지원합니다.
클릭 이벤트는 추적하지 않습니다.

openUrl(url: string): void

openUrl(url: HackleInAppMessageLink): void

interface HackleInAppMessageLink {
  url: string
  target: "CURRENT" | "NEW_TAB" | "NEW_WINDOW"
  shouldCloseAfterLink: boolean
}

기본 동작

현재 페이지에서 URL을 엳고 인앱 메시지를 닫습니다.

<button id="hackle-url">
	Go to Hackle
</button>
<script>
  window.addEventListener("hackleBridgeReady", function(){
    document.querySelector("#hackle-url").addEventListener("click", function(e) {
      Hackle.bridge.openUrl("https://hackle.io");
    });
	})
</script>

새 탭에서 열고 인앱 메시지 닫기

<button id="hackle-url">
	Go to Hackle
</button>
<script>
  window.addEventListener("hackleBridgeReady", function(){
    document.querySelector("#hackle-url").addEventListener("click", function(e) {
      Hackle.bridge.openUrl({
        url: "https://hackle.io",
        target: "NEW_TAB",
				shouldCloseAfterLink: true
 			});
    });
	})
</script>

새 창에서 열고 인앱 메시지 닫기

<button id="hackle-url">
	Go to Hackle
</button>
<script>
  window.addEventListener("hackleBridgeReady", function(){
    document.querySelector("#hackle-url").addEventListener("click", function(e) {
      Hackle.bridge.openUrl({
        url: "https://hackle.io",
        target: "NEW_WINDOW",
				shouldCloseAfterLink: true
 			});
    });
	})
</script>

클릭 추적하기

인앱 메시지 캠페인의 전환에 해당하는 클릭 이벤트를 추적할 수 있습니다.

$in_app_action 이벤트가 발생하며, 이 이벤트를 기반으로 핵클 대시보드에서 캠페인의 성과를 확인할 수 있습니다.

성과 측정 자세히 보기

인앱 메시지 이벤트 자세히 보기

trackClick(elementId?: string): void

elementId 활용하기

<button id="hackle-conversion">
	Hackle Conversion
</button>
<script>
  window.addEventListener("hackleBridgeReady", function(){
    document.querySelector("#hackle-conversion").addEventListener("click", function(e) {
      Hackle.bridge.trackClick("main-funnel-user-conversion-1");
    });
	})
</script>

elementId가 `$in_app_action` 이벤트 속성으로 추가된 모습

링크 클릭과 클릭 추적을 동시에 처리하기

링크 클릭 자체를 전환으로 간주하는 경우 URL 여는 것과 링크 클릭 이벤트 수집을 동시에 처리합니다.

handleUrl(url: string | HackleInAppMessageLink, elementId?: string): void

handleUrl

<button id="hackle-link">
	Hackle Link
</button>
<script>
  window.addEventListener("hackleBridgeReady", function(){
    document.querySelector("#hackle-link").addEventListener("click", function(e) {
      Hackle.bridge.handleUrl("https://hackle.io","main-funnel-user-conversion-1");
    });
	})
</script>

인앱 메시지 닫기

인앱메시지를 닫습니다.

closeInAppMessage(): void

closeInAppMessage

<button id="close-btn">X</button>
<script>
  window.addEventListener("hackleBridgeReady", () => {
    const closeButton = document.querySelector("#close-btn");
    closeButton.addEventListener("click", () => {
      Hackle.bridge.closeInAppMessage();
    });
})
</script>

커스텀 이벤트

커스텀 이벤트를 전송합니다.

기존 JavaScript SDK에서 이벤트를 전송하는 방식과 동일합니다.

track

<button id="custom-btn">X</button>
<script>
  window.addEventListener("hackleBridgeReady", () => {
    const closeButton = document.querySelector("#custom-btn");

    const event = {
      key: "purchase",
      properties: {
        pay_method: "CARD",
        discount_amount: 800,
        is_discount: true
      }
    };

    closeButton.addEventListener("click", () => {
      Hackle.bridge.track(event);
    });
})
</script>

📘
HTML 인앱 메시지 템플릿을 사용해서 빠르게 시작해보세요.
복사 붙여넣기만으로 바로 이용할 수 있는 HTML 인앱 메시지 템플릿을 제공합니다. 👉 템플릿 바로가기