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

인앱메시지 이벤트 리스너

Suggest Edits

📘

지원 SDK 버전

React 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를 반환합니다.

사용 예제

리스너 등록

예제는 useEffect로 내부에 작성되어 있으나, 사용 목적에 맞는 위치에 자유롭게 작성할 수 있습니다.

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";
// import hackleClient
import { hackleClient } from "./hackleClient";

export default function Example() {
  const navigate = useNavigate();

  useEffect(() => {
    hackleClient.setInAppMessageListener({
      onInAppMessageClick: (message, view, action) => {
        // 100번 키의 인앱메시지에 대하여 대시보드에서 설정한 link URL을 React의 Route 로직으로 대체합니다.
        if (message.key === 100) {
          if (action.link?.url) {
            view.close()
	          navigate(action.link.url);
            return true;
          }
        }
        
        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);
      },
    });
  }, [navigate]);

  return;
}

리스너 해제

hackleClient.setInAppMessageListener(null);

Updated about 1 month ago