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.

Connection Settings

Click to expand fields

Other features

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

In-app Messaging

Find instructions to configure In-app Messaging in the Braze documentation. 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.

Pre-built subscriptions

Available Braze Web Mode Actions

Build your own subscription. Combine the supported triggers with the following Braze-supported actions:

• Track Event
• Track Purchase
• Update User Profile
• Debounce Middleware

Track Event

Track Event sends Braze a Track Event call when the destination receives a Track event that is not named Order Completed.

Click to expand fields

Track Purchase

Track Purchase sends Braze a Track Purchase call when the destination recieves any event named Order Completed.

Click to expand fields

Update User Profile

Update User Profile sends to Braze a request to update an existing user’s profile attributes when the destination receives an Identify call.

Click to expand fields

Identify Debounce

When enabled for Javascript sources, this action ensure that only Identify calls where at least one updated trait value are sent to Braze. Events with duplicate traits are not sent. To use Identify Debounce with mobile sources, include Segment’s open-source Middleware tool.

This action does not have any fields.

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