Braze Web Mode (Actions) 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.

Benefits of Braze Web Mode (Actions) vs Braze Classic

Braze Web Mode (Actions) provides the following benefits over Braze Classic:

• E-commerce mappings. Users who can’t follow the e-commerce spec due to incompatible event names (for example, Trip Booked vs Order Completed) can log purchases in Braze Web Mode (Actions).

Getting Started

1. From the Segment web app, click Catalog.
2. Search for “Braze” in the Catalog, select Braze Web Mode (Actions), and choose which of your sources to connect the destination to.
3. Configure the Connection Settings. API Key and SDK Endpoint are required settings.

Destination Settings

Available Presets

Braze Web Device Mode (Actions) has the following presets:

Available Actions

Build your own Mappings. Combine supported triggers with the following Braze Web Device Mode-supported actions:

• Debounce Middleware

• Track Event

• Update User Profile

• Track Purchase

Debounce Middleware

When enabled, it ensures that only events where at least one changed trait value are sent to Braze, and events with duplicate traits are not sent. Debounce functionality requires a frontend client to work. Therefore, it cannot be used with server-side libraries or with Engage.

Debounce Middleware is a Web action. The default Trigger is: type = "identify" or type = "group"

This action does not have any fields.

Track Event

Reports that the current user performed a custom named event.

Track Event is a Web action. The default Trigger is: type = "track" and event != "Order Completed"

Click to show / hide fields

Update User Profile

Updates a users profile attributes in Braze

Update User Profile is a Web action. The default Trigger is: type = "identify" or type = "group"

Click to show / hide fields

Track Purchase

Reports that the current user made an in-app purchase.

Track Purchase is a Web action. The default Trigger is: type = "track" and event = "Order Completed"

Click to show / hide fields

Other features

Braze Web Mode (Actions) can use the following features of Braze.

In-app Messaging

Once configured, you can 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, make an Identify call with the corresponding userId for that user.

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

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

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: Place this snippet outside of your Segment Snippet within your script tag.

   Note: This requests push permission from the user.

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 the user’s browser supports push 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 receive push notifications. See Soft Push Prompts for instructions on setting up a soft push prompt using Braze In-App Messages.

To unsubscribe a user, call:

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

1. Set your GCM/FCM server API key and SenderID on the Braze dashboard. You can find more details for this here.

2. To support push notifications on Safari, add your Website Push ID into your Segment Settings UI and Segment sends it when the Braze Web SDK initializes. 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. 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, see Braze’s documentation here.

1. When you’d like to display the Soft Push to a user, call:

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

Important differences from the classic Braze destination

• Braze Web Mode (Actions) supports the Braze Web integration. Braze Cloud Mode (Actions) supports server and mobile sources, but to use mobile sources in device-mode, use the Braze Classic destination.

Migration from Braze Classic

Keep the following in mind if you plan to move to Braze (Actions) from the classic Braze destination.

Braze-web settings mapping