React Native SDK 설정

Monetai React Native SDK는 앱 내에서 구매자를 예측하여 프로모션을 효과적으로 구현할 수 있도록 도와줍니다. 이 문서에서는 SDK 설치부터 초기화, 주요 기능 사용법까지 단계별로 안내합니다.

사전 요구사항

React Native 0.73 이상
iOS: iOS 13.0 이상
Android: API Level 24 이상
- Android는 SDK 버전 0.2.9 버전부터 지원됩니다.

1. SDK 설치

yarn
npm

yarn add @hayanmind/monetai-react-native

npm install @hayanmind/monetai-react-native

iOS 추가 설정

iOS 프로젝트에 다음 명령어를 실행하여 네이티브 모듈을 설치합니다:

cd ios && pod install

앱 재빌드

SDK 설치 후 앱을 재빌드해야 합니다:

iOS
Android

npx react-native run-ios

npx react-native run-android

2. SDK 초기화

기본 초기화

앱 시작 시 SDK를 초기화합니다. App.js 또는 메인 컴포넌트에서 다음과 같이 설정하세요:

import MonetaiSDK from "@hayanmind/monetai-react-native";

// 앱 시작 시 초기화
const initializeMonetai = async () => {
  try {
    const result = await MonetaiSDK.initialize({
      sdkKey: "YOUR_SDK_KEY", // Monetai 대시보드에서 발급받은 SDK 키
      userId: "USER_ID", // 사용자 고유 ID (필수)
      useStoreKit2: true, // iOS 15+ 기기에서 StoreKit2 사용 (권장)
    });

    console.log("Monetai SDK 초기화 완료:", result);
  } catch (error) {
    console.error("Monetai SDK 초기화 실패:", error);
  }
};

// App.js에서 호출
useEffect(() => {
  initializeMonetai();
}, []);

API 참조: `MonetaiSDK.initialize()`

파라미터

파라미터	타입	설명
sdkKey	string	Monetai에서 발급받은 SDK 키 (설정 > SDK 연동)
userId	string	사용자 고유 ID
useStoreKit2	boolean?	StoreKit2 사용 여부 (iOS 전용, 기본값: `false`)

반환값

반환값	타입	설명
organizationId	number	조직 ID
platform	'react_native'	플랫폼 정보
version	string	SDK 버전
userId	string	설정된 사용자 ID
group	ABTestGroup \| null	A/B 테스트 그룹

ABTestGroup 타입

값	설명
monetai	프로모션이 자동 적용되는 실험군
baseline	프로모션이 적용되지 않는 대조군
unknown	캠페인에 포함되지 않은 유저
null	현재 캠페인이 존재하지 않는 경우

3. 이벤트 로깅

사용자의 행동을 추적하여 구매 전환율을 예측하고 분석하기 위해 커스텀 이벤트를 기록할 수 있습니다. 해당 이벤트를 바탕으로 구매자 예측 모델이 생성됩니다.

import MonetaiSDK from "@hayanmind/monetai-react-native";

await MonetaiSDK.logEvent({
  eventName: "app_in",
});

초기화 전 이벤트 처리

초기화 전에 발생한 이벤트는 큐에 저장되며, 초기화 이후 자동으로 전송됩니다.

API 참조: `MonetaiSDK.logEvent()`

파라미터

파라미터	타입	설명
eventName	string	이벤트 이름

4. 구매자 예측

원하는 시점에 다음 함수를 호출하여 유저가 구매 가능성이 있는지 예측할 수 있습니다:

import MonetaiSDK from "@hayanmind/monetai-react-native";

const predictUserPurchase = async () => {
  try {
    const result = await MonetaiSDK.predict();

    console.log("예측 결과:", result.prediction);
    console.log("테스트 그룹:", result.testGroup);

    if (result.prediction === "non-purchaser") {
      // 비구매자로 예측된 경우 할인 제공
      console.log("비구매자로 예측됨 - 할인 적용 가능");
    } else if (result.prediction === "purchaser") {
      // 구매자로 예측된 경우
      console.log("구매자로 예측됨 - 할인 불필요");
    }
  } catch (error) {
    console.error("예측 실패:", error);
  }
};

API 참조: `MonetaiSDK.predict()`

반환값

반환값	타입	설명
prediction	PredictResult	예측 결과
testGroup	ABTestGroup	A/B 테스트 그룹

PredictResult 타입

값	설명
non-purchaser	구매하지 않을 것으로 예측
purchaser	구매할 것으로 예측
null	예측 불가 (모델 생성 전이나 시작된 캠페인 없을 때)

predict() 함수 사용 시 주의사항

1. 프로모션 중복 방지

이전에 predict()를 호출해서 프로모션이 활성화된 상태에서는 predict()를 여러 번 호출해도 새로운 프로모션이 시작되지 않습니다. onDiscountInfoChange에서 동일한 프로모션 정보만 반환됩니다.

2. 프로모션 재시작

프로모션 기간이 종료된 후에 predict()를 다시 호출하면, 사용자가 여전히 비구매자로 예측되는 경우 새로운 프로모션이 시작됩니다.

3. 유료 구독 사용자 제외

이미 유료 구독 중인 사용자에게는 프로모션을 제공하지 않으려면, 해당 사용자에 대해서는 predict() 함수를 호출하지 마세요.

5. 할인 정보 구독 및 UI 갱신 처리

predict() 호출 결과로 사용자가 비구매자로 예측되면, 고객에게 할인을 제공하기 위한 정보를 MonetaiProvider를 통해 제공합니다.

커스텀 프로모션 화면 구현

중요: DiscountInfo의 startedAt과 endedAt 정보를 사용해서 프로모션 화면을 표시하는 로직은 직접 구현해야 합니다. SDK는 할인 타이밍 정보만 제공하며, 실제 UI 컴포넌트와 프로모션 화면 로직은 개발자가 구현해야 합니다.

할인 정보의 startedAt과 endedAt 값은 프로모션의 유효 기간을 나타냅니다. 이 타임스탬프를 사용해서:

유효 기간 동안만 프로모션 화면을 표시
기간이 만료되면 프로모션 화면을 숨김

import MonetaiSDK, { MonetaiProvider } from "@hayanmind/monetai-react-native";

const App = () => {
  const [discountInfo, setDiscountInfo] = useState(null);

  const handleDiscountInfoChange = (newDiscountInfo) => {
    setDiscountInfo(newDiscountInfo);

    if (newDiscountInfo) {
      // 할인 정보가 있을 때 UI 업데이트
      const now = new Date();
      const endTime = new Date(newDiscountInfo.endedAt);

      if (now < endTime) {
        // 할인이 유효한 경우
        showDiscountBanner(newDiscountInfo);
      }
    } else {
      // 할인 정보가 없을 때
      hideDiscountBanner();
    }
  };

  const showDiscountBanner = (info) => {
    // 할인 배너 표시 로직
    console.log("할인 배너 표시:", info);
  };

  const hideDiscountBanner = () => {
    // 할인 배너 숨김 로직
    console.log("할인 배너 숨김");
  };

  return (
    <MonetaiProvider onDiscountInfoChange={handleDiscountInfoChange}>
      {/* 앱 컴포넌트들 */}
      {discountInfo && <DiscountBanner discountInfo={discountInfo} />}
    </MonetaiProvider>
  );
};

할인 정보 콜백 활용

이 콜백은 앱 실행 시 유효한 할인 정보가 있거나 predict() 함수 호출 후 새로운 할인 정보가 생성될 때 호출됩니다. 이를 활용해 할인 배너를 표시하거나 가격 정보를 실시간으로 갱신할 수 있습니다.

API 참조: `MonetaiProvider`

Props

Props	타입	설명
children	ReactNode	자식 컴포넌트들
onDiscountInfoChange	(discountInfo: DiscountInfo \| null) => void	할인 정보 변경 콜백

DiscountInfo 타입

속성	타입	설명
startedAt	Date	할인 시작 시간
endedAt	Date	할인 종료 시간
userId	string	사용자 ID
sdkKey	string	SDK 키

6. SDK Reset

사용자가 로그아웃 할 때 SDK를 초기화 합니다.

import MonetaiSDK from "@hayanmind/monetai-react-native";

// 사용자 로그아웃 시
const logoutUser = async () => {
  try {
    await MonetaiSDK.reset();
    console.log("사용자 로그아웃 완료");
  } catch (error) {
    console.error("사용자 로그아웃 실패:", error);
  }
};

다음 단계

SDK 설정이 완료되면 다음 단계로 진행하세요:

모델 생성: AI 모델 생성 과정 확인
캠페인 시작: 첫 번째 프로모션 캠페인 시작

지원

SDK 통합 과정에서 문제가 발생하면 support@monetai.io에 문의해 주세요.

사전 요구사항​

1. SDK 설치​

iOS 추가 설정​

앱 재빌드​

2. SDK 초기화​

기본 초기화​

API 참조: MonetaiSDK.initialize()​

3. 이벤트 로깅​

API 참조: MonetaiSDK.logEvent()​

4. 구매자 예측​

API 참조: MonetaiSDK.predict()​

5. 할인 정보 구독 및 UI 갱신 처리​

API 참조: MonetaiProvider​

6. SDK Reset​

다음 단계​

지원​