메인 콘텐츠로 건너뛰기
노티플라이 React Native SDK는 React Native 앱에 노티플라이 서비스를 연동하기 위한 SDK입니다. 아래 기능을 제공합니다:
  • 기기 정보를 노티플라이에 등록하여 푸시 알림 수신 및 인앱 팝업 노출 (인앱 팝업은 Foreground 상태에서만 표시됩니다)
  • 이벤트 및 유저 정보를 노티플라이와 연동하여 캠페인 타깃팅 및 분석 활용
  • 유저 행동 데이터를 기반으로 한 이벤트 로깅 및 성과 측정

시작하기 전에

SDK를 설치하기 전, 아래 과정을 반드시 완료하세요.
  1. Firebase 프로젝트 연동 완료
    노티플라이 iOS SDK는 푸시 발송을 위해 Firebase Cloud Messaging을 사용합니다.
👉 Firebase 프로젝트 연동 가이드
  1. iOS APNs 인증 등록
👉 APNs 인증서 등록
  • iOS는 .xcworkspace 파일을 반드시 Xcode로 열어야 정상적으로 빌드됩니다.

1. SDK 설치

SDK 설치

notifly-sdk npm를 설치합니다. 현재 최신 버전은 아래와 같습니다:Npm
npm install notifly-sdk@latest --save
cd ios && pod install
package.json 파일에 notifly-sdk가 추가됩니다.

iOS 설정

1. Capability 설정

  1. Xcode에서 {Your_Project_Name}.xcworkspace을 엽니다. (.xcodeproj로는 노티플라이 SDK 사용 불가)
  2. iOS Deployment Target/Target의 Minimum Deployments을 13.0 이상으로 설정하고, Podfile의 최소 버전도 동일하게 지정합니다.
  3. Push Notification 및 Background Mode (Remote notification, Background fetch)를 활성화합니다. Add Capabilities Add Capabilities

2. AppDelegate.mm 설정

  1. 파일 위치
AppDelegate.mm 파일은 다음 경로에 있습니다:
ios/{ProjectName}/AppDelegate.mm
  1. notifly_sdk import 추가
#import "notifly_sdk-Swift.h"
  1. UNUserNotificationCenterDelegate 프로토콜 추가
AppDelegate.h에서 AppDelegate 클래스가 UNUserNotificationCenterDelegate를 구현하도록 수정합니다.
header
#import <RCTAppDelegate.h> 
#import <UIKit/UIKit.h> 
#import <UserNotifications/UNUserNotificationCenter.h>

@interface AppDelegate : RCTAppDelegate <UNUserNotificationCenterDelegate>

@end
  1. AppDelegate 메서드 수정
AppDelegate.mm 내 메서드(AppDelegate method)에 노티플라이 관련 코드를 추가합니다.
메서드 이름설명
application:didFinishLaunchingWithOptions:Firebase 초기화 및 Notification Center delegate 설정
application:didRegisterForRemoteNotificationsWithDeviceToken:APNs 토큰을 노티플라이에 등록
application:didFailToRegisterForRemoteNotificationsWithError:APNs 등록 실패 시 노티플라이에 알림
userNotificationCenter:didReceiveNotificationResponse:푸시 알림 클릭 이벤트 전달
userNotificationCenter:willPresentNotification:Foreground 상태의 푸시 표시 처리
AppDelegate.mm
#import <Firebase.h>
#import <React/RCTBundleURLProvider.h>
#import "AppDelegate.h"
#import "notifly_sdk-Swift.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
    /* Your Code */
    [FIRApp configure];
    UNUserNotificationCenter *center = [UNUserNotificationCenter currentNotificationCenter];
    center.delegate = self;
    [[UIApplication sharedApplication] registerForRemoteNotifications];
    /* Your Code */
}

- (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken {
    /* Your Code */
    [Notifly application:application didRegisterForRemoteNotificationsWithDeviceToken:deviceToken];
    /* Your Code */
}

- (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error {
    /* Your Code */
    [Notifly application:application didFailToRegisterForRemoteNotificationsWithError:error];
    /* Your Code */
}

- (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler {
    /* Your Code */
    [Notifly userNotificationCenter:center didReceive:response];
    completionHandler();
    /* Your Code */
}

- (void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions options))completionHandler {
    /* Your Code */
   [Notifly userNotificationCenter:center willPresent:notification withCompletionHandler:completionHandler];
    /* Your Code */
}

/* Your Code */
@end

(권장) iOS Notification Service Extension 설정

notifly-sdk 버전 1.3.0 이상부터 지원됩니다.
Notification Service Extension을 설정하면 리치 푸시(Rich Push) 기능을 사용할 수 있습니다. 노티플라이의 Push Extension 가이드를 참고해 설정하세요.

주요 기능

  1. 푸시 알림에 이미지 및 비디오 첨부 가능
  2. 유저의 푸시 수신 여부를 추적하여 캠페인 성과를 세부적으로 분석 가능
Notification Service Extension 설정을 하지 않아도 SDK는 정상 동작하지만, 리치 푸시 및 수신 트래킹은 사용할 수 없습니다.

초기화 코드 추가

앱 진입점(index.js 또는 App.js)에 초기화 코드를 추가합니다.
index.js
...
import notifly from 'notifly-sdk';

/* Your Code */

notifly.initialize({
  projectId: 'myProjectId',
  username: 'myUserName',
  // `password`는 과거 호환용 placeholder입니다. 실제 비밀번호나 API Secret Key를 넣지 마세요.
  password: 'myUserName',
});

/* Your Code */

AppRegistry.registerComponent(...);
projectId, username은 설정 페이지에서 확인할 수 있습니다. password는 과거 호환용 placeholder이므로 실제 비밀번호나 API Secret Key를 입력하지 말고, username과 동일한 비어 있지 않은 값을 전달하세요.

2. 유저 정보 등록

노티플라이는 유저 식별자(userId)와 유저 프로퍼티(params)를 기반으로 개인화 마케팅 캠페인을 수행합니다.
등록된 유저 정보는 세그먼트 분류, 푸시 발송, 이메일 및 카카오 알림톡 등의 타깃팅에 활용됩니다.

1. 유저 ID 등록 (Notifly.setUserId())

userId는 앱 내부의 로그인 유저 식별자와 매핑됩니다.
노티플라이는 이 값을 기준으로 유저 이벤트를 추적하고 캠페인을 개인화합니다.

Parameters

userId
String
필수
로그인 유저 ID. 로그아웃 시 null로 설정하여 해제
notifly.setUserId(userId);

유저 ID 해제

로그아웃 시에는 setUserId(null)을 호출하여 유저 등록을 해제하는 것이 권장됩니다. 이 호출은 현재 기기와 유저 간 연결을 해제합니다. 따라서, 동일한 유저 데이터를 유지하려면 서버 또는 앱 내부에서 별도로 관리해야 합니다.
setUserId
const handleLogin = () => {
    ...
    notifly.setUserId('example_user_id'); // 유저 ID 등록
    ...
}

const handleLogout = () => {
    ...
    notifly.setUserId(); // 유저 ID 등록 해제
    ...
}

2. 유저 프로퍼티 등록

setUserProperties는 유저의 속성 정보를 등록합니다.
이 정보는 세그먼트 타깃팅, 메시지 개인화, 발송 채널 선택 등에 사용됩니다.
notifly.setUserProperties(params);
param
Object
필수
유저 속성 key-value 쌍. $email, $phone_number, $line_user_id 등 사전 정의된 키 지원
  • $email : 이메일 캠페인용 주소
  • $phone_number : 문자/카카오 캠페인용 전화번호
  • $line_user_id : LINE 메시지 캠페인용 LINE User ID
  • 기타 커스텀 필드: "plan", "tier", "country" 등 자유롭게 설정 가능
setUserProperties
const handleRejectPushNotification = () => {
    ...
    notifly.setUserProperties({
        "push_subscription_channel1": false,
        "push_subscription_channel2": false,
        "push_subscription_channel3": false,
    });
    ...
}

3. 이벤트 로깅

유저 행동을 기록하여 캠페인 트리거, 세그먼트 조건, 성과 분석 등에 활용할 수 있습니다.
예를 들어 버튼 클릭, 페이지 진입, 구매 완료 같은 유저 행동을 이벤트로 수집합니다.
notifly.trackEvent(eventName, eventParams, segmentationEventParamKeys);

Parameters

eventName
String
필수
이벤트 이름 (예: “click_button”, “purchase_completed”)
eventParams
Object
이벤트에 대한 추가 속성. 예: “plan”: “premium”, “duration”: 120
segmentationEventParamKeys
List<String>
세그먼트 분류 시 기준으로 사용할 키 목록 (최대 1개까지 지원)
segmentationEventParamKeys를 활용하여 이벤트 변수 (eventParams)를 발송 대상 설정 등에 활용할 수 있습니다. 최대 1개의 Key만 지정할 수 있습니다.
trackEvent
const handlePurchaseTicket = () => {
    ...
    notifly.trackEvent(
      "ticket_purchase", 
      {
        "show_id": "sample_show_id",
        "performance_start_time": 1674104659
      }, 
      ["show_id"]
    );
    ...
}

const handleLogin = () => {
    ...
    notifly.trackEvent("login");
    ...
}

4. 연동 테스트

SDK 설치 후 아래 페이지에서 실제 이벤트 및 푸시 수신 여부를 테스트하세요.
👉 SDK 연동 Test

5. 심화 연동

푸시 알림 사전 동의

푸시 알림 클릭 이벤트 구독

FAQ

노티플라이 Android SDK는 기존 앱에서 사용하고 있을 수 있는 Firebase Cloud Messaging과 함께 사용하실 수 있습니다.
Podfile에 use_frameworks! :linkage => :static 라인을 추가하여 Static Linking을 시도해주세요. (기존에 use_frameworks! 라인이 존재한다면, :linkage => :static 옵션만 추가해주세요.)
Firebase Messaging을 이미 사용하시고 계시다면, firebase.json 파일에 아래 안내에 따라 설정해주세요.React Native Firebase의 Foreground Presentation Options의 가이드에 따라 firebase.json 파일에 다음 코드를 추가해주세요.
{
  "react-native": {
    "messaging_ios_foreground_presentation_options": [
      "badge",
      "sound",
      "list",
      "banner"
    ]
  }
}
  • notifly_sdk(ios)는 Swift로 작성되어 있습니다. 이에 Objective-C 환경으로 노출시키기 위해 빌드되는 과정에서 Swift Compatibility Header가 생성되는데, 이 헤더 파일의 이름이 notifly_sdk-Swift.h입니다. 빌드를 진행하고자 하는 타겟의 Builld Option의 Header Search Paths에 ”$“를 추가해주세요.
  • 참고