Skip to content

초기 SDK 설정

이 참조 문서에서는 React Native용 Braze SDK를 설치하는 방법을 설명합니다. Braze React Native SDK를 설치하면 기본적인 분석 기능을 제공하며, 이를 통해 하나의 코드베이스에서 iOS 및 Android용 인앱 메시지와 콘텐츠 카드를 통합할 수 있습니다.

전제 조건 및 호환성

이 SDK를 설정하려면 React Native v0.71 이상이 필요합니다. 지원되는 버전의 전체 목록은 React Native SDK GitHub 리포지토리를 참조하세요.

React Native 새로운 아키텍처 지원

새로운 아키텍처에서 Braze 사용

Braze React Native SDK는 SDK 버전 2.0.1 이상부터 React Native New Architecture을 사용하는 모든 앱과 호환됩니다.

SDK 버전 6.0.0부터 Braze는 내부적으로 React Native Turbo Module로 업그레이드되었으며, 여전히 새로운 아키텍처나 기존 브리지 아키텍처와 함께 사용할 수 있습니다. Turbo Module은 역호환성도 지원하므로 체인지로그에 언급된 주요 변경 사항과 React Native v0.70 이상의 요구 사항 외에는 마이그레이션 단계가 필요하지 않습니다.

1단계: Braze 라이브러리 통합

1

npm install @braze/react-native-sdk

1

yarn add @braze/react-native-sdk

2단계: 기본 설정 완료

2.1 단계: Braze Expo 플러그인을 설치하십시오

Braze React Native SDK 버전이 1.37.0 이상인지 확인합니다. 그런 다음, Braze Expo 플러그인을 설치합니다.

1

expo install @braze/expo-plugin

2.2 단계: 플러그인을 app.json에 추가하세요

귀하의 app.json에 Braze Expo 플러그인을 추가하십시오. 다음 구성 옵션을 제공할 수 있습니다:

예시 구성:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

{
  "expo": {
    "plugins": [
      [
        "@braze/expo-plugin",
        {
          "androidApiKey": "YOUR-ANDROID-API-KEY",
          "iosApiKey": "YOUR-IOS-API-KEY",
          "baseUrl": "YOUR-SDK-ENDPOINT",
          "sessionTimeout": 60,
          "enableGeofence": false,
          "enableBrazeIosPush": false,
          "enableFirebaseCloudMessaging": false,
          "firebaseCloudMessagingSenderId": "YOUR-FCM-SENDER-ID",
          "androidHandlePushDeepLinksAutomatically": true,
          "enableSdkAuthentication": false,
          "logLevel": 0,
          "minimumTriggerIntervalInSeconds": 0,
          "enableAutomaticLocationCollection": false,
          "enableAutomaticGeofenceRequests": false,
          "dismissModalOnOutsideTap": true,
          "androidPushNotificationHtmlRenderingEnabled": true,
          "androidNotificationAccentColor": "#ff3344",
          "androidNotificationLargeIcon": "@drawable/custom_app_large_icon",
          "androidNotificationSmallIcon": "@drawable/custom_app_small_icon",
          "iosRequestPushPermissionsAutomatically": false,
          "enableBrazeIosPushStories": true,
          "iosPushStoryAppGroup": "group.com.example.myapp.PushStories"
        }
      ],
    ]
  }
}

2.3 단계: 애플리케이션 빌드 및 실행

애플리케이션을 미리 빌드하면 Braze SDK가 작동하는 데 필요한기본 파일이 생성됩니다.

1

expo prebuild

Expo 문서에 지정된 대로, 애플리케이션을 실행합니다. 구성 옵션을 변경하면 애플리케이션을 다시 빌드하고 실행해야 합니다.

2.1 단계: 리포지토리 추가

상위 수준 프로젝트 build.gradle에서 buildscript > dependencies 아래에 다음을 추가합니다.

1
2
3
4
5
6
7

buildscript {
    dependencies {
        ...
        // Choose your Kotlin version
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.10")
    }
}

그러면 프로젝트에 Kotlin이 추가됩니다.

2.2 단계: Braze SDK 구성

Braze 서버에 연결하려면 프로젝트의 res/values 폴더에서 braze.xml 파일을 생성합니다. 다음 코드를 붙여넣고 API 키 및 엔드포인트를 값으로 바꾸세요:

1
2
3
4
5

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="com_braze_api_key">YOU_APP_IDENTIFIER_API_KEY</string>
<string translatable="false" name="com_braze_custom_endpoint">YOUR_CUSTOM_ENDPOINT_OR_CLUSTER</string>
</resources>

AndroidManifest.xml 파일에 필요한 권한을 추가합니다:

1
2

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

2.3단계: 사용자 세션 추적 구현

openSession() 및 closeSession()에 대한 호출은 자동으로 처리됩니다. onCreate() 메서드에 다음 코드를 추가하십시오: MainApplication 클래스:

1
2
3
4
5
6
7
8

import com.braze.BrazeActivityLifecycleCallbackListener;

@Override
public void onCreate() {
    super.onCreate();
    ...
    registerActivityLifecycleCallbacks(new BrazeActivityLifecycleCallbackListener());
}

1
2
3
4
5
6
7

import com.braze.BrazeActivityLifecycleCallbackListener

override fun onCreate() {
    super.onCreate()
    ...
    registerActivityLifecycleCallbacks(BrazeActivityLifecycleCallbackListener())
}

2.4 단계: 의도 업데이트 처리

MainActivity에서 android:launchMode가 singleTask로 설정된 경우, MainActivity 클래스에 다음 코드를 추가합니다.

1
2
3
4
5

@Override
public void onNewIntent(Intent intent) {
    super.onNewIntent(intent);
    setIntent(intent);
}

1
2
3
4

override fun onNewIntent(intent: Intent) {
    super.onNewIntent(intent)
    setIntent(intent)
}

2.1 단계: (선택 사항) 동적 XCFrameworks용 Podfile 구성

특정 Braze 라이브러리(예: BrazeUI)를 Objective-C++ 파일에 가져오려면 #import 구문을 사용해야 합니다. Braze Swift SDK의 버전 7.4.0부터 바이너리는 이 구문과 호환되는 동적 XCFrameworks로 선택적 배포 채널을 사용합니다.

이 배포 채널을 사용하려면 Podfile에서 CocoaPods 소스 위치를 수동으로 재정의합니다. 샘플을 참조하고 {your-version}을 가져오려는 관련 버전으로 바꿉니다.

1
2
3

pod 'BrazeKit', :podspec => 'https://raw.githubusercontent.com/braze-inc/braze-swift-sdk-prebuilt-dynamic/{your-version}/BrazeKit.podspec'
pod 'BrazeUI', :podspec => 'https://raw.githubusercontent.com/braze-inc/braze-swift-sdk-prebuilt-dynamic/{your-version}/BrazeUI.podspec'
pod 'BrazeLocation', :podspec => 'https://raw.githubusercontent.com/braze-inc/braze-swift-sdk-prebuilt-dynamic/{your-version}/BrazeLocation.podspec'

2.2 단계: 포드 설치

React Native는 라이브러리를 기본 플랫폼에 자동으로 연결하므로 CocoaPods를 사용하여 SDK를 설치할 수 있습니다.

프로젝트의 루트 폴더에서:

1
2
3
4
5

# To install using the React Native New Architecture
cd ios && RCT_NEW_ARCH_ENABLED=1 pod install

# To install using the React Native legacy architecture
cd ios && pod install

2.3 단계: Braze SDK 구성

AppDelegate.swift 파일 맨 위에서 Braze SDK를 가져옵니다.

1

import BrazeKit

application(_:didFinishLaunchingWithOptions:) 메서드에서 API 키 및 엔드포인트를 앱의 값으로 바꾸십시오. 그런 다음 구성을 사용하여 Braze 인스턴스를 생성하고 AppDelegate 에 정적 속성을 생성하여 쉽게 액세스할 수 있도록 합니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil
) -> Bool {
    // Setup Braze
    let configuration = Braze.Configuration(
        apiKey: "{BRAZE_API_KEY}",
        endpoint: "{BRAZE_ENDPOINT}")
    // Enable logging and customize the configuration here.
    configuration.logger.level = .info
    let braze = BrazeReactBridge.perform(
      #selector(BrazeReactBridge.initBraze(_:)),
      with: configuration
    ).takeUnretainedValue() as! Braze

    AppDelegate.braze = braze

    /* Other configuration */

    return true
}

// MARK: - AppDelegate.braze

static var braze: Braze? = nil

AppDelegate.m 파일 맨 위에서 Braze SDK를 가져옵니다.

1
2

#import <BrazeKit/BrazeKit-Swift.h>
#import "BrazeReactBridge.h"

application:didFinishLaunchingWithOptions: 메서드에서 API 키 및 엔드포인트를 앱의 값으로 바꾸십시오. 그런 다음 구성을 사용하여 Braze 인스턴스를 생성하고 AppDelegate 에 정적 속성을 생성하여 쉽게 액세스할 수 있도록 합니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // Setup Braze
  BRZConfiguration *configuration = [[BRZConfiguration alloc] initWithApiKey:@"{BRAZE_API_KEY}"
                                                                    endpoint:@"{BRAZE_ENDPOINT}"];
  // Enable logging and customize the configuration here.
  configuration.logger.level = BRZLoggerLevelInfo;
  Braze *braze = [BrazeReactBridge initBraze:configuration];
  AppDelegate.braze = braze;

  /* Other configuration */

  return YES;
}

#pragma mark - AppDelegate.braze

static Braze *_braze = nil;

+ (Braze *)braze {
  return _braze;
}

+ (void)setBraze:(Braze *)braze {
  _braze = braze;
}

3단계: 사용량

설치가 완료되면 React Native 코드에서 라이브러리 import 작업을 수행할 수 있습니다.

1

import Braze from "@braze/react-native-sdk";

자세한 내용은 샘플 프로젝트를 참조하십시오.

기본 통합을 테스트하십시오

이 시점에서는 대시보드에서 세션 통계를 확인하여 SDK가 통합되었는지 확인할 수 있습니다. 어느 플랫폼에서든 애플리케이션을 실행하면 대시보드( 개요 섹션)에 새 세션이 표시됩니다.

특정 사용자를 위한 세션을 시작하려면 앱에서 다음 코드를 호출하십시오.

1

Braze.changeUser("userId");

예를 들어, 앱 시작 시 사용자 ID를 할당할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13

import React, { useEffect } from "react";
import Braze from "@braze/react-native-sdk";

const App = () => {
  useEffect(() => {
    Braze.changeUser("some-user-id");
  }, []);

  return (
    <div>
      ...
    </div>
  )

그런 다음, 대시보드의 사용자 검색에서 some-user-id로 사용자를 검색할 수 있습니다. 여기에서 세션 및 디바이스 데이터가 기록되었는지 확인할 수 있습니다.

Github   GitHub 에서 이 페이지를 편집합니다.
이 페이지가 얼마나 도움이 되었나요?
New Stuff!