Skip to content

Braze SDK 통합

Braze SDK를 모바일 앱에 통합하는 방법을 알아보세요. 각 SDK는 자체 공개 GitHub 리포지토리에서 호스팅되며, 여기에는 Braze 기능을 테스트하거나 자체 애플리케이션과 함께 구현하는 데 사용할 수 있는 완전히 빌드 가능한 샘플 앱이 포함되어 있습니다. 자세히 알아보려면 참조, 리포지토리 및 샘플 앱을 참조하세요. SDK에 대한 자세한 내용은 시작하기를 참조하세요: 통합 개요.

Integrating the Android SDK

Step 1: Update your build.gradle

In your build.gradle, add mavenCentral() to your list of repositories.

1
2
3
repositories {
  mavenCentral()
}

Next, add Braze to your dependencies.

If you don’t plan on using Braze UI components, add the following code to your build.gradle. Replace SDK_VERSION with the current version of your Android Braze SDK. For the full list of versions, see Changelogs.

1
2
3
4
dependencies {
    implementation 'com.braze:android-sdk-base:SDK_VERSION' // (Required) Adds dependencies for the base Braze SDK.
    implementation 'com.braze:android-sdk-location:SDK_VERSION' // (Optional) Adds dependencies for Braze location services.
}

If you plan on using Braze UI components later, add the following code to your build.gradle. Replace SDK_VERSION with the current version of your Android Braze SDK. For the full list of versions, see Changelogs.

1
2
3
4
dependencies {
    implementation 'com.braze:android-sdk-ui:SDK_VERSION' // (Required) Adds dependencies for the Braze SDK and Braze UI components. 
    implementation 'com.braze:android-sdk-location:SDK_VERSION' // (Optional) Adds dependencies for Braze location services.
}

Step 2: Configure your braze.xml

Create a braze.xml file in your project’s res/values folder. If you are on a specific data cluster or have a pre-existing custom endpoint, you need to specify the endpoint in your braze.xml file as well.

The contents of that file should resemble the following code snippet. Make sure to substitute YOUR_APP_IDENTIFIER_API_KEY with the identifier found in the Manage Settings page of the Braze dashboard. Log in at dashboard.braze.com to find your cluster address.

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="com_braze_api_key">YOUR_APP_IDENTIFIER_API_KEY</string>
<string translatable="false" name="com_braze_custom_endpoint">YOUR_CUSTOM_ENDPOINT_OR_CLUSTER</string>
</resources>

Step 3: Add permissions to AndroidManifest.xml

Next, add the following permissions to your AndroidManifest.xml:

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

Step 4: Enable user session tracking

When you enable user session tracking, calls to openSession(), closeSession(),ensureSubscribedToInAppMessageEvents(), and InAppMessageManager registration can be handled automatically.

To register activity lifecycle callbacks, add the following code to the onCreate() method of your Application class.

1
2
3
4
5
6
7
public class MyApplication extends Application {
  @Override
  public void onCreate() {
    super.onCreate();
    registerActivityLifecycleCallbacks(new BrazeActivityLifecycleCallbackListener());
  }
}
1
2
3
4
5
6
class MyApplication : Application() {
  override fun onCreate() {
    super.onCreate()
    registerActivityLifecycleCallbacks(BrazeActivityLifecycleCallbackListener())
  }
}

For the list of available parameters, see BrazeActivityLifecycleCallbackListener.

Testing session tracking

If you experience issues while testing, enable verbose logging, then use logcat to detect missing openSession and closeSession calls in your activities.

  1. In Braze, go to Overview, select your app, then in the Display Data For dropdown choose Today. The "Overview" page in Braze, with the "Display Data For" field set to "Today".
  2. Open your app, then refresh the Braze dashboard. Verify that your metrics have increased by 1.
  3. Navigate through your app and verify that only one session has been logged to Braze.
  4. Send the app to the background for at least 10 seconds, then bring it to the foreground. Verify that a new session was logged.

Optional configurations

Runtime configuration

To set your Braze options in code rather than your braze.xml file, use runtime configuration. If a value exists in both places, the runtime value will be used instead. After all required settings are supplied at runtime, you can delete your braze.xml file.

In the following example, a builder object is created and then passed to Braze.configure(). Note that only some of the available runtime options are shown—refer to our KDoc for the full list.

1
2
3
4
5
6
7
8
BrazeConfig brazeConfig = new BrazeConfig.Builder()
        .setApiKey("api-key-here")
        .setCustomEndpoint("YOUR_CUSTOM_ENDPOINT_OR_CLUSTER")
        .setSessionTimeout(60)
        .setHandlePushDeepLinksAutomatically(true)
        .setGreatNetworkDataFlushInterval(10)
        .build();
Braze.configure(this, brazeConfig);
1
2
3
4
5
6
7
8
val brazeConfig = BrazeConfig.Builder()
        .setApiKey("api-key-here")
        .setCustomEndpoint("YOUR_CUSTOM_ENDPOINT_OR_CLUSTER")
        .setSessionTimeout(60)
        .setHandlePushDeepLinksAutomatically(true)
        .setGreatNetworkDataFlushInterval(10)
        .build()
Braze.configure(this, brazeConfig)

Google Advertising ID

The Google Advertising ID (GAID) is an optional user-specific, anonymous, unique, and resettable ID for advertising, provided by Google Play services. GAID gives users the power to reset their identifier, opt-out of interest-based ads within Google Play apps, and provides developers with a simple, standard system to continue to monetize their apps.

The Google Advertising ID is not automatically collected by the Braze SDK and must be set manually via the Braze.setGoogleAdvertisingId() method.

1
2
3
4
5
6
7
8
9
10
11
new Thread(new Runnable() {
  @Override
  public void run() {
    try {
      AdvertisingIdClient.Info idInfo = AdvertisingIdClient.getAdvertisingIdInfo(getApplicationContext());
      Braze.getInstance(getApplicationContext()).setGoogleAdvertisingId(idInfo.getId(), idInfo.isLimitAdTrackingEnabled());
    } catch (Exception e) {
      e.printStackTrace();
    }
  }
}).start();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
suspend fun fetchAndSetAdvertisingId(
  context: Context,
  scope: CoroutineScope = GlobalScope
) {
  scope.launch(Dispatchers.IO) {
    try {
      val idInfo = AdvertisingIdClient.getAdvertisingIdInfo(context)
      Braze.getInstance(context).setGoogleAdvertisingId(
        idInfo.id,
        idInfo.isLimitAdTrackingEnabled
      )
    } catch (e: Exception) {
      e.printStackTrace()
    }
  }
}

Location tracking

To enable Braze location collection, set com_braze_enable_location_collection to true in your braze.xml file:

1
<bool name="com_braze_enable_location_collection">true</bool>

Logging

By default, the Braze Android SDK log level is set to INFO. You can suppress these logs or set a different log level, such as VERBOSE, DEBUG, or WARN.

Enabling logs

To help troubleshoot issues in your app, or reduce turnaround times with Braze Support, you’ll want to enable verbose logs for the SDK. When you send verbose logs to Braze Support, ensure they begin as soon as you launch your application and end far after your issue occurs.

Keep in mind, verbose logs are only intended for your development environment, so you’ll want to disable them before releasing your app.

To enable logs directly in your app, add the following to your application’s onCreate() method before any other methods.

1
BrazeLogger.setLogLevel(Log.MIN_LOG_LEVEL);
1
BrazeLogger.logLevel = Log.MIN_LOG_LEVEL

Replace MIN_LOG_LEVEL with the Constant of the log level you’d like to set as your minimum log level. Any logs at a level >= to your set MIN_LOG_LEVEL will be forwarded to Android’s default Log method. Any logs < your set MIN_LOG_LEVEL will be discarded.

For example, the following code will forward log levels 2, 3, 4, 5, 6, and 7 to the Log method.

1
BrazeLogger.setLogLevel(Log.VERBOSE);
1
BrazeLogger.logLevel = Log.VERBOSE

To enable logs in the braze.xml, add the following to your file:

1
<integer name="com_braze_logger_initial_log_level">MIN_LOG_LEVEL</integer>

Replace MIN_LOG_LEVEL with the Value of the log level you’d like to set as your minimum log level. Any logs at a level >= to your set MIN_LOG_LEVEL will be forwarded to Android’s default Log method. Any logs < your set MIN_LOG_LEVEL will be discarded.

For example, the following code will forward log levels 2, 3, 4, 5, 6, and 7 to the Log method.

1
<integer name="com_braze_logger_initial_log_level">2</integer>

Verifying verbose logs

To verify that your logs are set to VERBOSE, check if V/Braze occurs somewhere in your logs. If it does, then verbose logs have been successfully enabled. For example:

1
2077-11-19 16:22:49.591 ? V/Braze v9.0.01 .bo.app.d3: Request started

Suppressing logs

To suppress all logs for the Braze Android SDK, set the log level to BrazeLogger.SUPPRESS in your application’s onCreate() method before any other methods.

1
BrazeLogger.setLogLevel(BrazeLogger.SUPPRESS);
1
BrazeLogger.setLogLevel(BrazeLogger.SUPPRESS)

Multiple API keys

The most common use case for multiple API keys is separating API keys for debug and release build variants.

To easily switch between multiple API keys in your builds, we recommend creating a separate braze.xml file for each relevant build variant. A build variant is a combination of build type and product flavor. By default, new Android projects are configured with debug and release build types and no product flavors.

For each relevant build variant, create a new braze.xml in the src/<build variant name>/res/values/ directory. When the build variant is compiled, it will use the new API key.

1
2
3
4
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="com_braze_api_key">REPLACE_WITH_YOUR_BUILD_VARIANT_API_KEY</string>
</resources>

Exclusive in-app message TalkBack

In adherence to the Android accessibility guidelines, the Braze Android SDK offers Android Talkback by default. To ensure that only the contents of in-app messages are read out loud—without including other screen elements like the app title bar or navigation—you can enable exclusive mode for TalkBack.

To enable exclusive mode for in-app messages:

1
<bool name="com_braze_device_in_app_message_accessibility_exclusive_mode_enabled">true</bool>
1
2
3
val brazeConfigBuilder = BrazeConfig.Builder()
brazeConfigBuilder.setIsInAppMessageAccessibilityExclusiveModeEnabled(true)
Braze.configure(this, brazeConfigBuilder.build())
1
2
3
BrazeConfig.Builder brazeConfigBuilder = new BrazeConfig.Builder()
brazeConfigBuilder.setIsInAppMessageAccessibilityExclusiveModeEnabled(true);
Braze.configure(this, brazeConfigBuilder.build());

R8 and ProGuard

Code shrinking configuration is automatically included with your Braze integration.

Client apps that obfuscate Braze code must store release mapping files for Braze to interpret stack traces. If you want to continue to keep all Braze code, add the following to your ProGuard file:

1
2
-keep class bo.app.** { *; }
-keep class com.braze.** { *; }

Integrating the Swift SDK

You can integrate and customize the Braze Swift SDK using the Swift Package Manager (SPM), CocoaPods, or manual integration methods. For more information about the various SDK symbols, see Braze Swift reference documentation.

Prerequisites

Before you start, verify your environment is supported by the latest Braze Swift SDK version.

Step 1: Install the Braze Swift SDK

We recommend using the Swift Package Manager (SwiftPM) or CocoaPods to install the Braze Swift SDK. Alternatively, you can install the SDK manually.

Step 1.1: Import SDK version

Open your project and navigate to your project’s settings. Select the Swift Packages tab and click on the add button below the packages list.

Enter the URL of our iOS Swift SDK repository https://github.com/braze-inc/braze-swift-sdk in the text field. Under the Dependency Rule section, select the SDK version. Finally, click Add Package.

Step 1.2: Select your packages

The Braze Swift SDK separates features into standalone libraries to provide developers with more control over which features to import into their projects.

Package Details
BrazeKit Main SDK library providing support for analytics and push notifications.
BrazeLocation Location library providing support for location analytics and geofence monitoring.
BrazeUI Braze-provided user interface library for in-app messages, Content Cards, and Banners. Import this library if you intend to use the default UI components.
About Extension libraries
Package Details
BrazeNotificationService Notification service extension library providing support for rich push notifications.
BrazePushStory Notification content extension library providing support for Push Stories.

Select the package that best suits your needs and click Add Package. Make sure you select BrazeKit at a minimum.

Step 1.1: Install CocoaPods

For a full walkthrough, see CocoaPods’ Getting Started Guide. Otherwise, you can run the following command to get started quickly:

1
$ sudo gem install cocoapods

If you get stuck, checkout CocoaPods’ Troubleshooting Guide.

Step 1.2: Constructing the Podfile

Next, create a file in your Xcode project directory named Podfile.

Add the following line to your Podfile:

1
2
3
target 'YourAppTarget' do
  pod 'BrazeKit'
end

BrazeKit contains the main SDK library, providing support for analytics and push notifications.

We suggest you version Braze so pod updates automatically grab anything smaller than a minor version update. This looks like pod 'BrazeKit' ~> Major.Minor.Build. If you want to automatically integrate the latest Braze SDK version, even with major changes, you can use pod 'BrazeKit' in your Podfile.

About additional libraries

The Braze Swift SDK separates features into standalone libraries to provide developers with more control over which features to import into their projects. In addition to BrazeKit, you may add the following libraries to your Podfile:

Library Details
pod 'BrazeLocation' Location library providing support for location analytics and geofence monitoring.
pod 'BrazeUI' Braze-provided user interface library for in-app messages, Content Cards, and Banners. Import this library if you intend to use the default UI components.
Extension libraries

BrazeNotificationService and BrazePushStory are extension modules that provide additional functionality and should not be added directly to your main application target. Instead, you will need to create separate extension targets for each of these modules and import the Braze modules into their corresponding targets.

Library Details
pod 'BrazeNotificationService' Notification service extension library providing support for rich push notifications.
pod 'BrazePushStory' Notification content extension library providing support for Push Stories.

Step 1.3: Install the SDK

To install the Braze SDK CocoaPod, navigate to the directory of your Xcode app project within your terminal and run the following command:

1
pod install

At this point, you should be able to open the new Xcode project workspace created by CocoaPods. Make sure to use this Xcode workspace instead of your Xcode project.

A Braze Example folder expanded to show the new `BrazeExample.workspace`.

Updating the SDK using CocoaPods

To update a CocoaPod, simply run the following command within your project directory:

1
pod update

Step 1.1: Download the Braze SDK

Go to the Braze SDK release page on GitHub, then download braze-swift-sdk-prebuilt.zip.

"The Braze SDK release page on GitHub."

Step 1.2: Choose your frameworks

The Braze Swift SDK contains a variety of standalone XCFrameworks, which gives you the freedom to integrate the features you want—without needing to integrate them all. Reference the following table to choose your XCFrameworks:

Package Required? Description
BrazeKit Yes Main SDK library that provides support for analytics and push notifications.
BrazeLocation No Location library that provides support for location analytics and geofence monitoring.
BrazeUI No Braze-provided user interface library for in-app messages, Content Cards, and Banners. Import this library if you intend to use the default UI components.
BrazeNotificationService No Notification service extension library that provides support for rich push notifications. Do not add this library directly to your main application target, instead add the BrazeNotificationService library separately.
BrazePushStory No Notification content extension library that provides support for Push Stories. Do not add this library directly to your main application target, instead add the BrazePushStory library separately.
BrazeKitCompat No Compatibility library containing all the Appboy and ABK* classes and methods that were available in the Appboy-iOS-SDK version 4.X.X. For usage details, refer to the minimal migration scenario in the migration guide.
BrazeUICompat No Compatibility library containing all the ABK* classes and methods that were available in the AppboyUI library from Appboy-iOS-SDK version 4.X.X. For usage details, refer to the minimal migration scenario in the migration guide.
SDWebImage No Dependency used only by BrazeUICompat in the minimal migration scenario.

Decide whether you want to use Static or Dynamic XCFrameworks, then prepare your files:

  1. Create a temporary directory for your XCFrameworks.
  2. In braze-swift-sdk-prebuilt, open the dynamic directory and move BrazeKit.xcframework into your directory. Your directory should be similar to the following:
    1
    2
    
     temp_dir
     └── BrazeKit.xcframework
    
  3. Move each of your chosen XCFrameworks into your temporary directory. Your directory should be similar to the following:
    1
    2
    3
    4
    5
    
     temp_dir
     ├── BrazeKit.xcframework
     ├── BrazeKitCompat.xcframework
     ├── BrazeLocation.xcframework
     └── SDWebImage.xcframework
    

Step 1.4: Integrate your frameworks

Next, integrate the Dynamic or Static XCFrameworks you prepared previously:

In your Xcode project, select your build target, then General. Under Frameworks, Libraries, and Embedded Content, drag and drop the files you prepared previously.

"An example Xcode project with each Braze library set to 'Embed & Sign.'"

Common errors for Objective-C projects

If your Xcode project only contains Objective-C files, you may get “missing symbol” errors when you try to build your project. To fix these errors, open your project and add an empty Swift file to your file tree. This will force your build toolchain to embed Swift Runtime and link to the appropriate frameworks during build time.

1
FILE_NAME.swift

Replace FILE_NAME with any non-spaced string. Your file should look similar to the following:

1
empty_swift_file.swift

Step 2: Set up delayed initialization (optional)

You can choose to delay when the Braze Swift SDK is initialized, which is useful if your app needs to load config or wait for user consent before starting the SDK. Delayed initialization ensures Braze push notifications are queued until the SDK is ready.

To enable this, call Braze.prepareForDelayedInitialization() as early as possible—ideally inside or before your application(_:didFinishLaunchingWithOptions:).

1
2
3
4
5
6
7
8
func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  // Prepare the SDK for delayed initialization
  Braze.prepareForDelayedInitialization()

  // ... Additional non-Braze setup code

  return true
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@main
struct MyApp: App {
  @UIApplicationDelegateAdaptor var appDelegate: AppDelegate

  var body: some Scene {
    WindowGroup {
      ContentView()
    }
  }
}

class AppDelegate: NSObject, UIApplicationDelegate {
  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
    // Prepare the SDK for delayed initialization
    Braze.prepareForDelayedInitialization()

    // ... Additional non-Braze setup code

    return true
  }
}
1
2
3
4
5
6
7
8
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // Prepare the SDK for delayed initialization
  [Braze prepareForDelayedInitialization];
  
  // ... Additional non-Braze setup code

  return YES;
}

Step 3: Update your app delegate

Add the following line of code to your AppDelegate.swift file to import the features included in the Braze Swift SDK:

1
import BrazeKit

Next, add a static property to your AppDelegate class to keep a strong reference to the Braze instance throughout your application’s lifetime:

1
2
3
class AppDelegate: UIResponder, UIApplicationDelegate {
  static var braze: Braze? = nil
}

Finally, in AppDelegate.swift, add the following snippet to your application:didFinishLaunchingWithOptions: method:

1
2
3
4
5
6
let configuration = Braze.Configuration(
    apiKey: "YOUR-APP-IDENTIFIER-API-KEY",
    endpoint: "YOUR-BRAZE-ENDPOINT"
)
let braze = Braze(configuration: configuration)
AppDelegate.braze = braze

Update YOUR-APP-IDENTIFIER-API-KEY and YOUR-BRAZE-ENDPOINT with the correct value from your App Settings page. Check out our API identifier types for more information on where to find your app identifier API key.

Add the following line of code to your AppDelegate.m file:

1
@import BrazeKit;

Next, add a static variable to your AppDelegate.m file to keep a reference to the Braze instance throughout your application’s lifetime:

1
2
3
4
5
6
7
8
9
10
11
static Braze *_braze;

@implementation AppDelegate
+ (Braze *)braze {
  return _braze;
}

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

Finally, within your AppDelegate.m file, add the following snippet within your application:didFinishLaunchingWithOptions: method:

1
2
3
4
BRZConfiguration *configuration = [[BRZConfiguration alloc] initWithApiKey:"YOUR-APP-IDENTIFIER-API-KEY"
                                                                  endpoint:"YOUR-BRAZE-ENDPOINT"];
Braze *braze = [[Braze alloc] initWithConfiguration:configuration];
AppDelegate.braze = braze;

Update YOUR-APP-IDENTIFIER-API-KEY and YOUR-BRAZE-ENDPOINT with the correct value from your Manage Settings page. Check out our API documentation for more information on where to find your app identifier API key.

Optional configurations

Logging

Log levels

The default log level for the Braze Swift SDK is .error—it’s also the minimum supported level when logs are enabled. These are the full list of log levels:

Swift Objective-C Description
.debug BRZLoggerLevelDebug (Default) Log debugging information + .info + .error.
.info BRZLoggerLevelInfo Log general SDK information (user changes, etc.) + .error.
.error BRZLoggerLevelError Log errors.
.disabled BRZLoggerLevelDisabled No logging occurs.

You can assign the log level at runtime in your Braze.Configuration object. For complete usage details, see Braze.Configuration.Logger.

1
2
3
4
5
6
7
let configuration = Braze.Configuration(
  apiKey: "<BRAZE_API_KEY>",
  endpoint: "<BRAZE_ENDPOINT>"
)
// Enable logging of general SDK information (such as user changes, etc.)
configuration.logger.level = .info
let braze = Braze(configuration: configuration)
1
2
3
4
5
BRZConfiguration *configuration = [[BRZConfiguration alloc] initWithApiKey:self.APIKey
                                                                  endpoint:self.apiEndpoint];
// Enable logging of general SDK information (such as user changes, etc.)
[configuration.logger setLevel:BRZLoggerLevelInfo];
Braze *braze = [[Braze alloc] initWithConfiguration:configuration];

웹브레이즈 SDK 정보

웹브레이즈 SDK를 사용하면 분석을 수집하고 풍부한 인앱 메시지, 푸시 및 콘텐츠 카드 메시지를 웹 사용자에게 표시할 수 있습니다. 자세한 내용은 Braze 자바스크립트 참조 참조하세요.

웹 SDK 통합

1단계: Braze 라이브러리 설치

다음 방법 중 하나를 사용하여 Braze 라이브러리를 설치할 수 있습니다. 웹사이트에서 Content-Security-Policy를 사용하는 경우 라이브러리를 설치하기 전에 콘텐츠 보안 정책 헤더 가이드를 참조하세요.

사이트에서 NPM 또는 Yarn 패키지 관리자를 사용하는 경우 Braze NPM 패키지를 종속성으로 추가할 수 있습니다.

이제 v3.0.0부터 Typescript 정의가 포함됩니다. 2.x에서 3.x로 업그레이드할 때 참고할 사항은 체인지로그를 참조하세요.

1
2
3
npm install --save @braze/web-sdk
# or, using yarn:
# yarn add @braze/web-sdk

설치가 완료되면 일반적인 방법으로 라이브러리의 import 또는 require 작업을 수행할 수 있습니다.

1
2
3
import * as braze from "@braze/web-sdk";
// or, using `require`
const braze = require("@braze/web-sdk");

Braze 웹 SDK는 Google Tag Manager 템플릿 라이브러리에서 설치할 수 있습니다. 두 가지 태그가 지원됩니다:

  1. 초기화 태그: 웹사이트에 웹 SDK를 로드하고 선택적으로 외부 사용자 ID를 설정합니다.
  2. 작업 태그: 커스텀 이벤트, 구매, 사용자 ID 변경 또는 SDK 추적 토글을 트리거하는 데 사용됩니다.

자세한 내용은 Google Tag Manager 통합 가이드를 참조하세요.

라이브러리를 비동기적으로 로드하는 CDN 호스팅 스크립트를 참조하여 Braze 웹 SDK를 HTML에 직접 추가합니다.

2단계: SDK 초기화(선택 사항)

Tag Manager에서 Braze 초기화 옵션을 구성한 경우 이 단계를 건너뛸 수 있습니다.

그렇지 않은 경우, Braze 웹 SDK가 웹사이트에 추가된 후 Braze 대시보드 내 설정 > 앱 설정에 있는 API 키와 SDK 엔드포인트 URL로 라이브러리를 초기화합니다. braze.initialize() 에 대한 전체 옵션 목록과 다른 자바스크립트 메서드에 대한 자세한 내용은 Braze 자바스크립트 문서를 참조하세요.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// initialize the SDK
braze.initialize('YOUR-API-KEY-HERE', {
    baseUrl: "YOUR-SDK-ENDPOINT-HERE"
});

// optionally show all in-app messages without custom handling
braze.automaticallyShowInAppMessages();

// if you use Content Cards
braze.subscribeToContentCardsUpdates(function(cards){
    // cards have been updated
});

// optionally set the current user's external ID before starting a new session
// you can also call `changeUser` later in the session after the user logs in
if (isLoggedIn){
    braze.changeUser(userIdentifier);
}

// `openSession` should be called last - after `changeUser` and `automaticallyShowInAppMessages`
braze.openSession();

선택적 구성

로깅

로깅을 빠르게 활성화하려면 웹사이트 URL에 ?brazeLogging=true를 매개변수로 추가하면 됩니다. 또는 기본 또는 사용자 지정 로깅을 사용 설정할 수 있습니다.

기본 로깅

SDK가 초기화되기 전에 enableLogging 을 사용하여 기본 디버깅 메시지를 JavaScript 콘솔에 기록하세요.

1
enableLogging: true

방법은 다음과 유사해야 합니다:

1
2
3
4
5
braze.initialize('API-KEY', {
    baseUrl: 'API-ENDPOINT',
    enableLogging: true
});
braze.openSession();

SDK가 초기화된 후 기본 디버깅 메시지를 JavaScript 콘솔에 기록하려면 braze.toggleLogging() 을 사용하세요. 방법은 다음과 유사해야 합니다:

1
2
3
4
5
6
braze.initialize('API-KEY', {
    baseUrl: 'API-ENDPOINT',
});
braze.openSession();
...
braze.toggleLogging();

사용자 지정 로깅

setLogger 을 사용하여 사용자 지정 디버깅 메시지를 JavaScript 콘솔에 기록합니다. 기본 로그와 달리 이러한 로그는 사용자에게 표시되지 않습니다.

1
setLogger(loggerFunction: (message: STRING) => void): void

STRING 를 단일 문자열 매개변수로 메시지로 바꿉니다. 방법은 다음과 유사해야 합니다:

1
2
3
4
5
braze.initialize('API-KEY');
braze.setLogger(function(message) {
    console.log("Braze Custom Logger: " + message);
});
braze.openSession();

SDK 업그레이드하기

기본 통합 지침에서 권장하는 대로 콘텐츠 전송 네트워크(예: https://js.appboycdn.com/web-sdk/a.a/braze.min.js)에서 Braze 웹 SDK를 참조하면 사용자가 사이트를 새로 고칠 때 자동으로 사소한 업데이트(위 예제에서 버그 수정 및 역호환 가능한 기능, a.a.a~a.a.z 버전)를 수신합니다.

그러나 주요 변경 사항을 출시할 때는 주요 변경 사항이 통합 기능에 영향을 주지 않도록 하기 위해 Braze 웹 SDK를 수동으로 업그레이드해야 합니다. 또한 SDK를 다운로드하여 직접 호스팅하는 경우 버전 업데이트를 자동으로 수신하지 않으므로 최신 기능 및 버그 수정을 수신하려면 수동으로 업그레이드해야 합니다.

RSS 리더 또는 원하는 서비스를 사용하여 릴리스 피드를 따라 최신 릴리스를 최신 상태로 유지할 수 있습니다. 웹 SDK 릴리스 내역에 대한 전체 설명은 체인지로그를 참조하세요. Braze 웹 SDK를 업그레이드하려면:

  • https://js.appboycdn.com/web-sdk/[OLD VERSION NUMBER]/braze.min.js의 버전 번호를 변경하거나 패키지 매니저의 종속성에서 Braze 라이브러리 버전을 업데이트합니다.
  • 웹 푸시가 통합된 경우 사이트의 서비스 종사자 파일을 업데이트합니다. 기본적으로 사이트의 루트 디렉토리 내 /service-worker.js에 있지만 일부 통합에서는 위치를 사용자 지정할 수 있습니다. 서비스 워커 파일을 호스팅하려면 루트 디렉터리에 액세스해야 합니다.

이 두 파일은 적절한 기능을 위해 서로 조정하여 업데이트해야 합니다.

Google 태그 관리자

Google 태그 관리자(GTM)를 사용하면 프로덕션 코드 릴리스나 엔지니어링 리소스 없이도 웹사이트에 원격으로 태그를 추가, 제거, 편집할 수 있습니다. Braze는 다음과 같은 GTM 템플릿을 제공합니다:

두 태그 모두 Google의 커뮤니티 갤러리에서 또는 커뮤니티 템플릿에서 새 태그를 추가할 때 Braze를 검색하여 작업 공간에 추가할 수 있습니다.

갤러리 검색 이미지

Google의 업데이트된 EU 사용자 동의 정책

Google의 EU 사용자 동의 정책의 일환으로 다음 부울 커스텀 속성을 고객 프로필에 기록해야 합니다.

  • $google_ad_user_data
  • $google_ad_personalization

GTM 통합을 통해 설정하는 경우 커스텀 속성을 사용하려면 커스텀 HTML 태그를 생성해야 합니다. 다음은 이러한 값을 문자열이 아닌 부울 데이터 유형으로 기록하는 방법의 예시입니다:

1
2
3
<script>
window.braze.getUser().setCustomUserAttribute("$google_ad_personalization", true);
</script>

자세한 내용은 Google에 오디언스 동기화를 참조하세요.

기타 통합 방법

AMP(가속 모바일 페이지)

자세히 보기

1단계: AMP 웹 푸시 스크립트 포함

다음 비동기 스크립트 태그를 기억합니다.

1
<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>

2단계: 구독 위젯 추가

사용자가 푸시를 구독 및 수신 취소할 수 있는 위젯을 HTML 본문에 추가하세요.

1
2
3
4
5
6
7
8
9
<!-- A subscription widget -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="80">
  <button on="tap:amp-web-push.subscribe">Subscribe to Notifications</button>
</amp-web-push-widget>

<!-- An unsubscription widget -->
<amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="80">
  <button on="tap:amp-web-push.unsubscribe">Unsubscribe from Notifications</button>
</amp-web-push-widget>

3단계: helper-iframepermission-dialog

AMP 웹 푸시 컴포넌트는 푸시 구독을 처리하는 팝업을 생성하므로 이 기능을 사용하려면 프로젝트에 다음 헬퍼 파일을 추가해야 합니다:

4단계: 서비스 워커 파일 만들기

웹사이트의 루트 디렉터리에 service-worker.js 파일을 만들고 다음 코드 조각을 추가합니다:

5단계: AMP 웹 푸시 HTML 요소 구성

HTML 본문에 다음 amp-web-push HTML 요소를 추가합니다. apiKeybaseUrlservice-worker-URL 에 쿼리 매개 변수로 추가해야 한다는 점을 기억하세요.

1
2
3
4
5
6
7
<amp-web-push
layout="nodisplay"
id="amp-web-push"
helper-iframe-url="FILE_PATH_TO_YOUR_HELPER_IFRAME"
permission-dialog-url="FILE_PATH_TO_YOUR_PERMISSION_DIALOG"
service-worker-url="FILE_PATH_TO_YOUR_SERVICE_WORKER?apiKey={YOUR_API_KEY}&baseUrl={YOUR_BASE_URL}"
>

AMD: 지원 비활성화하기

사이트에서 RequireJS 또는 다른 AMD 모듈 로더를 사용하지만 이 목록의 다른 옵션 중 하나를 통해 Braze Web SDK를 로드하는 것을 선호하는 경우 AMD 지원이 포함되지 않은 라이브러리 버전을 로드할 수 있습니다. 이 라이브러리 버전은 다음 CDN 위치에서 로드할 수 있습니다:

AMD: 모듈 로더

RequireJS 또는 기타 AMD module-loaders를 사용하는 경우 라이브러리 사본을 자체 호스팅하고 다른 리소스와 마찬가지로 참조하는 것이 좋습니다.

1
2
3
4
5
require(['path/to/braze.min.js'], function(braze) {
  braze.initialize('YOUR-API-KEY-HERE', { baseUrl: 'YOUR-SDK-ENDPOINT' });
  braze.automaticallyShowInAppMessages();
  braze.openSession();
});

전자

Electron은 웹 푸시 알림을 공식적으로 지원하지 않습니다(이 GitHub 이슈 참조). Braze에서 테스트하지 않은 다른 오픈 소스 해결 방법을 시도해 볼 수 있습니다.

재스트 프레임워크

Jest를 사용할 때 SyntaxError: Unexpected token 'export' 와 유사한 오류가 표시될 수 있습니다. 이 문제를 해결하려면 Braze SDK를 무시하도록 package.json에서 구성을 조정합니다.

1
2
3
4
5
"jest": {
  "transformIgnorePatterns": [
    "/node_modules/(?!@braze)"
  ]
}

SSR 프레임워크

Next.js 와 같은 서버 측 렌더링(SSR) 프레임워크를 사용하는 경우 SDK가 브라우저 환경에서 실행되도록 되어 있기 때문에 오류가 발생할 수 있습니다. SDK를 동적으로 가져오면 이러한 문제를 해결할 수 있습니다.

SDK에서 필요한 부분을 별도의 파일로 내보낸 다음, 해당 파일을 구성요소에 동적으로 가져오는 방식으로 트리 셰이킹의 이점을 유지할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// MyComponent/braze-exports.js
// export the parts of the SDK you need here
export { initialize, openSession } from "@braze/web-sdk";

// MyComponent/MyComponent.js
// import the functions you need from the braze exports file
useEffect(() => {
    import("./braze-exports.js").then(({ initialize, openSession }) => {
        initialize("YOUR-API-KEY-HERE", {
            baseUrl: "YOUR-SDK-ENDPOINT",
            enableLogging: true,
        });
        openSession();
    });
}, []);

또는 웹팩을 사용하여 앱을 번들링하는 경우 매직 코멘트를 활용하여 SDK의 필요한 부분만 동적으로 가져올 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
// MyComponent.js
useEffect(() => {
    import(
        /* webpackExports: ["initialize", "openSession"] */
        "@braze/web-sdk"
    ).then(({ initialize, openSession }) => {
        initialize("YOUR-API-KEY-HERE", {
            baseUrl: "YOUR-SDK-ENDPOINT",
            enableLogging: true,
        });
        openSession();
    });
}, []);

Tealium iQ

Tealium iQ는 기본적인 턴키 방식의 Braze 통합을 제공합니다. 통합을 구성하려면 Tealium 태그 관리 인터페이스에서 Braze를 검색하고 대시보드에서 웹 SDK API 키를 제공합니다.

자세한 내용이나 심층적인 Tealium 구성 지원은 통합 설명서를 확인하거나 Tealium 계정 관리자에게 문의하세요.

Vite

Vite를 사용할 때 순환 종속성 또는 Uncaught TypeError: Class extends value undefined is not a constructor or null에 대한 경고가 표시되는 경우 Braze SDK를 종속성 검색에서 제외해야 할 수 있습니다.

1
2
3
optimizeDeps: {
    exclude: ['@braze/web-sdk']
},

기타 태그 관리자

Braze는 사용자 지정 HTML 태그 내의 통합 지침에 따라 다른 태그 관리 솔루션과도 호환될 수 있습니다. 이러한 솔루션을 평가하는 데 도움이 필요하면 Braze 담당자에게 문의하세요.

Integrating the Cordova SDK

Prerequisites

Before you start, verify your environment is supported by the latest Braze Cordova SDK version.

Step 1: Add the SDK to your project

If you’re on Cordova 6 or later, you can add the SDK directly from GitHub. Alternatively, you can download a ZIP of the GitHub repository and add the SDK manually.

If you don’t plan on using location collection and geofences, use the master branch from GitHub.

1
cordova plugin add https://github.com/braze-inc/braze-cordova-sdk#master

If you plan on using location collection and geofences, use the geofence-branch from GitHub.

1
cordova plugin add https://github.com/braze-inc/braze-cordova-sdk#geofence-branch

Step 2: Configure your project

Next, adding the following preferences to the platform element in your project’s config.xml file.

1
2
<preference name="com.braze.ios_api_key" value="BRAZE_API_KEY" />
<preference name="com.braze.ios_api_endpoint" value="CUSTOM_API_ENDPOINT" />
1
2
<preference name="com.braze.android_api_key" value="BRAZE_API_KEY" />
<preference name="com.braze.android_api_endpoint" value="CUSTOM_API_ENDPOINT" />

Replace the following:

The platform element in your config.xml file should be similar to the following:

1
2
3
4
<platform name="ios">
    <preference name="com.braze.ios_api_key" value="BRAZE_API_KEY" />
    <preference name="com.braze.ios_api_endpoint" value="sdk.fra-01.braze.eu" />
</platform>
1
2
3
4
<platform name="android">
    <preference name="com.braze.android_api_key" value="BRAZE_API_KEY" />
    <preference name="com.braze.android_api_endpoint" value="sdk.fra-01.braze.eu" />
</platform>

Platform-specific syntax

The following section covers the platform-specific syntax when using Cordova with iOS or Android.

Integers

Integer preferences are read as string representations, like in the following example:

1
2
3
4
<platform name="ios">
    <preference name="com.braze.ios_flush_interval_seconds" value="10" />
    <preference name="com.braze.ios_session_timeout" value="5" />
</platform>

Due to how the Cordova 8.0.0+ framework handles preferences, integer-only preferences (such as sender IDs) must be set to strings prepended with str_, like in the following example:

1
2
3
4
<platform name="android">
    <preference name="com.braze.android_fcm_sender_id" value="str_64422926741" />
    <preference name="com.braze.android_default_session_timeout" value="str_10" />
</platform>

Booleans

Boolean preferences are read by the SDK using YES and NO keywords as a string representation, like in the following example:

1
2
3
4
<platform name="ios">
    <preference name="com.braze.should_opt_in_when_push_authorized" value="YES" />
    <preference name="com.braze.ios_disable_automatic_push_handling" value="NO" />
</platform>

Boolean preferences are read by the SDK using true and false keywords as a string representation, like in the following example:

1
2
3
4
<platform name="android">
    <preference name="com.braze.should_opt_in_when_push_authorized" value="true" />
    <preference name="com.braze.is_session_start_based_timeout_enabled" value="false" />
</platform>

Optional configurations

You can add any of the following preferences to the platform element in your project’s config.xml file:

The following is an example config.xml file with additional configurations:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<platform name="ios">
    <preference name="com.braze.ios_disable_automatic_push_registration" value="NO"/"YES" />
    <preference name="com.braze.ios_disable_automatic_push_handling" value="NO"/"YES" />
    <preference name="com.braze.ios_enable_idfa_automatic_collection" value="YES"/"NO" />
    <preference name="com.braze.enable_location_collection" value="NO"/"YES" />
    <preference name="com.braze.geofences_enabled" value="NO"/"YES" />
    <preference name="com.braze.ios_session_timeout" value="5" />
    <preference name="com.braze.sdk_authentication_enabled" value="YES"/"NO" />
    <preference name="com.braze.display_foreground_push_notifications" value="YES"/"NO" />
    <preference name="com.braze.ios_disable_un_authorization_option_provisional" value="NO"/"YES" />
    <preference name="com.braze.trigger_action_minimum_time_interval_seconds" value="30" />
    <preference name="com.braze.ios_push_app_group" value="PUSH_APP_GROUP_ID" />
    <preference name="com.braze.ios_forward_universal_links" value="YES"/"NO" />
    <preference name="com.braze.ios_log_level" value="2" />
    <preference name="com.braze.ios_use_uuid_as_device_id" value="YES"/"NO" />
    <preference name="com.braze.ios_flush_interval_seconds" value="10" />
    <preference name="com.braze.ios_use_automatic_request_policy" value="YES"/"NO" />
    <preference name="com.braze.should_opt_in_when_push_authorized" value="YES"/"NO" />
</platform>
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
<platform name="android">
    <preference name="com.braze.android_small_notification_icon" value="RESOURCE_ENTRY_NAME_FOR_ICON_DRAWABLE" />
    <preference name="com.braze.android_large_notification_icon" value="RESOURCE_ENTRY_NAME_FOR_ICON_DRAWABLE" />
    <preference name="com.braze.android_notification_accent_color" value="str_ACCENT_COLOR_INTEGER" />
    <preference name="com.braze.android_default_session_timeout" value="str_SESSION_TIMEOUT_INTEGER" />
    <preference name="com.braze.android_handle_push_deep_links_automatically" value="true"/"false" />
    <preference name="com.braze.android_log_level" value="str_LOG_LEVEL_INTEGER" />
    <preference name="com.braze.firebase_cloud_messaging_registration_enabled" value="true"/"false" />
    <preference name="com.braze.android_fcm_sender_id" value="str_YOUR_FCM_SENDER_ID" />
    <preference name="com.braze.enable_location_collection" value="true"/"false" />
    <preference name="com.braze.geofences_enabled" value="true"/"false" />
    <preference name="com.braze.android_disable_auto_session_tracking" value="true"/"false" />
    <preference name="com.braze.sdk_authentication_enabled" value="true"/"false" />
    <preference name="com.braze.trigger_action_minimum_time_interval_seconds" value="str_MINIMUM_INTERVAL_INTEGER" />
    <preference name="com.braze.is_session_start_based_timeout_enabled" value="false"/"true" />
    <preference name="com.braze.default_notification_channel_name" value="DEFAULT_NAME" />
    <preference name="com.braze.default_notification_channel_description" value="DEFAULT_DESCRIPTION" />
    <preference name="com.braze.does_push_story_dismiss_on_click" value="true"/"false" />
    <preference name="com.braze.is_fallback_firebase_messaging_service_enabled" value="true"/"false" />
    <preference name="com.braze.fallback_firebase_messaging_service_classpath" value="FALLBACK_FIREBASE_MESSAGING_CLASSPATH" />
    <preference name="com.braze.is_content_cards_unread_visual_indicator_enabled" value="true"/"false" />
    <preference name="com.braze.is_firebase_messaging_service_on_new_token_registration_enabled" value="true"/"false" />
    <preference name="com.braze.is_push_deep_link_back_stack_activity_enabled" value="true"/"false" />
    <preference name="com.braze.push_deep_link_back_stack_activity_class_name" value="DEEPLINK_BACKSTACK_ACTIVITY_CLASS_NAME" />
    <preference name="com.braze.should_opt_in_when_push_authorized" value="true"/"false" />
</platform>

Disabling automatic session tracking (Android only)

By default, the Android Cordova plugin automatically tracks sessions. To disable automatic session tracking, add the following preference to the platform element in your project’s config.xml file:

1
2
3
<platform name="android">
    <preference name="com.braze.android_disable_auto_session_tracking" value="true" />
</platform>

To start tracking sessions again, call BrazePlugin.startSessionTracking(). Keep in mind, only sessions started after the next Activity.onStart() will be tracked.

Flutter Braze SDK 정보

Android 및 iOS에서 Braze Flutter SDK를 통합한 후에는 Dart로 작성된 Flutter 앱 내에서 Braze API를 사용할 수 있습니다. 이 플러그인은 기본적인 분석 기능을 제공하며, 이를 통해 단일 코드베이스에서 iOS 및 Android용 인앱 메시지와 콘텐츠 카드를 통합할 수 있습니다.

Flutter SDK 통합

Prerequisites

Braze Flutter SDK를 통합하기 전에 다음을 완료해야 합니다:

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

명령줄에서 Braze Flutter SDK 패키지를 추가합니다. 그러면 pubspec.yaml 에 적절한 줄이 추가됩니다.

1
flutter pub add braze_plugin

2단계: 완벽한 네이티브 SDK 설정

Braze 서버에 연결하려면 프로젝트의 android/res/values 폴더에서 braze.xml 파일을 생성합니다. 다음 코드를 붙여넣고 API 식별자 키와 엔드포인트를 사용자 값으로 바꿉니다.

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="com_braze_api_key">YOUR_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" />

AppDelegate.swift 파일 상단에 Braze SDK 가져오기를 추가합니다:

1
2
import BrazeKit
import braze_plugin

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
static var braze: Braze? = nil

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 or customize configuration here
  configuration.logger.level = .info
  let braze = BrazePlugin.initBraze(configuration)
  AppDelegate.braze = braze

  return true
}

AppDelegate.m 파일 상단에 있는 BrazeKit를 가져옵니다.

1
@import BrazeKit;

같은 파일의 application:didFinishLaunchingWithOptions: 메서드에서 Braze 구성 오브젝트를 생성하고 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 or customize configuration here
  configuration.logger.level = BRZLoggerLevelInfo;
  Braze *braze = [BrazePlugin initBraze:configuration];
  AppDelegate.braze = braze;

  [self.window makeKeyAndVisible];
  return YES;
}

#pragma mark - AppDelegate.braze

static Braze *_braze = nil;

+ (Braze *)braze {
  return _braze;
}

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

3단계: 플러그인 설정

플러그인을 Dart 코드로 가져오려면 다음을 사용하세요:

1
import 'package:braze_plugin/braze_plugin.dart';

그런 다음, 샘플 앱에서와 같이 new BrazePlugin()을 호출하여 Braze 플러그인 인스턴스를 초기화합니다.

통합 테스트

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

앱에서 다음 코드를 호출하여 특정 사용자에 대한 세션을 엽니다.

1
2
BrazePlugin braze = BrazePlugin();
braze.changeUser("{some-user-id}");

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

리액트 네이티브 브라즈 SDK 정보

리액트 네이티브 브라즈 SDK를 통합하면 기본적인 분석 기능이 제공되며, 하나의 코드베이스로 iOS와 안드로이드용 인앱 메시지와 콘텐츠 카드를 통합할 수 있습니다.

새로운 아키텍처 호환성

다음 최소 SDK 버전은 React Native의 새 아키텍처를 사용하는 모든 앱과 호환됩니다:

SDK 버전 6.0.0부터 Braze는 새로운 아키텍처와 레거시 브리지 아키텍처 모두와 호환되는 React Native Turbo 모듈을 사용하므로 추가 설정이 필요하지 않습니다.

React Native SDK 통합

Prerequisites

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

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

1
npm install @braze/react-native-sdk
1
yarn add @braze/react-native-sdk

2단계: 설정 옵션 선택

Braze Expo 플러그인을 사용하거나 기본 레이어 중 하나를 통해 Braze SDK를 관리할 수 있습니다. 엑스포 플러그인을 사용하면 네이티브 레이어에서 코드를 작성하지 않고도 특정 SDK 기능을 구성할 수 있습니다. 앱의 요구 사항에 가장 적합한 옵션을 선택하세요.

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

Braze React Native SDK 버전이 1.37.0 이상인지 확인합니다. 지원되는 전체 버전 목록은 Braze React Native 리포지토리에서 확인하세요.

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 Expo 플러그인이 작동하는 데 필요한 네이티브 파일이 생성됩니다.

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:launchModesingleTask로 설정된 경우, 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단계: 라이브러리 가져오기

그런 다음, import 리액트 네이티브 코드에 라이브러리를 추가합니다. 자세한 내용은 샘플 프로젝트를 확인하세요.

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

4단계: 통합 테스트(선택 사항)

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>
  )

Braze 대시보드에서 사용자 검색으로 이동하여 some-user-id 과 일치하는 ID를 가진 사용자를 찾습니다. 여기에서 세션 및 디바이스 데이터가 기록되었는지 확인할 수 있습니다.

Roku SDK 통합

1단계: 파일 추가

Braze SDK 파일은 Braze Roku SDK 리포지토리sdk_files 디렉토리에서 찾을 수 있습니다.

  1. source 디렉토리의 앱에 BrazeSDK.brs를 추가합니다.
  2. components 디렉토리의 앱에 BrazeTask.brsBrazeTask.xml을 추가합니다.

2단계: 참조 추가

다음 script 요소를 사용하여 기본 장면에서 BrazeSDK.brs에 대한 참조를 추가합니다.

1
<script type="text/brightscript" uri="pkg:/source/BrazeSDK.brs"/>

3단계: 구성

main.brs 에서 글로벌 노드에서 Braze 구성을 설정합니다:

1
2
3
4
5
6
7
8
globalNode = screen.getGlobalNode()
config = {}
config_fields = BrazeConstants().BRAZE_CONFIG_FIELDS
config[config_fields.API_KEY] = {YOUR_API_KEY}
' example endpoint: "https://sdk.iad-01.braze.com/"
config[config_fields.ENDPOINT] = {YOUR_ENDPOINT}
config[config_fields.HEARTBEAT_FREQ_IN_SECONDS] = 5
globalNode.addFields({brazeConfig: config})

Braze 대시보드에서 SDK 엔드포인트와 API 키를 찾을 수 있습니다.

4단계: Braze 초기화

Braze 인스턴스를 초기화합니다:

1
2
m.BrazeTask = createObject("roSGNode", "BrazeTask")
m.Braze = getBrazeInstance(m.BrazeTask)

선택적 구성

로깅

Braze 통합을 디버깅하려면 Roku 디버그 콘솔에서 Braze 로그를 확인할 수 있습니다. 자세한 내용은 Roku 개발자의 코드 디버깅을 참조하세요.

유니티 브레이즈 SDK 소개

유형, 함수, 변수 등의 전체 목록은 Unity 선언 파일을 참조하세요. 또한 이미 iOS용 Unity를 수동으로 통합한 경우 자동 통합으로 전환할 수 있습니다.

Unity SDK 통합

Prerequisites

시작하기 전에 사용 중인 환경이 최신 Braze Unity SDK 버전에서 지원되는지 확인하세요.

1단계: Braze Unity 패키지 선택

Braze .unitypackage는 C# 인터페이스와 함께 Android 및 iOS 플랫폼용 기본 바인딩을 번들로 제공합니다.

Braze Unity 릴리즈 페이지에서 여러 Braze Unity 패키지를 다운로드할 수 있습니다.

  • Appboy.unitypackage
    • 이 패키지는 Braze 인앱 메시징 및 iOS의 콘텐츠 카드 기능이 제대로 작동하는 데 필요한 Braze Android 및 iOS SDK와 iOS SDK에 대한 SDWebImage 종속성을 번들로 제공합니다. SDWebImage 프레임워크는 GIF를 포함한 이미지를 다운로드하고 표시하는 데 사용됩니다. Braze의 모든 기능을 활용하려면 이 패키지를 다운로드하여 가져오세요.
  • Appboy-nodeps.unitypackage
    • 이 패키지는 SDWebImage 프레임워크가 없다는 점을 제외하면 Appboy.unitypackage 과 유사합니다. 이 패키지는 iOS 앱에 SDWebImage 프레임워크가 표시되지 않도록 하려는 경우에 유용합니다.

Braze .unitypackage는 C# 인터페이스와 함께 Android 및 iOS 플랫폼용 기본 바인딩을 번들로 제공합니다.

Braze Unity 패키지는 다음과 같은 두 가지 통합 옵션을 사용해 Braze Unity 릴리즈 페이지에서 다운로드할 수 있습니다.

  1. Appboy.unitypackage
    • 이 패키지는 추가 종속성 없이 Braze Android 및 iOS SDK를 번들로 제공합니다. 이 통합 방법을 사용하는 경우 iOS에서 Braze 인앱 메시징 및 콘텐츠 카드 기능이 제대로 작동하지 않습니다. 커스텀 코드 없이 전체 Braze 기능을 활용하려는 경우 대신 아래 옵션을 사용합니다.
    • 이 통합 옵션을 사용하려면 Unity UI의 ‘Braze 구성’ 아래에서 Import SDWebImage dependency 옆의 확인란이 선택 해제되었는지 확인합니다.
  2. Appboy.unitypackage(SDWebImage 포함)
    • 이 통합 옵션은 Braze 인앱 메시징 및 iOS의 콘텐츠 카드 기능이 제대로 작동하는 데 필요한 Braze Android 및 iOS SDK와 iOS SDK에 대한 SDWebImage 종속성을 번들로 제공합니다. SDWebImage 프레임워크는 GIF를 포함한 이미지를 다운로드하고 표시하는 데 사용됩니다. Braze의 모든 기능을 활용하려면 이 패키지를 다운로드하여 가져오세요.
    • SDWebImage를 자동으로 가져오려면 Unity UI의 ‘Braze 구성’ 아래 Import SDWebImage dependency 옆의 확인란을 선택해야 합니다.

2단계: 패키지 가져오기

Unity 편집기에서 자산 > 패키지 가져오기 > 커스텀 패키지로 이동하여 패키지를 Unity 프로젝트로 가져옵니다 다음으로, 가져오기를 클릭합니다.

또는 커스텀 Unity 패키지 가져오기에 대한 자세한 가이드는 Unity 자산 패키지 가져오기 지침을 따릅니다.

Unity 편집기에서 자산 > 패키지 가져오기 > 커스텀 패키지로 이동하여 패키지를 Unity 프로젝트로 가져옵니다 다음으로, 가져오기를 클릭합니다.

또는 커스텀 Unity 패키지 가져오기에 대한 자세한 가이드는 Unity 자산 패키지 가져오기 지침을 따릅니다.

3단계: SDK 구성

3.1 단계: 구성 AndroidManifest.xml

풀로 AndroidManifest.xml 가 작동합니다. 앱에 AndroidManifest.xml이 없는 경우 다음을 템플릿으로 사용할 수 있습니다. 그렇지 않으면 이미 AndroidManifest.xml이 있는 경우 기존 AndroidManifest.xml에 다음 중 누락된 섹션이 추가되었는지 확인합니다.

  1. Assets/Plugins/Android/ 디렉토리로 이동하여 AndroidManifest.xml 파일을 엽니다. Unity 에디터의 기본 위치입니다.
  2. AndroidManifest.xml 에서 다음 템플릿의 필수 권한 및 활동을 추가합니다.
  3. 완료되면 AndroidManifest.xml 에는 "android.intent.category.LAUNCHER" 이 있는 하나의 활동만 포함되어 있어야 합니다.
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
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="REPLACE_WITH_YOUR_PACKAGE_NAME">

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

  <application android:icon="@drawable/app_icon" 
               android:label="@string/app_name">

    <!-- Calls the necessary Braze methods to ensure that analytics are collected and that push notifications are properly forwarded to the Unity application. -->
    <activity android:name="com.braze.unity.BrazeUnityPlayerActivity" 
      android:theme="@style/UnityThemeSelector"
      android:label="@string/app_name" 
      android:configChanges="fontScale|keyboard|keyboardHidden|locale|mnc|mcc|navigation|orientation|screenLayout|screenSize|smallestScreenSize|uiMode|touchscreen" 
      android:screenOrientation="sensor">
      <meta-data android:name="android.app.lib_name" android:value="unity" />
      <meta-data android:name="unityplayer.ForwardNativeEventsToDalvik" android:value="true" />
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>

    <!-- A Braze specific FirebaseMessagingService used to handle push notifications. -->
    <service android:name="com.braze.push.BrazeFirebaseMessagingService"
      android:exported="false">
      <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT" />
      </intent-filter>
    </service>
  </application>
</manifest>

3.2 단계: 패키지 이름으로 AndroidManifest.xml 업데이트

패키지 이름을 찾으려면 파일 > 빌드 설정 > 플레이어 설정 > Android 탭을 클릭합니다.

AndroidManifest.xml에서 REPLACE_WITH_YOUR_PACKAGE_NAME의 모든 인스턴스는 이전 단계의 Package Name으로 바뀌어야 합니다.

3.3 단계: 그레이들 종속성 추가

Unity 프로젝트에 그래들 종속성을 추가하려면 먼저 퍼블리싱 설정에서 ‘커스텀 메인 그래들 템플릿’ 을 활성화합니다. 그러면 프로젝트에서 사용할 템플릿 gradle 파일이 생성됩니다. gradle 파일은 설정 종속성 및 기타 빌드 시점 프로젝트 설정을 처리합니다. 자세한 내용은 Braze Unity 샘플 앱의 mainTemplate.gradle.

다음 종속성이 필요합니다:

1
2
3
4
5
6
implementation 'com.google.firebase:firebase-messaging:22.0.0'
implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.1.0"
implementation "androidx.recyclerview:recyclerview:1.2.1"
implementation "org.jetbrains.kotlin:kotlin-stdlib:1.6.0"
implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.6.1"
implementation 'androidx.core:core:1.6.0'

외부 종속성 매니저를 사용하여 이러한 종속성을 설정할 수도 있습니다.

3.4 단계: Unity Android 통합 자동화

Braze는 Unity Android 통합을 자동화하기 위한 기본 Unity 솔루션을 제공합니다.

  1. Unity 편집기에서 Braze > Braze 구성으로 이동하여 Braze 구성 설정을 엽니다.
  2. Unity Android 통합 자동화 확인란을 선택합니다.
  3. Braze API 키 필드에 Braze 대시보드의 설정 관리에서 찾은 애플리케이션의 API 키를 입력합니다.

3.1 단계: API 키 설정

Braze는 Unity iOS 통합을 자동화하기 위한 기본 Unity 솔루션을 제공합니다. 이 솔루션은 Unity의 PostProcessBuildAttribute를 사용하여 빌드된 Xcode 프로젝트를 수정하고 IMPL_APP_CONTROLLER_SUBCLASS 매크로를 사용하여 UnityAppController를 서브클래스로 구성합니다.

  1. Unity 편집기에서 Braze > Braze 구성으로 이동하여 Braze 구성 설정을 엽니다.
  2. Unity iOS 통합 자동화 확인란을 선택합니다.
  3. Braze API 키 필드에 설정 관리에서 찾은 애플리케이션의 API 키를 입력합니다.

애플리케이션에서 이미 다른 UnityAppController 서브클래스를 사용하고 있는 경우, 서브클래스 구현을 AppboyAppDelegate.mm과 병합해야 합니다.

Unity 패키지 커스터마이징

1단계: 리포지토리 복제

터미널에서 Braze Unity SDK GitHub 리포지토리를 복제하고 해당 폴더로 이동합니다:

1
2
git clone [email protected]:braze-inc/braze-unity-sdk.git
cd ~/PATH/TO/DIRECTORY/braze-unity-sdk
1
2
git clone git@github.com:braze-inc/braze-unity-sdk.git
cd C:\PATH\TO\DIRECTORY\braze-unity-sdk

2단계: 리포지토리에서 패키지 내보내기

먼저 Unity를 실행하고 백그라운드에서 계속 실행합니다. 그런 다음 리포지토리 루트에서 다음 명령을 실행하여 패키지를 braze-unity-sdk/unity-package/ 으로 내보냅니다.

1
/Applications/Unity/Unity.app/Contents/MacOS/Unity -batchmode -nographics -projectPath "$(pwd)" -executeMethod Appboy.Editor.Build.ExportAllPackages -quit
1
"%UNITY_PATH%" -batchmode -nographics -projectPath "%PROJECT_ROOT%" -executeMethod Appboy.Editor.Build.ExportAllPackages -quit	

3단계: Unity로 패키지 임포트

  1. Unity에서 에셋 > 패키지 임포트 > 커스텀 패키지로 이동하여 원하는 패키지를 Unity 프로젝트로 임포트합니다.
  2. 가져오지 않으려는 파일이 있다면 지금 바로 선택을 취소하세요.
  3. Assets/Editor/Build.cs 에 있는 익스포트된 Unity 패키지를 커스터마이즈합니다.

자동 통합으로 전환(Swift만 해당)

Braze Unity SDK에서 제공하는 자동화된 iOS 통합 기능을 활용하려면 수동 통합에서 자동 통합으로 전환하는 다음 단계를 따르세요.

  1. Xcode 프로젝트의 UnityAppController 서브클래스에서 모든 Braze 관련 코드를 제거합니다.
  2. Unity 또는 Xcode 프로젝트에서 Braze iOS 라이브러리를 제거합니다(예: Appboy_iOS_SDK.frameworkSDWebImage.framework).
  3. Braze Unity 패키지를 프로젝트에 다시 임포트합니다. 전체 안내는 2단계를 참조하세요: 패키지를 가져오기.
  4. API 키를 다시 설정하세요. 전체 안내는 3.1단계를 참조하세요: API 키 설정.

선택적 구성

상세 로깅

Unity 편집기에서 상세 로깅을 활성화하려면 다음을 수행합니다.

  1. Braze > Braze 구성으로 이동하여 Braze 구성 설정을 엽니다.
  2. Braze Android 설정 표시 드롭다운을 클릭합니다.
  3. SDK 로그 수준 필드에 ‘0’ 값을 입력합니다.

Prime 31 호환성

Prime31 플러그인과 함께 Braze Unity 플러그인을 사용하려면 프로젝트의 AndroidManifest.xml을 편집하여 Prime31 호환 활동 클래스를 사용합니다. 의 모든 참조를 변경합니다. com.braze.unity.BrazeUnityPlayerActivity부터 com.braze.unity.prime31compatible.BrazeUnityPlayerActivity까지

Amazon 디바이스 메시징(ADM)

Braze는 Unity 앱에 ADM 푸시 통합을 지원합니다. ADM 푸시를 통합하려면 ADM API 키가 포함된 api_key.txt 파일을 만들어 Plugins/Android/assets/ 폴더에 넣습니다. ADM과 Braze를 통합하는 방법에 대한 자세한 내용은 ADM 푸시 통합 지침을 참조하세요.

Braze Unity 플레이어 확장(Android 전용)

제공된 예제 AndroidManifest.xml 파일에는 하나의 활동 클래스(BrazeUnityPlayerActivity)가 등록되어 있습니다. 이 클래스는 Braze SDK와 통합되어 있으며 세션 처리, 인앱 메시지 등록, 푸시 알림 분석 로깅 등을 통해 UnityPlayerActivity를 확장합니다. UnityPlayerActivity 클래스 확장에 대한 자세한 내용은 Unity를 참조하세요.

라이브러리 또는 플러그인 프로젝트에서 커스텀 UnityPlayerActivity를 만드는 경우, 커스텀 기능을 Braze와 통합하려면 BrazeUnityPlayerActivity를 확장해야 합니다. BrazeUnityPlayerActivity 확장 작업을 시작하기 전에, Unity 프로젝트에 Braze를 통합하기 위한 지침을 따르세요.

  1. Braze Android SDK 통합 지침에서 설명한 대로 라이브러리 또는 플러그인 프로젝트에 Braze Android SDK를 종속성으로 추가합니다.
  2. Unity 전용 기능이 포함된 Unity .aar을 Unity용으로 빌드 중인 Android 라이브러리 프로젝트에 통합합니다. appboy-unity.aar공개 리포지토리에서 사용할 수 있습니다. Unity 라이브러리가 성공적으로 통합되면 BrazeUnityPlayerActivity를 확장하도록 UnityPlayerActivity를 수정합니다.
  3. 라이브러리 또는 플러그인 프로젝트를 내보내고 평소처럼 /<your-project>/Assets/Plugins/Android 에 끌어다 놓습니다. Braze 소스 코드는 이미 /<your-project>/Assets/Plugins/Android에 있으므로 라이브러리나 플러그인에 포함하지 마세요.
  4. /<your-project>/Assets/Plugins/Android/AndroidManifest.xml 을 수정하여 BrazeUnityPlayerActivity 하위 클래스를 기본 활동으로 지정합니다.

이제 Braze와 완전히 통합되고 커스텀 UnityPlayerActivity 기능이 포함된 .apk 패키지를 Unity IDE에서 생성할 수 있습니다.

문제 해결

오류: “파일을 읽을 수 없습니다”

다음과 유사한 오류는 안전하게 무시해도 됩니다. Apple 소프트웨어는 Unity가 인식하지 못하는 CgBI라는 독점 PNG 확장을 사용합니다. 이러한 오류는 iOS 빌드나 Braze 번들에서 관련 이미지의 올바른 표시에는 영향을 미치지 않습니다.

1
Could not create texture from Assets/Plugins/iOS/AppboyKit/Appboy.bundle/...png: File could not be read

언리얼 엔진 브레이즈 SDK 소개

Braze 언리얼 SDK 플러그인을 사용하면 가능합니다:

  • 앱 또는 게임 내 세션 평가 및 추적
  • 인앱 구매 및 맞춤 이벤트 추적
  • 표준 및 사용자 지정 속성으로 사용자 프로필 업데이트하기
  • 푸시 알림 보내기
  • 언리얼 앱을 더 큰 캔버스 여정에 통합
  • 인앱 행동을 기반으로 이메일 또는 SMS와 같은 크로스채널 메시징 발송

언리얼 엔진 SDK 통합

1단계: Braze 플러그인 추가

터미널에서 언리얼 엔진 브레이즈 SDK GitHub 리포지토리를 복제합니다.

1
git clone [email protected]:braze-inc/braze-unreal-sdk.git

그런 다음 BrazeSample/Plugins/Braze 디렉토리를 복사하여 앱의 플러그인 폴더에 추가합니다.

2단계: 플러그인 활성화

C++ 또는 블루프린트 프로젝트에 플러그인을 활성화합니다.

C++ 프로젝트의 경우 Braze 모듈을 참조하도록 모듈을 구성하세요. \*.Build.cs file 에서 "Braze"PublicDependencyModuleNames 에 추가합니다.

1
PublicDependencyModuleNames.AddRange(new string[] { "Core", "CoreUObject", "Engine", "InputCore", "Braze" });

블루프린트 프로젝트의 경우 설정 > 플러그인으로 이동한 다음 Braze 옆의 Enabled에 체크합니다.

활성화 플러그인

3단계: API 키와 엔드포인트 설정

프로젝트의 DefaultEngine.ini 에서 API 키와 엔드포인트를 설정하세요.

1
2
3
4
5
[/Script/Braze.BrazeConfig]
bAutoInitialize=True ; true by default, initialize when the project starts
AndroidApiKey= ; your API key
IOSApiKey= ; your API key
CustomEndpoint= ; your endpoint

선택적 구성

로깅

런타임에 C++를 사용하거나 블루프린트 노드에서 로그 레벨을 설정할 수 있습니다.

런타임에 로그 수준을 설정하려면 UBrazeSubsystem::AndroidSetLogLevel 으로 전화하세요.

1
2
3
UBrazeSubsystem* const BrazeSubsystem = GEngine->GetEngineSubsystem<UBrazeSubsystem>();
BrazeSubsystem->AndroidSetLogLevel(EBrazeLogLevel::Verbose);
UBraze* const BrazeInstance = BrazeSubsystem->InitializeBraze();

블루프린트에서 안드로이드 세트 로그 레벨 노드를 사용할 수 있습니다:

블루프린트의 안드로이드 세트 로그 레벨 노드.

Braze SDK 초기화를 호출할 때 로깅이 설정되도록 하려면 InitializeBraze 전에 이 함수를 호출하는 것이 좋습니다.

info.plist 에서 로그 수준을 활성화하려면 설정 > 프로젝트 설정으로 이동한 다음 플랫폼에서 iOS를 선택합니다. 추가 목록 데이터에서 추가 목록 데이터를 찾은 다음 로그 레벨을 입력합니다:

1
2
3
4
5
<key>Appboy</key>
<dict>
  <key>LogLevel</key>
  <string>0</string>
</dict>

기본 로그 수준은 최소 로깅 수준인 8입니다. 로그 수준에 대해 자세히 알아보세요: 기타 SDK 사용자 지정

Integrating the Xamarin SDK

Integrating the Braze Xamarin SDK will provide you with basic analytics functionality as well as working in-app messages with which you can engage your users.

Prerequisites

Before you can integrate the Xamarin Braze SDK, be sure you meet the following requirements:

  • Starting in version 3.0.0, this SDK requires using .NET 6+ and removes support for projects using the Xamarin framework.
  • Starting in version 4.0.0, this SDK dropped support for Xamarin & Xamarin.Forms and added support for .NET MAUI. See Microsoft’s policy around the end of support for Xamarin.

Step 1: Get the Xamarin binding

A Xamarin binding is a way to use native libraries in Xamarin apps. The implementation of a binding consists of building a C# interface to the library, and then using that interface in your application. See the Xamarin documentation. There are two ways to include the Braze SDK binding: using NuGet or compiling from source.

The simplest integration method involves getting the Braze SDK from the NuGet.org central repository. In the Visual Studio sidebar, right click Packages folder and click Add Packages.... Search for ‘Braze’ and install the BrazePlatform.BrazeAndroidBinding package into your project.

The second integration method is to include the binding source. Under appboy-component/src/androidnet6 you will find our binding source code; adding a project reference to the BrazeAndroidBinding.csproj in your Xamarin application will cause the binding to be built with your project and provide you access to the Braze Android SDK.

A Xamarin binding is a way to use native libraries in Xamarin apps. The implementation of a binding consists of building a C# interface to the library and then using that interface in your application. There are two ways to include the Braze SDK binding: using NuGet or compiling from source.

The simplest integration method involves getting the Braze SDK from the NuGet.org central repository. In the Visual Studio sidebar, right-click Packages folder and click Add Packages.... Search for ‘Braze’ and install the latest Xamarin iOS NuGet packages: Braze.iOS.BrazeKit, Braze.iOS.BrazeUI, and Braze.iOS.BrazeLocation into your project.

We also provide the compatibility libraries packages: Braze.iOS.BrazeKitCompat and Braze.iOS.BrazeUICompat, to help make your migration to .NET MAUI easier.

The second integration method is to include the binding source. Under appboy-component/src/iosnet6 you will find our binding source code; adding a project reference to the BrazeiOSBinding.csproj in your Xamarin application will cause the binding to be built with your project and provide you access to the Braze iOS SDK. Make sure BrazeiOSBinding.csproj is showing in your project’s “Reference” folder.

Step 2: Configure your Braze instance

Step 2.1: Configure the Braze SDK in Braze.xml

Now that the libraries have been integrated, you have to create an Braze.xml file in your project’s Resources/values folder. The contents of that file should resemble the following code snippet:

1
2
3
4
5
6
7
8
9
  <?xml version="1.0" encoding="utf-8"?>
  <resources>
    <string translatable="false" name="com_braze_api_key">YOUR_API_KEY</string>
    <string translatable="false" name="com_braze_custom_endpoint">YOUR_CUSTOM_ENDPOINT_OR_CLUSTER</string>
    <string-array name="com_braze_internal_sdk_metadata">
      <item>XAMARIN</item>
      <item>NUGET</item>
    </string-array>
  </resources>

If you are including the binding source manually, remove <item>NUGET</item> from your code.

Step 2.2: Add required permissions to Android manifest

Now that you’ve added your API key, you need to add the following permissions to your AndroidManifest.xml file:

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

For an example of your AndroidManifest.xml, see the Android MAUI sample application.

Step 2.3: Track user sessions and registering for in-app messages

To enable user session tracking and register your app for in-app messages, add the following call to the OnCreate() lifecycle method of the Application class in your app:

1
RegisterActivityLifecycleCallbacks(new BrazeActivityLifecycleCallbackListener());

When setting up your Braze instance, add the following snippet to configure your instance:

1
2
3
var configuration = new BRZConfiguration("YOUR_API_KEY", "YOUR_ENDPOINT");
configuration.Api.AddSDKMetadata(new[] { BRZSDKMetadata.Xamarin });
braze = new Braze(configuration);

See the App.xaml.cs file in the iOS MAUI sample application.

Step 3: Test the integration

Now you can launch your application and see sessions being logged to the Braze dashboard (along with device information and other analytics). For a more in-depth discussion of best practices for the basic SDK integration, consult the Android integration instructions.

Now you can launch your application and see sessions being logged to the Braze dashboard. For a more in-depth discussion of best practices for the basic SDK integration, consult the iOS integration instructions.

이 페이지가 얼마나 도움이 되었나요?
New Stuff!