Mixpanel integration

CommandBar’s integration with Mixpanel, works in two directions:

1. CommandBar —> Mixpanel: send CommandBar-generated events to Mixpanel, so you have a fuller picture of user engagement
2. Mixpanel —> CommandBar: use Mipxanel user properties and events for Who and When targeting in CommandBar

One-time configuration

Once configured, the integration will "just work" — no maintenance required. You will not need to make any code changes to handle new properties.

Sending CommandBar events to Mixpanel

This is a 1-step integration!

Navigate to Integrations and click Enable on the Mixpanel integration card.

How does this work? What pages will events be sent from?

Events generated by CommandBar will now flow to Mixpanel from any page in your product where (a) CommandBar is booted and (b) Mixpanel is installed.

Why don’t I see events flowing through?

CommandBar sends events to Mixpanel via mixpanel.track(). If you use a different Mixpanel SDK version, you can do the following:

1. Disable the integration

2. After you init CommandBar, put the following code in your app:

   window.CommandBar.addEventSubscriber((eventName, eventData) => {
     // replace the line below with your SDK method
     mixpanel.track();
   });

Using Mixpanel data and events in CommandBar

You can (1) send Mixpanel user events to CommandBar; and (2) send Mixpanel events to CommandBar

Sending properties to CommandBar

You can send any of the existing user properties that you send to Mixpanel to CommandBar. Here’s a simplified code snippet:

// Your existing user properties
var userProperties = {
	plan: "pro",
	role: "admin",
	...
};

// Passed to Mixpanel
mixpanel.people.set(userProperties);

// And additionally sent to CommandBar:
window.CommandBar.boot(userID, userProperties);

// Adding one-off or session only properties to CommandBar is easy too:
window.CommandBar.addMetadata("userIsWorkspaceOwner", true);

Sending events to CommandBar

All events sent to Mixpanel can also be relayed to CommandBar. This allows you to treat any Mixpanel event the same way as a natively-generated CommandBar event.

// Many companies using Mixpanel events have a globally available function
// to track events. The simplest way to ingest all events is to add a
// CommandBar SDK call to trackEvent to this function.

const reportEvent = (event, eventProperties) => {
  mixpanel.track(event, eventProperties);

  window.CommandBar.trackEvent(event, eventProperties);
};