Skip to content

Integración del SDK de Braze

Aprende a integrar el SDK de Braze en tu aplicación móvil. Cada SDK está alojado en su propio repositorio público de GitHub, que incluye aplicaciones de muestra totalmente compilables que puedes utilizar para probar las características de Braze o implementarlas junto con tus propias aplicaciones. Para saber más, consulta Referencias, Repositorios y Ejemplos de aplicaciones. Para más información general sobre el SDK, consulta Introducción: Visión general de la integración.

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];

Acerca del SDK de Web Braze

El SDK de Web Braze te permite recopilar análisis y mostrar mensajes dentro de la aplicación, push y mensajes de tarjeta de contenido a tus usuarios de la Web. Para más información, consulta la documentación de referencia de JavaScript de .

Integración del SDK de la Web

Paso 1: Instala la biblioteca Braze

Puedes instalar la biblioteca Braze utilizando uno de los siguientes métodos. Si tu sitio web utiliza Content-Security-Policy, consulta nuestra Guía de cabeceras de la política de seguridad de contenidos antes de instalar la biblioteca.

Si tu sitio utiliza los administradores de paquetes NPM o Yarn, puedes añadir el paquete NPM de Braze como dependencia.

A partir de la versión 3.0.0, se incluyen definiciones tipográficas. Para obtener notas sobre la actualización de 2.x a 3.x, consulta nuestro registro de cambios.

1
2
3

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

Una vez instalado, puedes import o require la biblioteca de la forma típica:

1
2
3

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

El SDK de Braze Web puede instalarse desde la biblioteca de plantillas de Google Tag Manager. Se admiten dos etiquetas:

  1. Etiqueta de inicialización: carga el SDK Web en tu sitio web y, opcionalmente, establece el ID de usuario externo.
  2. Etiqueta de acciones: se utiliza para desencadenar eventos personalizados, compras, cambiar ID de usuario o alternar el seguimiento del SDK.

Visita la guía de integración de Google Tag Manager para obtener más información.

Añade el SDK Braze Web directamente a tu HTML haciendo referencia a nuestro script alojado en CDN, que carga la biblioteca de forma asíncrona.

Paso 2: Inicializar el SDK (opcional)

Si has configurado las opciones de inicialización de Braze en un administrador de etiquetas, puedes omitir este paso.

De lo contrario, después de añadir el SDK Braze Web a tu sitio web, inicializa la biblioteca con la clave de API y la URL del punto final SDK que se encuentran en Configuración > Configuración de la aplicación dentro de tu panel Braze. Para obtener una lista completa de las opciones de braze.initialize(), junto con nuestros otros métodos de JavaScript, consulta la documentación de JavaScript de 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();

Configuraciones opcionales

Registro

Para habilitar rápidamente el registro, puedes añadir ?brazeLogging=true como parámetro a la URL de tu sitio web. También puedes habilitar el registro básico o personalizado.

Registro básico

Utiliza enableLogging para registrar mensajes básicos de depuración en la consola de JavaScript antes de que se inicialice el SDK.

1

enableLogging: true

Tu método debe ser similar al siguiente

1
2
3
4
5

braze.initialize('API-KEY', {
    baseUrl: 'API-ENDPOINT',
    enableLogging: true
});
braze.openSession();

Utiliza braze.toggleLogging() para registrar mensajes básicos de depuración en la consola de JavaScript después de inicializar el SDK. Tu método debe ser similar al siguiente

1
2
3
4
5
6

braze.initialize('API-KEY', {
    baseUrl: 'API-ENDPOINT',
});
braze.openSession();
...
braze.toggleLogging();

Registro personalizado

Utiliza setLogger para registrar mensajes de depuración personalizados en la consola de JavaScript. A diferencia de los registros básicos, estos registros no son visibles para los usuarios.

1

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

Sustituye STRING por tu mensaje como parámetro de una sola cadena. Tu método debe ser similar al siguiente

1
2
3
4
5

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

Actualizar el SDK

Cuando hagas referencia al SDK de Braze Web desde nuestra red de entrega de contenidos, por ejemplo, https://js.appboycdn.com/web-sdk/a.a/braze.min.js (como recomiendan nuestras instrucciones de integración predeterminadas), tus usuarios recibirán actualizaciones menores (correcciones de errores y características compatibles con versiones anteriores, versiones a.a.a a a.a.z en los ejemplos anteriores) automáticamente cuando actualicen tu sitio.

Sin embargo, cuando publicamos cambios importantes, te pedimos que actualices el SDK Braze Web manualmente para asegurarte de que nada en tu integración se verá afectado por los cambios de última hora. Además, si descargas nuestro SDK y lo alojas tú mismo, no recibirás ninguna actualización de versión automáticamente y deberás actualizarlo manualmente para recibir las últimas características y correcciones de errores.

Puedes mantenerte al día de nuestra última versión siguiendo nuestra fuente de versiones con el lector RSS o el servicio que prefieras, y consultar nuestro registro de cambios para conocer el historial completo de versiones de nuestro SDK para la Web. Para actualizar el SDK Web de Braze:

  • Actualiza la versión de la biblioteca Braze cambiando el número de versión de https://js.appboycdn.com/web-sdk/[OLD VERSION NUMBER]/braze.min.js, o en las dependencias de tu administrador de paquetes.
  • Si tienes integrado el push web, actualiza el archivo del prestador de servicios en tu sitio: por defecto, se encuentra en /service-worker.js, en el directorio raíz de tu sitio, pero la ubicación puede estar personalizada en algunas integraciones. Debes acceder al directorio raíz para alojar un archivo de prestador de servicios.

Estos dos archivos deben actualizarse coordinadamente para que funcionen correctamente.

Google Tag Manager

Google Tag Manager (GTM ) te permite añadir, eliminar y editar etiquetas de forma remota en tu sitio web sin necesidad de liberar código de producción ni recursos de ingeniería. Braze ofrece las siguientes plantillas GTM:

Ambas etiquetas pueden añadirse a tu espacio de trabajo desde la galería de la comunidad de Google o buscando Braze al añadir una nueva etiqueta desde las plantillas de la comunidad.

imagen de búsqueda de la galería

Política de consentimiento del usuario de la UE actualizada de Google

Como parte de la Política de consentimiento del usuario de la UE de Google, los siguientes atributos personalizados booleanos deben registrarse en los perfiles de usuario:

  • $google_ad_user_data
  • $google_ad_personalization

Si los configuras a través de la integración GTM, los atributos personalizados requieren la creación de una etiqueta HTML personalizada. A continuación se muestra un ejemplo de cómo registrar estos valores como tipos de datos booleanos (no como cadenas):

1
2
3

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

Para más información, consulta Sincronización de audiencias con Google.

Otros métodos de integración

Páginas móviles aceleradas (AMP)

Ver más

Paso 1: Incluir script de notificación push web AMP

Añade la siguiente etiqueta de script asíncrono a tu cabecera:

1

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

Paso 2: Añadir widgets de suscripción

Añade un widget al cuerpo de tu HTML que permita a los usuarios suscribirse y cancelar suscripción desde push.

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>

Paso 3: Añade helper-iframe y permission-dialog

El componente AMP Web Push crea una ventana emergente para gestionar las suscripciones push, por lo que tendrás que añadir los siguientes archivos de ayuda a tu proyecto para habilitar esta característica:

Paso 4: Crear un archivo de prestador de servicios

Crea un archivo service-worker.js en el directorio raíz de tu sitio web y añade el siguiente fragmento de código:

Paso 5: Configurar el elemento HTML de notificación push web de AMP

Añade el siguiente elemento HTML amp-web-push al cuerpo de tu HTML. Ten en cuenta que tienes que añadir tus apiKey y baseUrl como parámetros de consulta a service-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: Desactivar soporte

Si tu sitio utiliza RequireJS u otro cargador de módulos AMD, pero prefieres cargar el SDK de la Web de Braze a través de una de las otras opciones de esta lista, puedes cargar una versión de la biblioteca que no incluya compatibilidad con AMD. Esta versión de la biblioteca puede cargarse desde la siguiente ubicación CDN:

AMD: Cargador de módulos

Si utilizas RequireJS u otros cargadores de módulos AMD, te recomendamos que autoalojes una copia de nuestra biblioteca y la referencies como harías con otros recursos:

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();
});

Electrón

Electron no admite oficialmente notificaciones push web (consulta esta incidencia de GitHub). Hay otras soluciones de código abierto que puedes probar y que no han sido probadas por Braze.

Marco Jest

Al utilizar Jest, es posible que aparezca un error similar a SyntaxError: Unexpected token 'export'. Para solucionarlo, ajusta tu configuración en package.json para ignorar el SDK de Braze:

1
2
3
4
5

"jest": {
  "transformIgnorePatterns": [
    "/node_modules/(?!@braze)"
  ]
}

Marcos SSR

Si utilizas un marco de renderizado del lado del servidor (SSR) como Next.js, puedes encontrar errores porque el SDK está pensado para ejecutarse en un entorno de navegador. Puedes resolver estos problemas importando dinámicamente el SDK.

Puedes conservar las ventajas de la arborescencia al hacerlo exportando las partes del SDK que necesites en un archivo aparte y luego importando dinámicamente ese archivo en tu componente.

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();
    });
}, []);

Alternativamente, si utilizas webpack para empaquetar tu aplicación, puedes aprovechar sus comentarios mágicos para importar dinámicamente sólo las partes del SDK que necesites.

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 ofrece una integración básica de Braze llave en mano. Para configurar la integración, busca Braze en la interfaz de gestión de etiquetas de Tealium y proporciona la clave de API de SDK Web desde tu panel.

Para obtener más información o ayuda detallada sobre la configuración de Tealium, consulta nuestra documentación sobre integración o ponte en contacto con tu director de cuentas de Tealium.

Vite

Si utilizas Vite y ves una advertencia sobre dependencias circulares o Uncaught TypeError: Class extends value undefined is not a constructor or null, puede que necesites excluir el SDK de Braze de su descubrimiento de dependencias:

1
2
3

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

Otros administradores de etiquetas

Braze también puede ser compatible con otras soluciones de administración de etiquetas siguiendo nuestras instrucciones de integración dentro de una etiqueta HTML personalizada. Ponte en contacto con un representante de Braze si necesitas ayuda para evaluar estas soluciones.

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.

Acerca del SDK de Flutter Braze

Después de integrar el SDK Braze Flutter en Android e iOS, podrás utilizar la API Braze en tus aplicaciones Flutter escritas en Dart. Este complemento proporciona una funcionalidad básica de análisis y te permite integrar mensajes dentro de la aplicación y tarjetas de contenido tanto para iOS como para Android con una única base de código.

Integración del SDK de Flutter

Requisitos previos

Antes de integrar el SDK de Braze Flutter, tendrás que completar lo siguiente:

Paso 1: Integrar la biblioteca Braze

Añade el paquete SDK Flutter de Braze desde la línea de comandos. Esto añadirá la línea apropiada a tu pubspec.yaml.

1

flutter pub add braze_plugin

Paso 2: Configuración completa del SDK nativo

Para conectarte a los servidores de Braze, crea un archivo braze.xml en la carpeta android/res/values de tu proyecto. Pega el siguiente código y sustituye la clave de identificador de API y el punto final por tus valores:

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>

Añade los permisos necesarios a tu archivo AndroidManifest.xml:

1
2

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

Añade la importación del SDK de Braze en la parte superior del archivo AppDelegate.swift:

1
2

import BrazeKit
import braze_plugin

En el mismo archivo, crea el objeto de configuración Braze en el método application(_:didFinishLaunchingWithOptions:) y sustituye la clave de API y el punto final por los valores de tu aplicación. A continuación, crea la instancia de Braze utilizando la configuración, y crea una propiedad estática en la dirección AppDelegate para facilitar el acceso:

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
}

Importa BrazeKit en la parte superior del archivo AppDelegate.m:

1

@import BrazeKit;

En el mismo archivo, crea el objeto de configuración Braze en el método application:didFinishLaunchingWithOptions: y sustituye la clave de API y el punto final por los valores de tu aplicación. A continuación, crea la instancia de Braze utilizando la configuración, y crea una propiedad estática en la dirección AppDelegate para facilitar el acceso:

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;
}

Paso 3: Configurar el plugin

Para importar el plugin en tu código Dart, utiliza lo siguiente:

1

import 'package:braze_plugin/braze_plugin.dart';

A continuación, inicializa una instancia del complemento Braze llamando a new BrazePlugin() como en nuestra aplicación de ejemplo.

Probar la integración

Puedes verificar que el SDK está integrado comprobando las estadísticas de sesión en el panel. Si ejecutas tu aplicación en cualquiera de las dos plataformas, deberías ver una nueva sesión en el panel (en la sección Resumen ).

Abre una sesión para un usuario concreto llamando al código siguiente en tu aplicación.

1
2

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

Busca al usuario con {some-user-id} en el panel, en Audiencia > Buscar usuarios. Allí podrás comprobar que se han registrado los datos de sesión y de dispositivo.

Acerca del SDK Braze para React Native

La integración del SDK React Native Braze proporciona una funcionalidad básica de análisis y te permite integrar mensajes dentro de la aplicación y tarjetas de contenido tanto para iOS como para Android con una sola base de código.

Compatibilidad con la nueva arquitectura

La siguiente versión mínima del SDK es compatible con todas las aplicaciones que utilizan la Nueva Arquitectura de React Native:

A partir de la versión 6.0.0 del SDK, Braze utiliza un Módulo Turbo React Native, que es compatible tanto con la Nueva Arquitectura como con la arquitectura puente heredada, lo que significa que no es necesaria ninguna configuración adicional.

Integración del SDK de React Native

Requisitos previos

Para integrar el SDK, se necesita la versión 0.71 o posterior de React Native. Para ver la lista completa de versiones compatibles, consulta nuestro repositorio GitHub del SDK para React Native.

Paso 1: Integrar la biblioteca Braze

1

npm install @braze/react-native-sdk

1

yarn add @braze/react-native-sdk

Paso 2: Elige una opción de configuración

Puedes administrar el SDK de Braze utilizando el plugin Braze Expo o a través de una de las capas nativas. Con el plugin Expo, puedes configurar determinadas características del SDK sin escribir código en ninguna de las capas nativas. Elige la opción que mejor se adapte a las necesidades de tu aplicación.

Paso 2.1: Instala el plugin Braze Expo

Asegúrate de que tu SDK de React Native de Braze sea de la versión 1.37.0 en adelante. Para ver la lista completa de versiones compatibles, consulta el repositorio Braze React Native.

Para instalar el complemento Braze Expo, ejecuta el siguiente comando:

1

expo install @braze/expo-plugin

Paso 2.2: Añade el plugin a tu app.json

En tu app.json, añade el Plugin Braze Expo. Puedes proporcionar las siguientes opciones de configuración:

Ejemplo de configuración:

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"
        }
      ],
    ]
  }
}

Paso 2.3: Construye y ejecuta tu aplicación

Preconstruir tu aplicación generará los archivos nativos necesarios para que funcione el plugin Braze Expo.

1

expo prebuild

Ejecuta tu aplicación como se especifica en los documentos de la Expo. Ten en cuenta que si realizas algún cambio en las opciones de configuración, tendrás que precompilar y ejecutar de nuevo la aplicación.

Paso 2.1: Añade nuestro repositorio

En tu proyecto de nivel superior build.gradle, añade lo siguiente en 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")
    }
}

Esto añadirá Kotlin a tu proyecto.

Paso 2.2: Configurar el SDK de Braze

Para conectarte a los servidores de Braze, crea un archivo braze.xml en la carpeta res/values de tu proyecto. Pega el siguiente código y sustituye la clave de API y el punto final por tus valores:

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>

Añade los permisos necesarios a tu archivo AndroidManifest.xml:

1
2

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

Paso 2.3: Implementar el seguimiento de la sesión del usuario

Las llamadas a openSession() y closeSession() se gestionan automáticamente. Añade el siguiente código al método onCreate() de tu clase 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())
}

Paso 2.4: Maneja las actualizaciones de intención

Si tu MainActivity tiene android:launchMode configurado en singleTask, añade el siguiente código a tu clase 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)
}

Paso 2.1: (Opcional) Configurar archivo de bibliotecas para XCFrameworks dinámicos

Para importar determinadas bibliotecas Braze, como BrazeUI, en un archivo Objective-C++, tendrás que utilizar la sintaxis #import. A partir de la versión 7.4.0 del SDK Swift de Braze, los binarios tienen un canal de distribución opcional como XCFrameworks dinámicos, que son compatibles con esta sintaxis.

Si quieres utilizar este canal de distribución, anula manualmente las ubicaciones de las fuentes de CocoaPods en tu archivo de bibliotecas. Consulta el ejemplo que aparece a continuación y sustituye {your-version} por la versión correspondiente que desees importar:

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'

Paso 2.2: Instalar pods

Dado que React Native vincula automáticamente las bibliotecas a la plataforma nativa, puedes instalar el SDK con la ayuda de CocoaPods.

Desde la carpeta raíz del proyecto:

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

Paso 2.3: Configurar el SDK de Braze

Importa el SDK de Braze en la parte superior del archivo AppDelegate.swift:

1

import BrazeKit

En el método application(_:didFinishLaunchingWithOptions:), sustituye la clave de API y el punto final por los valores de tu aplicación. A continuación, crea la instancia de Braze utilizando la configuración, y crea una propiedad estática en la dirección AppDelegate para facilitar el acceso:

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

Importa el SDK de Braze en la parte superior del archivo AppDelegate.m:

1
2

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

En el método application:didFinishLaunchingWithOptions:, sustituye la clave de API y el punto final por los valores de tu aplicación. A continuación, crea la instancia de Braze utilizando la configuración, y crea una propiedad estática en la dirección AppDelegate para facilitar el acceso:

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;
}

Paso 3: Importa la biblioteca

A continuación, import la biblioteca en tu código React Native. Para más detalles, consulta nuestro proyecto de ejemplo.

1

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

Paso 4: Prueba la integración (opcional)

Para probar tu integración de SDK, inicia una nueva sesión en cualquiera de las plataformas para un usuario llamando al siguiente código en tu aplicación.

1

Braze.changeUser("userId");

Por ejemplo, puedes asignar el ID de usuario al iniciar la aplicación:

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

En el panel de Braze, ve a Búsqueda de usuarios y busca al usuario cuyo ID coincida con some-user-id. Aquí puedes verificar que se han registrado los datos de sesión y de dispositivo.

Integración del SDK de Roku

Paso 1: Añadir archivos

Los archivos del SDK de Braze se encuentran en el directorio sdk_files del repositorio del SDK de Roku de Braze.

  1. Añade BrazeSDK.brs a tu aplicación en el directorio source.
  2. Añade BrazeTask.brs y BrazeTask.xml a tu aplicación en el directorio components.

Paso 2: Añadir referencias

Añade una referencia a BrazeSDK.brs en tu escena principal utilizando el siguiente elemento script:

1

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

Paso 3: Configura

En main.brs, establece la configuración de Braze en el nodo global:

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

Puedes encontrar tu punto final SDK y tu clave de API en el panel de Braze.

Paso 4: Inicializar Braze

Inicializa la instancia de Braze:

1
2

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

Configuraciones opcionales

Registro

Para depurar tu integración Braze, puedes ver los registros de la consola de depuración de Roku para Braze. Consulta el código de depuración de los desarrolladores de Roku para obtener más información.

Acerca del SDK de Unity Braze

Para ver una lista completa de tipos, funciones, variables y demás, consulta el Archivo de Declaraciones de Unity. Además, si ya has integrado Unity manualmente para iOS, puedes cambiar a una integración automatizada.

Integración del SDK de Unity

Requisitos previos

Antes de empezar, comprueba que tu entorno es compatible con la última versión del SDK de Unity de Braze.

Paso 1: Elige tu paquete Braze Unity

El .unitypackage de Braze incluye enlaces nativos para las plataformas Android e iOS, junto con una interfaz en C#.

Hay varios paquetes de Braze Unity disponibles para su descarga en la página de versiones de Braze Unity:

  • Appboy.unitypackage
    • Este paquete incluye los SDK para Android e iOS de Braze y la dependencia SDWebImage para el SDK de iOS, que es necesaria para el correcto funcionamiento de la mensajería dentro de la aplicación de Braze y las características de las tarjetas de contenido en iOS. El framework SDWebImage se utiliza para descargar y mostrar imágenes, incluidos los GIF. Si pretendes utilizar todas las funciones de Braze, descarga e importa este paquete.
  • Appboy-nodeps.unitypackage
    • Este paquete es similar a Appboy.unitypackage, salvo que no está presente el marco SDWebImage. Este paquete es útil si no quieres que el framework SDWebImage esté presente en tu aplicación iOS.

El .unitypackage de Braze incluye enlaces nativos para las plataformas Android e iOS, junto con una interfaz en C#.

El paquete Braze Unity está disponible para su descarga en la página de versiones de Braze Unity con dos opciones de integración:

  1. Appboy.unitypackage solo
    • Este paquete incluye los SDK de Braze para Android e iOS sin dependencias adicionales. Con este método de integración, no funcionarán correctamente las características de mensajería dentro de la aplicación de Braze ni las tarjetas de contenido en iOS. Si quieres utilizar todas las funciones de Braze sin código personalizado, utiliza la opción siguiente.
    • Para utilizar esta opción de integración, asegúrate de que la casilla junto a Import SDWebImage dependency no está marcada en la interfaz de usuario de Unity, en “Configuración de Braze”.
  2. Appboy.unitypackage con SDWebImage
    • Esta opción de integración incluye los SDK de Braze para Android e iOS y la dependencia de SDWebImage para el SDK de iOS, que es necesaria para el correcto funcionamiento de la mensajería dentro de la aplicación de Braze y las características de las tarjetas de contenido en iOS. El framework SDWebImage se utiliza para descargar y mostrar imágenes, incluidos los GIF. Si pretendes utilizar todas las funciones de Braze, descarga e importa este paquete.
    • Para importar automáticamente SDWebImage, asegúrate de marcar la casilla junto a Import SDWebImage dependency en la interfaz de usuario de Unity, en “Configuración de Braze”.

Paso 2: Importa el paquete

En el editor de Unity, importa el paquete a tu proyecto de Unity yendo a Assets (Activos) > Import Package (Importar paquete) > Custom Package (Paquete personalizado). A continuación, haz clic en Importar.

También puedes seguir las instrucciones de importación de paquetes de activos de Unity para obtener una guía más detallada sobre la importación de paquetes de Unity personalizados.

En el editor de Unity, importa el paquete a tu proyecto de Unity yendo a Assets (Activos) > Import Package (Importar paquete) > Custom Package (Paquete personalizado). A continuación, haz clic en Importar.

También puedes seguir las instrucciones de importación de paquetes de activos de Unity para obtener una guía más detallada sobre la importación de paquetes de Unity personalizados.

Paso 3: Configura el SDK

Paso 3.1: Configura AndroidManifest.xml

Cumplir AndroidManifest.xml funcionar. Si tu aplicación no tiene una dirección AndroidManifest.xml, puedes utilizar la siguiente plantilla. De lo contrario, si ya tienes un AndroidManifest.xml, asegúrate de que cualquiera de las siguientes secciones que faltan se añaden a tu AndroidManifest.xml existente.

  1. Ve al directorio Assets/Plugins/Android/ y abre tu archivo AndroidManifest.xml. Esta es la ubicación predeterminada en el editor de Unity.
  2. En tu AndroidManifest.xml, añade los permisos y actividades necesarios de la siguiente plantilla.
  3. Cuando hayas terminado, tu AndroidManifest.xml sólo debe contener una única Actividad con "android.intent.category.LAUNCHER" presente.
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>

Paso 3.2: Actualiza AndroidManifest.xml con el nombre de tu paquete.

Para encontrar el nombre de tu paquete, haz clic en Archivo > Configuración de compilación > Configuración del reproductor > pestaña Android.

En tu AndroidManifest.xml, todas las instancias de REPLACE_WITH_YOUR_PACKAGE_NAME deben sustituirse por tu Package Name del paso anterior.

Paso 3.3: Añadir dependencias gradle

Para añadir dependencias gradle a tu proyecto Unity, habilita primero “Plantilla Gradle principal personalizada” en tu configuración de publicación. Esto creará un archivo gradle de plantilla que utilizará tu proyecto. Un archivo gradle se encarga de establecer las dependencias y otras configuraciones del proyecto en tiempo de compilación. Para más información, consulta el ejemplo de aplicación de Unity de Braze mainTemplate.gradle.

Se necesitan las siguientes dependencias:

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'

También puedes establecer estas dependencias utilizando el Administrador de dependencias externas.

Paso 3.4: Automatización de la integración de Unity con Android

Braze proporciona una solución nativa de Unity para automatizar la integración de Unity con Android.

  1. En el editor de Unity, abre los Ajustes de configuración de Braze navegando hasta Braze > Braze Configuration (Configuración de Braze).
  2. Marca la casilla Automatizar la integración de Android en Unity.
  3. En el campo Clave de API de Braze, introduce la clave de API de tu aplicación que se encuentra en Administrar configuración desde el panel de Braze.

Paso 3.1: Configura tu clave de API

Braze proporciona una solución nativa de Unity para automatizar la integración de Unity en iOS. Esta solución modifica el proyecto creado en Xcode utilizando PostProcessBuildAttribute de Unity y subclasifica el UnityAppController utilizando la macro IMPL_APP_CONTROLLER_SUBCLASS.

  1. En el editor de Unity, abre los Ajustes de configuración de Braze navegando hasta Braze > Braze Configuration (Configuración de Braze).
  2. Marca la casilla Automatizar la integración de Unity iOS.
  3. En el campo Clave de API de Braze, introduce la clave de API de tu aplicación que se encuentra en Administrar configuración.

Si tu aplicación ya está utilizando otra subclase de UnityAppController, tendrás que fusionar la implementación de tu subclase con AppboyAppDelegate.mm.

Personalizar el paquete Unity

Paso 1: Clonar el repositorio

En tu terminal, clona el repositorio de GitHub del SDK de Unity de Braze y, a continuación, navega hasta esa carpeta:

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

Paso 2: Exportar paquete desde repositorio

En primer lugar, inicia Unity y mantenlo en ejecución en segundo plano. A continuación, en la raíz del repositorio, ejecuta el siguiente comando para exportar el paquete a 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

Paso 3: Importar paquete a Unity

  1. En Unity, importa el paquete deseado a tu proyecto Unity navegando a Activos > Importar paquete > Paquete personalizado.
  2. Si hay algún archivo que no quieres importar, desactívalo ahora.
  3. Personaliza el paquete Unity exportado ubicado en Assets/Editor/Build.cs.

Cambiar a una integración automatizada (sólo Swift)

Para aprovechar la integración automatizada de iOS que ofrece el SDK Braze Unity, sigue estos pasos para pasar de una integración manual a una automatizada.

  1. Elimina todo el código relacionado con Braze de la subclase UnityAppController de tu proyecto Xcode.
  2. Elimina las bibliotecas Braze iOS de tu proyecto Unity o Xcode (como Appboy_iOS_SDK.framework y SDWebImage.framework).
  3. Importa de nuevo el paquete Braze Unity a tu proyecto. Para un recorrido completo, consulta Paso 2: Importa el paquete.
  4. Vuelve a configurar tu clave de API. Para un recorrido completo, consulta Paso 3.1: Configura tu clave de API.

Configuraciones opcionales

Registro detallado

Para habilitar el registro detallado en el editor de Unity, haz lo siguiente:

  1. Abre los ajustes de configuración de Braze navegando hasta Braze > Configuración de Braze.
  2. Haz clic en el menú desplegable Mostrar configuración de Android Braze.
  3. En el campo Nivel de registro SDK, introduce el valor “0”.

Compatibilidad con Prime 31

Para utilizar el plugin Unity de Braze con los plugins de Prime31, edita la página AndroidManifest.xml de tu proyecto para utilizar las clases de Actividad compatibles con Prime31. Cambia todas las referencias de com.braze.unity.BrazeUnityPlayerActivity a com.braze.unity.prime31compatible.BrazeUnityPlayerActivity

Mensajería de dispositivos de Amazon (ADM)

Braze soporta la integración de ADM push en aplicaciones Unity. Si quieres integrar ADM push, crea un archivo llamado api_key.txt que contenga tu clave de API de ADM y colócalo en la carpeta Plugins/Android/assets/. Para más información sobre la integración de ADM con Braze, visita nuestras instrucciones de integración push de ADM.

Ampliar el reproductor Braze Unity (sólo Android)

El archivo de ejemplo AndroidManifest.xml proporcionado tiene registrada una clase de Actividad, BrazeUnityPlayerActivity. Esta clase está integrada con el SDK de Braze y amplía UnityPlayerActivity con gestión de sesiones, registro de mensajes dentro de la aplicación, registro de análisis de notificaciones push y mucho más. Consulta Unity para obtener más información sobre la ampliación de la clase UnityPlayerActivity.

Si estás creando tu propio UnityPlayerActivity personalizado en un proyecto de biblioteca o de plugin, tendrás que ampliar nuestro BrazeUnityPlayerActivity para integrar tu funcionalidad personalizada con Braze. Antes de empezar a trabajar en la ampliación de BrazeUnityPlayerActivity, sigue nuestras instrucciones para integrar Braze en tu proyecto Unity.

  1. Añade el SDK para Android de Braze como dependencia a tu proyecto de biblioteca o plugin, tal y como se describe en las instrucciones de integración de SDK para Android de Braze.
  2. Integra nuestro Unity .aar, que contiene nuestra funcionalidad específica de Unity, a tu proyecto de biblioteca Android que estás construyendo para Unity. El appboy-unity.aar está disponible en nuestro repositorio público. Una vez que nuestra biblioteca Unity se haya integrado correctamente, modifica tu UnityPlayerActivity para ampliar BrazeUnityPlayerActivity.
  3. Exporta tu proyecto de biblioteca o plugin y colócalo en /<your-project>/Assets/Plugins/Android de la forma habitual. No incluyas ningún código fuente de Braze en tu biblioteca o plugin, ya que ya estarán presentes en /<your-project>/Assets/Plugins/Android.
  4. Edita tu /<your-project>/Assets/Plugins/Android/AndroidManifest.xml para especificar tu subclase BrazeUnityPlayerActivity como actividad principal.

Ahora deberías poder empaquetar un .apk desde el IDE de Unity que esté totalmente integrado con Braze y contenga tu funcionalidad personalizada de UnityPlayerActivity.

Solución de problemas

Error: “No se ha podido leer el archivo”

Los errores parecidos a los siguientes pueden ignorarse con seguridad. El software de Apple utiliza una extensión PNG propietaria llamada CgBI, que Unity no reconoce. Estos errores no afectarán a tu compilación de iOS ni a la correcta visualización de las imágenes asociadas en el paquete Braze.

1

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

Acerca del SDK Braze de Unreal Engine

Con el plugin Braze Unreal SDK, puedes:

  • Mide y sigue las sesiones dentro de tu aplicación o juego
  • Seguimiento de compras dentro de la aplicación y eventos personalizados
  • Actualiza los perfiles de usuario con atributos estándar y personalizados
  • Enviar notificaciones push
  • Integra tus aplicaciones de Unreal con recorridos más extensos de Canvas
  • Envía mensajería de canales cruzados, como correo electrónico o SMS, basándote en el comportamiento dentro de la aplicación.

Integración del SDK de Unreal Engine

Paso 1: Añade el plugin Braze

En tu terminal, clona el repositorio GitHub del SDK Braze de Unreal Engine.

1

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

A continuación, copia el directorio BrazeSample/Plugins/Braze y añádelo a la carpeta Plugin de tu aplicación.

Paso 2: Habilitar el plugin

Habilita el plugin para tu proyecto C++ o Blueprint.

Para proyectos C++, configura tu módulo para que haga referencia al módulo Braze. En tu \*.Build.cs file, añade "Braze" a tu PublicDependencyModuleNames.

1

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

Para los proyectos Blueprint, ve a Configuración > Plugins, y junto a Braze marca Habilitado.

ActivarPlugin

Paso 3: Configura tu clave de API y tu punto final

Configura tu clave de API y tu punto final en la página DefaultEngine.ini de tu proyecto.

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

Configuraciones opcionales

Registro

Puedes establecer el nivel de registro en tiempo de ejecución utilizando C++ o en un nodo Blueprint.

Para configurar el nivel de registro en tiempo de ejecución, llama a UBrazeSubsystem::AndroidSetLogLevel.

1
2
3

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

En Blueprint, puedes utilizar el nodo Establecer nivel de registro de Android:

El nodo Android Establecer Nivel de Registro en Blueprint.

Para garantizar que el registro está configurado cuando se llama a Inicializar el SDK de Braze, se recomienda llamarlo antes de InitializeBraze.

Para habilitar el nivel de registro en info.plist, ve a Configuración > Configuración del proyecto y, a continuación, selecciona iOS en Plataformas. En Datos PList Extra, busca Datos PList Adicionales, e introduce tu nivel de registro:

1
2
3
4
5

<key>Appboy</key>
<dict>
  <key>LogLevel</key>
  <string>0</string>
</dict>

El nivel de registro predeterminado es 8, que es el registro mínimo. Más información sobre los niveles de registro: Otros SDK Personalizados

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.

Github   Editar esta página en GitHub
¿QUÉ TAN ÚTIL FUE ESTA PÁGINA?
New Stuff!