React Native 연동

이 페이지에서는 React Native SDK 에 Push Notification 설치를 안내합니다.

사전 작업

Push Notification을 설정하려면 Flutter SDK 연동이 필요합니다. 다음 가이드를 완료 후 진행해주세요.

React Native SDK

1. 푸시 권한 요청 (선택)

SDK가 제공하는 함수로 플랫폼 공통 푸시 권한 요청 및 등록을 진행할 수 있습니다. 푸시 권한 설정에 다른 솔루션을 사용하거나 직접 관리중일 경우 생략해주세요.

import React, {useEffect} from 'react';
import Marketap from 'react-native-marketap-sdk';

const PROJECT_KEY = 'YOUR_PROJECT_KEY';

export default function App() {
  useEffect(() => {
    const initialize = async () => {
        try {
          await Marketap.initialize(PROJECT_KEY);
          await Marketap.requestAuthorizationForPushNotifications();
        } catch (error) {
          console.error('Marketap setup failed:', error);
        }
      };

      initialize();
  }, []);

  return null;
}

2. iOS

사전 작업

1. Xcode 설정 가이드에 따라 Runner.xcworkspace의 Runner 프로젝트에 Push Capabilities, Notification Service Extension을 추가합니다.

2.1 AppDelegate 연동 코드 추가

앱 푸시 설정을 위해 UNUserNotificationCenterDelegate 를 추가하고 SDK 와 연동해줍니다. 이미 사용중인 UNUserNotificationCenterDelegate 가 있다면 동일하게 사용 가능합니다.

예시에서는 AppDelegate에 UNUserNotificationCenterDelegate를 채택하고 사용하겠습니다.

Swift

import UIKit
import UserNotifications
import React
import MarketapSDK

@main
class AppDelegate: RCTAppDelegate, UNUserNotificationCenterDelegate {
    override func application(
        _ application: UIApplication,
        didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? = nil
    ) -> Bool {
        // delegate 추가
        UNUserNotificationCenter.current().delegate = self
        return super.application(application, didFinishLaunchingWithOptions: launchOptions)
    }

    override func application(
        _ application: UIApplication,
        didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data
    ) {
        // ...
        // 푸시 토큰 등록
        Marketap.setPushToken(token: deviceToken)
    }
    
    func userNotificationCenter(
        _ center: UNUserNotificationCenter,
        willPresent notification: UNNotification,
        withCompletionHandler completionHandler: @escaping (UNNotificationPresentationOptions) -> Void
    ) {
        // ...
        // active 상태 노티피케이션 수신 핸들링 추가
        if Marketap.userNotificationCenter(center, willPresent: notification, withCompletionHandler: completionHandler) {
            return
        }
        // ...
    }
    
    func userNotificationCenter(
        _ center: UNUserNotificationCenter,
        didReceive response: UNNotificationResponse,
        withCompletionHandler completionHandler: @escaping () -> Void
    ) {
        // ...
        // 푸시 클릭 핸들링 추가
        if Marketap.userNotificationCenter(center, didReceive: response, withCompletionHandler: completionHandler) {
            return
        }
        // ...
    }
}

Objective-C (AppDelegate.h)

Objective-C (AppDelegate.mm)

2.2 NotificationServiceExtension 설정

1.2 Notification Service Extension 추가 에서 설정한 NotificationServiceExtension용 sdk를 설치해야합니다. ios/Podfile 에 다음과 같이 추가합니다.

target 'Runner' do
  ...
  # 추가한 NotificationServiceExtension 타겟 이름을 넣어주세요.
  target 'DummyNotificationServiceExtension' do
    inherit! :search_paths
    pod 'MarketapSDKNotificationServiceExtension', '1.0.9'
  end
end

pod install 이후, 3.3 Notification Service Extension 연동하기 문서를 참고하여 설정을 완료합니다.

3. Android

사전 작업

Marketap Android SDK는 Jitpack을 통해 배포되고 있습니다. React Native 프로젝트의 android 디렉토리 최상단 build.gradle 파일에 아래 repository를 추가해주세요.

buildscript {
      repositories {
          google()
          mavenCentral()
          maven { url = uri("https://jitpack.io") }
      }
  }

이어서, AndroidManifest.xml 파일에 아래 권한들을 추가합니다. 각각 푸시 발송, 이벤트 및 유저정보 수집을 목적으로 합니다.

<uses-permission android:name="android.permission.POST_NOTIFICATIONS" />
<uses-permission android:name="android.permission.INTERNET" />

3.1 푸시 연동

Marketap은 안드로이드 푸시를 지원하기 위해서 Firebase Cloud Messaging을 사용하고 있습니다. 따라서 Flutter 프로젝트의 안드로이드 의존성에 Firebase가 추가되어야 합니다. 자세한 내용은 구글의 가이드 문서를 참고해주세요.

푸시를 수신하기 위해서는 FirebaseMessagingService 설정이 필요합니다.

신규 연동

Marketap은 FCM 기반 푸시 메시지를 수신하고 클릭을 처리하기 위한 전용 서비스를 제공합니다. MarketapFirebaseMessagingService 클래스를 AndroidManifest.xml 파일에 등록해 주세요.

<service
    android:name="com.marketap.sdk.client.push.MarketapFirebaseMessagingService"
    android:exported="false">
    <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT" />
    </intent-filter>
</service>

기존 서비스와 함께 사용

4. 클릭 액션 커스텀하기 (선택)

푸시 캠페인에 클릭 액션 URL이 설정되어 있는 경우, 마켓탭 SDK는 OS별 기본 동작으로 URL을 처리합니다.

OS별 동작은 아래 링크를 참고해주세요.

• ios: 4. 클릭 액션 커스텀하기 (선택)

• android: 5. 클릭 액션 커스텀하기 (선택)

이 기본 동작을 비활성화하고 클릭 시 액션을 직접 제어하려면, 아래 페이지 안내에 따라 clickHandler 기반 커스텀 연동을 진행해주세요.

커스텀 클릭 핸들러

5. 이어서 진행하기

이제 Push Notification 연동이 완료되었습니다. 아래 문서에서 이어서 진행해주세요.

Push Notification 테스트

In-App Campaign 테스트

심화 연동