가이드 문서
Go to Docs (EN)Sign in to Dashboard

인앱메시지 이벤트 리스너

Suggest Edits

📘

지원 SDK 버전

JavaScript SDK 11.37.0 이상 버전에서 지원하는 기능입니다.

Interfaces

HackleInAppMessageListener

interface HackleInAppMessageListener {
  beforeInAppMessageOpen?(inAppMessage: HackleInAppMessage): void
  afterInAppMessageOpen?(inAppMessage: HackleInAppMessage): void
  beforeInAppMessageClose?(inAppMessage: HackleInAppMessage): void
  afterInAppMessageClose?(inAppMessage: HackleInAppMessage): void
  onInAppMessageClick?(
    inAppMessage: HackleInAppMessage,
    view: HackleInAppMessageView,
    action: HackleInAppMessageAction
  ): boolean
}

onInAppMessageClick

onInAppMessageClick 메서드가 반환하는 boolean 값을 통해 인앱메시지의 동작을 제어할 수 있습니다.

  • true 를 반환하는 경우 기존 인앱메시지의 액션을 덮어씁니다.
    • 가령, 기존 인앱메시지의 클릭 시 액션이 하루 동안 보지 않기 였다면 해당 액션은 동작하지 않습니다.
  • false를 반환하는 경우 기존 인앱메시지의 액션이 그대로 동작합니다.

🚧

view.close() 를 onInAppMessageClick 내부에서 호출하는 경우

view.close() 를 리스너 내부에서 호출한 경우 true 를 반환한 것과 동일하게 처리됩니다.

onInAppMessageClick: (message, view, action) => {
  view.close();

  // return false를 하더라도 true한 것과 동일하게 처리됨.
  return false;

},

HackleInAppMessage

interface HackleInAppMessage {
  key: number
}
  • 인앱메시지의 키를 반환합니다.

HackleInAppMessageView

interface HackleInAppMessageView {
  close(): void
}
  • close() 를 호출하여 인앱메시지를 리스너 함수 내에서 직접 닫을 수 있습니다.

HackleInAppMessageAction

type HackleInAppMessageActionType = "CLOSE" | "LINK"
type HackleInAppMessageActionLinkTarget = "CURRENT" | "NEW_TAB" | "NEW_WINDOW"

interface HackleInAppMessageAction {
  type: HackleInAppMessageActionType
  close?: {
    hideDurationMillis: number | null
  }
  link?: {
    url: string
    target: HackleInAppMessageActionLinkTarget
    shouldCloseAfterLink: boolean
  }
}
propertydescription
close?.hideDurationMillis메시지를 특정 기간동안 숨김 처리하는 액션인 경우, 해당 기간을 밀리초로 반환합니다.
link?.url링크가 포함된 경우 링크를 반환합니다. e.g) https://hackle.io
link?.target 새 탭으로 이동인 경우 NEW_TAB
새 창으로 이동인 경우 NEW_WINDOW
현재 탭에서 이동인 경우 CURRENT
link?.shouldCloseAfterLink링크 이동 후 닫기 옵션이 ON인 경우 true를 반환합니다.

사용 예제

리스너 등록

hackleClient.setInAppMessageListener({
  onInAppMessageClick: (message, view, action) => {
    if (message.key === 99) {
      // 99번 키의 인앱메시지에 대하여 커스텀 리스너를 적용합니다.
      
      // e.g) 쿠폰 발급 API 호출, history API 등 내부 라우팅 로직 작성
      
      // 인앱메시지를 리스너를 통해서 닫고 싶을 때 사용합니다.
      view.close();
      
      // false를 반환하는 경우 기존 인앱메시지의 동작을 그대로 유지합니다.
      return false;
    }
  },
  afterInAppMessageClose(message) {
    console.log("afterInAppMessageClose", message);
  },
  afterInAppMessageOpen(message) {
    console.log("afterInAppMessageOpen", message);
  },
  beforeInAppMessageClose(message) {
    console.log("before view close", message);
  },
  beforeInAppMessageOpen(message) {
    console.log("before view open", message);
  },
});

리스너 해제

hackleClient.setInAppMessageListener(null);

Updated about 1 month ago