Braze Vega SDK

Installation

While Vega is in pre-release, the Braze Vega SDK is installed as a local package through npm. We recommend copying the braze folder from the extracted tarball to your preferred directory.

Then, add the Braze Vega SDK to your package.json:

{
  "dependencies": {
    "@braze/vega-sdk": "../vega-sdk" // replace file path with your relative file path
  }
}

Usage

The Braze Vega SDK has many similarities with the web SDK's API, with the main differences being that the User class no longer exists and that most of the methods are now asynchronous due to the nature of Vega's storage APIs.

Available methods:

| Method | Description | | ------------------------------------------ | ------------------------------------------------------------------------------------- | | initialize | Initializes the Braze Vega SDK | | destroy | Destroys the current instance of the Braze Vega SDK | | addToCustomUserAttributeArray | Adds to a custom user attribute array | | addUserAlias | Adds an alias to the current user | | addUserToSubscriptionGroup | Adds the current user to the specified subscription group | | changeUser | Identifies the user with the provided ID | | deferInAppMessage | Stores an in-app message to be later retrieved by getDeferredInAppMessage | | disableSdk | Prevents data storage and network requests. Useful for user opt-outs. | | enableSdk | Removes the opt-out flag stored by disableSdk. Does not initialize the SDK. | | getDeferredInAppMessage | Retrieves the in-app message stored by deferInAppMessage | | getDeviceId | Returns the device ID, a GUID generated by the SDK | | getUserId | Returns the current user's ID | | handleBrazeAction | Handles a Braze click action from an in-app message | | incrementCustomUserAttribute | Increments a custom user attribute by the desired amount | | isDisabled | Returns whether the SDK has been disabled by disableSdk | | logCustomEvent | Logs a custom event to the Braze backend | | logInAppMessageButtonClick | Logs a button click for a given in-app message | | logInAppMessageClick | Logs a click for a given in-app message | | logInAppMessageHtmlClick | Logs a click for a given HTML in-app message | | logInAppMessageImpression | Logs an impression for a given in-app message | | logPurchase | Logs a purchase event | | openSession | Creates a session start event if a session is not currently active and unexpired. | | removeAllSubscriptions | Removes all subscriptions to in-app messages, SDK authentication failure events, etc. | | removeFromCustomUserAttributeArray | Removes from a custom user attribute array. | | removeSubscription | Removes a subscription (e.g. to in-app messages) using the subscription ID. | | removeUserFromSubscriptionGroup | Removes the current user from the specified subscription group. | | requestImmediateDataFlush | Flushes any queued data (events, attributes, etc.) to the backend immediately. | | setCustomUserAttribute | Sets a custom attribute on the current user | | setCustomUserLocationAttribute | Set a custom location attribute on the current user | | setLogger | Sets the logger to the provided function, instead of the default console.log. | | setUserCountry | Sets the current user's country. Overrides the detected country. | | setUserDateOfBirth | Sets the current user's date of birth. | | setUserEmail | Sets the current user's email address | | setUserEmailNotificationSubscriptionType | Sets the current users' email notification subscription type. | | setUserFirstName | Sets the current user's first name | | setUserHomeCity | Sets the current user's home city. | | setUserLanguage | Sets the current user's language. Overrides the detected language. | | setUserLastKnownLocation | Sets the last known location for the current user. | | setUserPushNotificationSubscriptionType | Sets the current user's email notification subscription type | | setUserPhoneNumber | Sets the current user's phone number | | setUserPhoneNumber | Sets the current user's phone number | | setUserGender | Sets the current user's gender | | subscribeToInAppMessage | Sets a callback that is invoked when an in-app message is triggered. | | toggleLogging | Toggles whether SDK logging is enabled. | | wipeData | Wipes all data stored by the SDK for the current API key. |

Methods have more detailed documentation in their type declaration files, which can be viewed using VSCode's Intellisense.

Example integration:

import { useEffect } from "react-native";
import {
  initialize,
  changeUser,
  logCustomEvent,
  openSession
} from "@braze/vega-sdk";

const App = () => {
  useEffect(() => {
    const initBraze() = async () => {
      initialize("YOUR-API-KEY", "YOUR-SDK-ENDPOINT", {
        sessionTimeoutInSeconds: 60,
        appVersionNumber: "1.2.3.4",
      });
      // you must await/resolve the changeUser promise before calling other Braze methods
      // or events/attributes may be set on the incorrect user
      await changeUser("abc123");
      await openSession();
      logCustomEvent("visited-page", { pageName: "home" });
      setCustomUserAttribute("my-attribute", "my-attribute-value");
      setUserCountry("USA");
    }
    initBraze();
  }, []);
}

Debugging / Troubleshooting

Pass enableLogging: true to initialize() or use toggleLogging() to enable SDK logging to the console. You can provide a custom logger via setLogger().

Support & Feedback

Have feedback on the SDK or encountering an issue? Reach out to us at [email protected]