본문으로 건너뛰기

Client SDK - React Native

Notifly React Native SDK는 노티플라이를 React Native 어플리케이션과 연동하기 위해 사용할 수 있습니다. 다음과 같은 기능들을 지원합니다:

  • 기기 정보를 노티플라이에 등록하여 노티플라이를 통해 발송된 앱 푸시, 인앱 팝업을 React Native 앱에서 수신할 수 있습니다.
    • 노티플라이의 인앱 팝업은 앱이 Foreground 상태일 때만 수신됩니다. Background 및 Quit 상태일 때는 무시됩니다.
  • 이벤트, 유저 정보를 노티플라이와 연동하여 모든 캠페인에서 활용할 수 있습니다.
  • 캠페인의 성과를 측정할 수 있도록 이벤트를 로깅합니다.

노티플라이에서는 푸시를 발송하기 위해 Firebase Cloud Messaging을 활용하고 있습니다. 다음 과정을 먼저 진행해주세요:

  1. Firebase 프로젝트 연동
  2. iOS APNs 인증 정보 설정

1. Notifly SDK 셋업​

1-1. Notifly SDK 설치​

패키지를 설치하기 위해, 다음을 실행해 주세요:

npm install notifly-sdk@latest --save
cd ios && pod install

yarn을 사용하시는 경우:

yarn add notifly-sdk@latest
cd ios && pod install

앱 패키지의 package.json 파일에 notifly-sdk가 추가됩니다. (현재 최신 버전: Npm)

1.2. iOS 설정​

1) Capability 설정​

  1. Xcode에서 {Your_Project_Name}.xcworkspace를 열어주세요.
  • Xcode에서 {Your_Project_Name}.xcworkspace를 열지 않고 {Your_Project_Name}.xcodeproj를 열어서 빌드하면, Notifly SDK를 사용할 수 없습니다.
  • {Your_Project_Name}.xcworspace는 Root 디렉토리의 ios 디렉토리에 있습니다.
  1. 대상 Project의 iOS Deployment Target과 Target의 Minimum Deployments iOS를 13.0 혹은 그 이상으로 설정합니다.
  • Podfile에서도 최소 버전을 13.0으로 설정해주세요.

  1. Push Notification Capability를 추가합니다. Add Capabilities

  2. Background Modes Capability를 추가합니다. - Remote notifications과 Background Fetch를 선택합니다. Add Capabilities

  3. AppDelegate.mm 파일을 열어서 다음 코드를 추가합니다.

  • AppDelegate.mm ios 디렉토리의 {ProjectName} 폴더에 있습니다.

  • notifly_sdk 프래임워크를 import 합니다.

#import "notifly_sdk-Swift.h"
  • AppDelegate.h에서 AppDelegate 클래스에 UNUserNotificationCenterDelegate 프로토콜을 추가합니다.
    • 아래 예시코드를 참고해주세요.
  • AppDelegate.mm의 AppDelegate method들에 Notifly코드를 추가해 주세요.
    1. (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
      • UNNotificationCenter의 delegate를 self로 설정합니다.
    2. (void)application:(UIApplication *)application didRegisterForRemoteNotificationsWithDeviceToken:(NSData *)deviceToken
      • APNs 토큰을 노티플라이에 등록합니다.
    3. (void)application:(UIApplication *)application didFailToRegisterForRemoteNotificationsWithError:(NSError *)error
      • APNs 토큰 등록에 실패한 경우, 노티플라이에 알립니다.
    4. (void)userNotificationCenter:(UNUserNotificationCenter *)center didReceiveNotificationResponse:(UNNotificationResponse *)response withCompletionHandler:(void (^)(void))completionHandler
      • 앱 푸시 알림 클릭 이벤트를, 노티플라이로 전달합니다.
    5. (void)userNotificationCenter:(UNUserNotificationCenter *)center willPresentNotification:(UNNotification *)notification withCompletionHandler:(void (^)(UNNotificationPresentationOptions))completionHandler
      • 앱이 Foreground 상태일 때, 노티플라이로부터 수신한 데이터를 SDK로 전달합니다.
Example Code of AppDelegate.h
#import <RCTAppDelegate.h>
#import <UIKit/UIKit.h>
#import <UserNotifications/UNUserNotificationCenter.h>

@interface AppDelegate : RCTAppDelegate <UNUserNotificationCenterDelegate>

@end

1-3. (권장) iOS Push Extension 설정​

SDK spec for Rich Push Notification

notifly-sdk: 3.0.4 버전 이상

  • Notifly의 안내에 따라, Notification Service Extension을 설정하시면 다음 기능들이 지원되기 때문에, 설정하시길 권장드립니다.
    1. 푸시 알림에 이미지 및 비디오를 첨부할 수 있습니다.
    2. 유저의 푸시 수신 여부를 확인할 수 있어, 캠페인 성과를 보다 자세하게 확인하실 수 있습니다.

1-4. Notifly SDK 초기화 코드 추가​

  • index.js 또는 App.js에서 Notifly SDK 초기화 코드를 추가해 주세요.
index.js
...
import notifly from 'notifly-sdk';

/* Your Code */

notifly.initialize({
  projectId: 'myProjectId',
  username: 'myUserName',
  password: 'myPassword',
});

/* Your Code */

AppRegistry.registerComponent(...);

프로젝트 ID, Username, Password 값은 노티플라이 홈페이지의 설정 페이지에서 확인하실 수 있습니다.

2. 유저 프로퍼티 등록하기​

  • 노티플라이에서는 유저의 아이디 (userId) 및 프로퍼티 (params)를 설정하여 마케팅 캠페인 집행 시에 활용할 수 있습니다.
    • 노티플라이에서는 채널 별 푸시 알림 수신 동의 여부를 유저 프로퍼티로 설정하여, 푸시 알림 전송 전에 필터링 할 수 있습니다.
    • 카카오 알림톡, 친구톡, 문자 발송을 위해서는 전화번호를 유저 프로퍼티로 설정해야 합니다.
    • 이메일 발송을 위해서는 이메일 주소를 유저 프로퍼티로 설정해야 합니다.
    • 전화번호와, 이메일의 프로퍼티 필드명은 꼭 각각 $phone_number, $email로 설정해 주세요.
    • Notifly SDK 초기화 코드 추가를 마친 후 프로퍼티 등록을 시작해 주세요.
    • (권장사항) 로그아웃 시 userId를 null로 하여 setUserId 호출함으로써 유저의 userId 등록을 해지해 주세요.
    • 유저 아이디 등록해지를 호출할 경우, 유저 프로퍼티 및 캠페인 피로도 관리 데이터 등 모든 유저 정보가 삭제됩니다.

2-1. 유저 아이디 등록​

ParameterTypeRequired
userIdStringYes
notifly.setUserId(userId);
Example Code of setUserId
const handleLogin = () => {
    ...
    notifly.setUserId('example_user_id'); // Set User Id
    ...
}

const handleLogout = () => {
    ...
    notifly.setUserId(); // Unregister User Id
    ...
}

2-2. 유저 프로퍼티 등록​

ParameterTypeRequired
paramsObjectYes
notifly.setUserProperties(params);
Example Code of setUserProperties
const handleRejectPushNotification = () => {
    ...
    notifly.setUserProperties({
        "push_subscription_channel1": false,
        "push_subscription_channel2": false,
        "push_subscription_channel3": false,
    });
    ...
}

3. 이벤트 로깅​

  • 노티플라이에서는 유저의 행동 등 이벤트를 트래킹하여 캠페인 집행 시 타겟팅에 활용할 수 있습니다. 트래킹 된 이벤트는 푸시 알림 발송 타이밍, 발송 대상 설정 등에 활용할 수 있습니다.
    • Notifly SDK 초기화 코드 추가를 마친 후 이벤트 로깅을 시작해 주세요.
  • segmentationEventParamKeys 활용하여 이벤트 변수 (eventParams)를 발송 대상 설정 등에 활용할 수 있습니다. 이를 위해서, 발송 대상 설정에 사용할 eventParams의 특정 field의 key 값을 segmentationEventParamKeys에 지정해주세요.
    • 현재는 segmentationEventParamKeys 한 개까지 지원하고 있기 때문에, segmentationEventParamKeys 길이는 1이하인 List이어야합니다.

3-1. 이벤트 로깅​

ParameterTypeRequired
eventNameStringYes
eventParamsObjectNo
segmentationEventParamKeysList<String>No
notifly.trackEvent(eventName, eventParams, segmentationEventParamKeys);
Example Code of trackEvent
const handlePurchaseTicket = () => {
    ...
    notifly.trackEvent("ticket_purchase", {
        "show_id": "sample_show_id",
        "performance_start_time": 1674104659
    }, ["show_id"]);
    ...
}

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

4. 연동 테스트​

Client SDK - 연동 Test 섹션에서 테스트를 진행합니다.

5. (Advanced) 푸시 알림 아이콘 등록 (Android) & 푸시 알림 동의 프롬프트​

(Advanced) Client SDK - React Native 를 참고해 주세요.

6. (Advanced) 푸시 알림 클릭 이벤트 구독​

(Advanced) Client SDK - React Native 를 참고해 주세요.

FAQ​

  • Q. 이미 Firebase Cloud Messaging을 사용 중인데 어떻게 해야 할까요?
    • A. Notifly SDK는 기존 앱에서 사용하고 있을 수 있는 Firebase Cloud Messaging과의 충돌을 방지하기 위한 처리를 이미 자체적으로 구현해 두었기 때문에 안전하게 사용하실 수 있습니다.
  • Q. Build시 AppDelegate.mm 파일에서 Notifly 클래스 관련 에러가 발생합니다.
    • A. Podfile에 use_frameworks! :linkage => :static 라인을 추가하여 Static Linking을 시도해주세요. (기존에 use_frameworks! 라인이 존재한다면, :linkage => :static 옵션만 추가해주세요.)
  • Q. iOS기기에서 Foreground 상태에서 푸시 알림이 오지 않습니다.
    • A. Firebase Messaging을 이미 사용하시고 계시다면, firebase.json 파일에 아래 안내에 따라 설정해주세요.
      {
        "react-native": {
          "messaging_ios_foreground_presentation_options": [
            "badge",
            "sound",
            "list",
            "banner"
          ]
        }
      }
  • Q. notifly_sdk-Swift.h 파일을 찾을 수 없다는 에러가 뜹니다. 어떻게 해야 할까요?
    • notifly_sdk(ios)는 Swift로 작성되어 있습니다. 이에 Objective-C 환경으로 노출시키기 위해 빌드되는 과정에서 Swift Compatibility Header가 생성되는데, 이 헤더 파일의 이름이 notifly_sdk-Swift.h입니다. 빌드를 진행하고자하는 타겟의 Builld Option의 Header Search Paths에 "${PODS_CONFIGURATION_BUILD_DIR}"를 추가해주세요.
    • 참고