인앱메시지 이벤트 리스너
지원 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
}
}
property | description |
---|---|
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