Braze Destination


Braze, formerly Appboy, is an engagement platform that empowers growth by helping marketing teams to build customer loyalty through mobile, omni channel customer experiences.

The Braze Destination is open-source on GitHub. You can browse the code on Github: iOS, Android (Android and iOS maintained by Braze), Web, Server (Web and Server maintained by Braze). If you find any issues for mobile platforms, please let Braze know, if the issues appear on web or server, let us know.

NOTE: There are currently two major versions of the Braze SDK. Make sure you read important notes regarding migration from Version 1 to Version 2.

This document was last updated on June 13, 2018. If you notice any gaps, outdated information or simply want to leave some feedback to help us improve our documentation, please let us know!

Use Cases

Getting Started

The first step is to make sure Braze supports the source type and connection mode you’ve chosen to implement. You can learn more about what dictates the connection modes we support here.

Web Mobile Server
📱 Device-mode
☁️ Cloud-mode
  1. From your Segment UI’s Destinations page click on “Add Destination”.
  2. Search for “Braze” within the Destinations Catalog and confirm the Source you’d like to connect to.
  3. In your Segment Settings UI, add the “API Key” which can be found in your Braze Dashboard under App Settings > Manage App Group.
  4. You will also need to setup a new App Group REST API Key in the Braze Dashboard under App Settings > Developer Console > API Settings. Instructions can be found here. Note: For this App Group REST API Key, you will only need to select users.track endpoint under “User Data”
  5. If you are implementing via Analytics.js, Segment will automatically load the Braze Web SDK. Otherwise, depending on the source you’ve selected, include Braze’s library by adding the following lines to your dependency configuration.

iOS

  1. Add the Braze Segment Pod to your Podfile:

     pod 'Segment-Appboy'
    

    We recommend using the latest version on CocoaPods since it will contain the most up to date features and bug fixes.

  2. Next, declare Braze’s destination in your app delegate instance:

       SEGAnalyticsConfiguration *config = [SEGAnalyticsConfiguration configurationWithWriteKey:@"YOUR_WRITE_KEY_HERE"];
       [config use:[SEGAppboyIntegrationFactory instance]];
       [SEGAnalytics setupWithConfiguration:config];
    

    Here is a sample project which shows how to integrate the above.

Sample App

Braze has created a sample iOS application that integrates Braze via Segment. Check it out at the Github repo.

Android

  1. In your top-level project build.gradle add the following as a repository under allprojects > repositories.

     maven { url "http://appboy.github.io/appboy-android-sdk/sdk" }
    
  2. Add the Braze Segment destination dependency to your app build.gradle:

    compile 'com.appboy:appboy-segment-integration:+'
    

    We recommend using the latest version on Maven since it will contain the most up-to-date features and bug fixes.

    Note: Our groupId is com.appboy and not com.segment.analytics.android.integrations.

  3. Next, declare Braze’s destination in your Analytics instance:

     Analytics analytics = new Analytics.Builder(context, "YOUR_WRITE_KEY_HERE")
       .use(AppboyIntegration.FACTORY)
       ...
      .build();
    

Sample App

Braze has created a sample Android application that integrates Braze via Segment. Check it out at the Github repo.

Page

If you haven’t had a chance to review our spec, please take a look to understand what the Page method does. An example call would look like:

analytics.page();

Page calls are only sent to Braze if you have enabled either “Track All Pages” or “Track Only Named Pages” within your Segment Settings UI. They will be sent as a custom event.

Identify

If you haven’t had a chance to review our spec, please take a look to understand what the Identify method does. An example call would look like:

analytics.identify('ze8rt1u89', {
  firstName: 'Zaphod',
  lastName: 'Beeblebrox',
  email: 'Zaphod@hotmail.com'
});

When you Identify a user, we’ll pass that user’s information to Braze with userId as Braze’s External User ID. Segment’s special traits recognized as Braze’s standard user profile fields (in parentheses) are:

Segment Event Braze Event
firstName first_name
lastName last_name
birthday dob
avatar image_url
address.city home_city
address.country country
gender gender

All other traits (except their reserved keys) will be sent to Braze as custom attributes. You can send an array of strings as trait values but not nested objects.

Track

If you haven’t had a chance to review our spec, please take a look to understand what the Track method does. An example call would look like:

analytics.track('Purchased Item', {
    product_id: '1234',
    name: 'bag'
})

When you track an event, we will send that event to Braze as a custom event. Note that Braze does not support arrays or nested objects for custom track event properties.

Note: A userId is required for all calls.

Note: We will remove the following custom properties as they are reserved by Braze and the message will be rejected if you tried to send any of them:

  • time
  • product_id
  • quantity
  • event_name
  • price
  • currency

Order Completed

When you track an event with the name Order Completed using the e-commerce tracking API, we will send the products you’ve listed to Braze as purchases.

Purchases

When you pass ecommerce events, the name of your event will be used as the productId in Braze. An example of a purchase event would look like:

analytics.track('Purchased Item', {
    revenue: '2000',
    currency: 'USD'
})

The example above would have “Purchased Item” as its productId and includes two required properties that you must pass in:

  • revenue
  • currency

Braze supports a currency codes as specified in their documentation. Please be aware that any currency reported other than USD will still be shown in your Braze UI in USD based on the exchange rate on the date it was reported.

You can add more product details in the form of key-value pairs to the properties object. However, the following reserved keys will not be passed to Braze if included in your Track call’s properties object:

  • time
  • product_id
  • quantity
  • event_name
  • price

Group

If you haven’t had a chance to review our spec, please take a look to understand what the Group method does. An example call would look like:

analytics.group("1234", {
  name: "Initech",
  industry: "Technology",
  employees: 329,
  plan: "enterprise",
  totalBilled: 830
});

When you call group, we will send a custom attribute to Braze with the name ab_segment_group_<groupId>, where <groupId> is the group’s ID in the method’s parameters. For example, if the group’s ID is 1234, then the custom attribute name will be ab_segment_group_1234. The value of the custom attribute will be set to true.

Other Features

In-app Messaging

Mobile

In-app messages will be registered for and requested by default. This functionality can be disabled by disabling the Enable Automatic In-App Message Registration setting. This is only available for users of the Braze Mobile SDKs.

Web

Instructions on how to set this up within Braze can be found in their docs. Once setup, it allows you to trigger in-app message display as a result of several different event types. By default, all In-App Messages that a user is eligible for are automatically delivered to the user upon a session start event. A new session automatically starts when a user loads your site. If you’d like to force a new session for a user, simply make an identify with the corresponding userId for that user.

If you don’t want your site to immediately display new In-App Messages when they’re received, you can disable automatic display and register your own display subscribers. To do this:

  1. Disable your Automatically Send In-App Messages Destinations setting. By default, it is enabled when you enable the Braze destination.

  2. Create your subscriber by calling:

     analytics.ready(function() {
       window.appboy.subscribeToNewInAppMessages(function(inAppMessages) {
          // Display the first in-app message. You could defer display here by pushing this message to code      within in your own application.
          // If you don't want to use Appboy's built-in display capabilities, you could alternatively pass      the in-app message to your own display code here.
          window.appboy.display.showInAppMessage(inAppMessages[0]);
    
         // Return an array with any remaining, unhandled messages to appboy's internal queue.
         // These will be part of the inAppMessages param the next time this subscriber is invoked.
          return inAppMessages.slice(1);
        });
     });
    

The inAppMessages parameter will be an array of appboy.ab.InAppMessage subclass or appboy.ab.ControlMessage objects, each of which has various lifecycle event subscription methods.

Push Notifications

iOS

  1. Follow the directions to register for push at in Segment’s iOS library docs.
  2. Add the following to your application:didFinishLaunchingWithOptions

     [[SEGAppboyIntegrationFactory instance] saveLaunchOptions:launchOptions];
    
  3. In your application’s application:didReceiveRemoteNotification: method, add the following:
     [[SEGAnalytics sharedAnalytics] receivedRemoteNotification:userInfo];
    
  4. If you integrated the application:didReceiveRemoteNotification:fetchCompletionHandler: in your app, add the following to that method:
      if ([Appboy sharedInstance] == nil) {
       [[SEGAppboyIntegrationFactory instance] saveRemoteNotification:userInfo];
     }
    
  5. If you implemented handleActionWithIdentifier:forRemoteNotification:, add the following to that method:
      if ([Appboy sharedInstance] == nil) {
         [[SEGAppboyIntegrationFactory instance] saveRemoteNotification:userInfo];
       }
    

Android

  1. Follow the directions in Braze’s push notification docs.
  2. If you don’t have Braze automatically register for push (i.e. you pass the push token from an FCM or manual GCM registration) you need to ensure you call registerAppboyPushMessages after Braze is initialized. You can do this by checking if Braze is initialized before trying to pass the push token, and waiting for initializing to set if not.

    You can do this in an onIntegrationReady method:

     String appboyPushToken;
     bool appboyInitialized = false;
     …
     // When you get the push token
     String receivedToken;
    
     appboyPushToken = recievedToken;
     if (appboyInitialized) {
       Appboy.getInstance(getContext()).registerAppboyPushMessages(appboyPushToken);
     }
    
     ….
    
     Analytics.with(this).onIntegrationReady(Appboy, new Callback() {
       @Override public void onIntegrationReady(Object integration) {
         appboyInitialized = true;
         if(appboyPushToken != null) {
           Appboy.getInstance(getContext()).registerAppboyPushMessages(appboyPushToken);
         }
       }
     });
    

Client

  1. To support push notifications on Chrome, you’ll need to enable FCM/GCM as well as configure your site. Check out steps one and two here, for detailed instructions on both.

  2. Browser Registration. In order for a browser to receive push notifications, you must register it for push by calling:

     analytics.ready(function() {
       window.appboy.registerAppboyPushMessages();
     });
    

    Note: We recommend placing this snippet outside of your Segment Snippet within your script tag.

    Note: This will immediately request push permission from the user.

    If you wish to show your own push-related UI to the user before requesting push permission (known as a soft push prompt), you can test to see if push is supported in the user’s browser by calling:

     analytics.ready(function() {
       if (window.appboy.isPushSupported()) {
         // Add your push logic
       }
      });
    

    Braze recommends checking to see if this returns true since not all browsers can recieve push notifications. See below for instructions on setting up a soft push prompt using Braze In-App Messages.

    If you’d like to unsubscribe a user, you can do so by calling:

     analytics.ready(function() {
       window.appboy.unregisterAppboyPushMessages();
     });
    
  3. Set your GCM/FCM server API key and SenderID on the Braze dashboard. You can find more details for this here.

  4. To support push notifications on Safari, add your Website Push ID into your Segment Settings UI and we’ll send it for you when we initialize the Braze Web SDK. To get your Website Push ID, follow the first two bullet points in these instructions.

Soft Push Prompts

  1. Follow step one to create a “Prime for Push” in-app messaging Campaign on the Braze dashboard.

  2. Disable your Automatically Send In-App Messages Destination setting. By default, it is enabled when you enable the Braze destination.

  3. Add the following snippet to your site:

     analytics.ready(function() {
       window.appboy.subscribeToNewInAppMessages(function(inAppMessages) {
         var message = inAppMessages[0];
         if (message != null) {
           var shouldDisplay = true;
    
           if (message instanceof appboy.ab.inAppMessage) {
             // Read the key/value pair for msg-id
             var msgId = message.extras["msg-id"];
    
             // If this is our push primer message
             if (msgId == "push-primer") {
               // We don't want to display the soft push prompt to users on browsers that don't support push, or if the user
               // has already granted/blocked permission
               if (!appboy.isPushSupported() || appboy.isPushPermissionGranted() || appboy.isPushBlocked())     {
                 shouldDisplay = false;
               }
               // Prompt the user when the first button is clicked
               message.buttons[0].subscribeToClickedEvent(function() {
                 appboy.registerAppboyPushMessages();
               });
             }
           }
    
           // Display the message
           if (shouldDisplay) {
             appboy.display.showInAppMessage(message);
           }
          }
    
         // Remove this message from the array of IAMs and return whatever's left
         return inAppMessages.slice(1);
        });
      });
    

    For more details on this snippet, check out the Braze’s docs here.

Note: We recommend placing this snippet outside of your Segment Snippet within your script tag.

4) When you’d like to display the Soft Push to a user, call:

```
 analytics.ready(function() {
  window.appboy.logCustomEvent("prime-for-push")
 });
```

Enable IDFA collection

To enable IDFA collection in Braze, please add following lines to your Podfile:

post_install do |installer|
  installer.pods_project.targets.each do |target|
    target.build_configurations.each do |config|
      if target.name == "Appboy-iOS-SDK"
        target.build_configurations.each do |config|
          config.build_settings['GCC_PREPROCESSOR_DEFINITIONS'] ||= [
          '$(inherited)', 'ABK_ENABLE_IDFA_COLLECTION']
          end
      end
    end
  end
end

Migrating to v2 of the Braze Web SDK

There are currently two major versions of this SDK: 1 and 2. Segment currently supports both as migrating to Version 2 requires some important changes to your website.

If you have never implemented Braze on your site, either via Segment or natively, you can ignore this section. If you have had Braze running before and want to migrate to Version 2 you must ensure you remove all references to appboy.min.css from your site. This is very important as it will cause issues with Version 2 of their SDK. Once you have done this you can select Version 2 via the “Braze Web SDK Version” with your Segment Settings UI.

Personas

You can send computed traits and audiences generated through Segment Personas to this destination as a user property. To learn more about Personas, reach out for a demo.

For user-property destinations, an identify call will be sent to the destination for each user being added and removed. The property name will be the snake_cased version of the audience name you provide with a true/false value. For example, when a user first completes an order in the last 30 days, we will send an identify call with the property order_completed_last_30days: true, and when this user no longer satisfies we will set that value to false.

When the audience is first created an identify call is sent for every user in the audience. Subsequent syncs will only send updates for those users which were added or removed since the last sync.

Settings

Segment lets you change these destination settings from your Segment dashboard without having to touch any code.

Do Not Load Font Awesome

Web Only: Braze uses FontAwesome for in-app message icons. By default, Braze will automatically load FontAwesome from https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css. To disable this behavior (e.g. because your site uses a customized version of FontAwesome), set this option to true. Note that if you do this, you are responsible for ensuring that FontAwesome is loaded on your site - otherwise in-app messages may not render correctly. This setting is only applicable if you are using version 2 of the Braze Web SDK.

Enable Logging

Web Only: Set to true to enable logging by default. Note that this will cause Braze to log to the javascript console, which is visible to all users! You should probably remove this or provide an alternate logger with appboy.setLogger() before you release your page to production. This setting is only applicable if you are using version 2 of the Braze Web SDK.

Log Purchase when Revenue is present

When this option is enabled, all Track calls with a property called revenue will trigger Braze’s LogRevenue event.

Open News Feed Cards In New Tab

By default, links from news feed cards load in the current tab or window. Set this option to true to make links from news feed cards open in a new tab or window. This setting is only applicable if you are using version 2 of the Braze Web SDK.

Track All Pages

This will send all page calls to Braze as a Loaded/Viewed a Page event. This option is disabled by default since Braze isn’t generally used for page view tracking.

App Identifier

The API key found in your Braze dashboard, used to identify your application as the app identifier. (Formerly ‘API Key’)

Enable Automatic In-App Message Registration

Mobile Only: Every activity in your app must be registered with Braze to allow it to add in-app message views to the view hierarchy. By default, Braze’s Segment integration automatically registers every activity. However, if you would like to manually register activities, you may do so by disabling this setting. For more information, see the Braze documentation.

Appboy Datacenter

Choose your Appboy Gateway (ie. US 01, US 02, EU 01, etc.).

Enable HTML In-App Messages

Web only: Enabling this option will allow Braze dashboard users to write HTML In-App messages. Check out Braze Documentation for more information on this setting. This setting is only applicable if you are using version 2 of the Braze Web SDK.

Open In-App Messages In New Tab

By default, links from in-app message clicks load in the current tab or a new tab as specified in the dashboard on a message-by-message basis. Set this option to true to force all links from in-app message clicks open in a new tab or window. This setting is only applicable if you are using version 2 of the Braze Web SDK.

Braze Web SDK Version

Web Only: The major version of the Braze web SDK you would like to use. Please reference their changelog for more info. Please ensure you read this section of our documentation carefully before changing this setting.

Automatically Send In-App Messages

Web Only: When this is enabled, all In-App Messages that a user is eligible for are automatically delivered to the user. If you’d like to register your own display subscribers or send soft push notifications to your users, make sure to disable this option.

Minimum Interval Between Trigger Actions In Seconds

Web Only: By default, a trigger action will only fire if at least 30 seconds have elapsed since the last trigger action. Provide a value for this configuration option to override that default with a value of your own. We do not recommend making this value any smaller than 10 to avoid spamming the user with notifications. This setting is only applicable if you are using version 2 of the Braze Web SDK.

Safari Website Push ID

Web Only: To send push notifications on Safari, Braze needs your Website Push Id. To get your Webite Push ID, check out the first two bullet points here.

Session Timeout In Seconds

Web Only: By default, sessions time out after 30 minutes of inactivity. Provide a value for this configuration option to override that default with a value of your own. This setting is only applicable if you are using version 2 of the Braze Web SDK.

Track Only Named Pages

This will send only page calls to Braze that have a name associated with them. For example, page('Signup') would translate to Viewed Signup Page in Braze.

Allow Crawler Activity

Web Only: By default, the Braze Web SDK ignores activity from known spiders or web crawlers, such as Google, based on the user agent string. This saves datapoints, makes analytics more accurate, and may improve page rank. However, if you want Braze to log activity from these crawlers instead, you may set this option to true.

REST API Key

This can be found in your Braze dashboard under App Settings > Developer Console. (Formerly ‘App Group Identifier’)

Custom API Endpoint

If you’ve been assigned an API endpoint by the Braze team specifically for use with their Mobile or Javascript SDKs, please input that here. It should look something like: sdk.api.appboy.eu. Otherwise, leave this blank.

Custom REST API Endpoint

If you’ve been assigned an API endpoint by the Braze team specifically for use with their REST API, please input that here. It should look something like “https://foo.bar.braze.com”. Otherwise, leave this blank.

Service Worker Location

Specify your serviceWorkerLocation as defined in the Braze Web SDK documentation: https://js.appboycdn.com/web-sdk/latest/doc/module-appboy.html

Update Existing Users Only

Server Side only: A flag to determine whether to update existing users only, defaults to false

Adding Braze to the integrations object

To add Braze to the integrations JSON object (for example, to filter data from a specific source), use one of the following valid names for this integration:

  • Appboy

  • Braze

Get started with Segment

Segment is the easiest way to integrate your websites & mobile apps data to over 300 analytics and growth tools.
or
Create free account