Skip to main content

PostHog integration

CommandBar’s integration with PostHog works in two directions:

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

Configuring the PostHog integration

This is a 1-step integration!

Navigate to Integrations and click “Enable” on the PostHog integration card.

PostHog integration card

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

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

Why don’t I see events flowing through?

CommandBar sends events to PostHog via posthog.capture(). If you use a different PostHog SDK version, you can do the following:

  1. Disable the integration

    Disabling the PostHog 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

Using PostHog data and events in CommandBar

You can (1) send PostHog user properties to CommandBar; and (2) send PostHog events to CommandBar.

Sending properties to CommandBar

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

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

// Passed to PostHog

// And additionally sent to CommandBar:

// Adding one-off or session only properties to CommandBar is easy too:
// Let's look at a quick example
// Setting one-time PostHog user properties
$set_once: { userIsWorkspaceOwner: true },

// Sending the same one-time property to CommandBar
window.CommandBar.addMetadata("userIsWorkspaceOwner", true);

Sending events to CommandBar

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

// Many companies using PostHog 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) => {
posthog.capture(event, eventProperties);
CommandBar.trackEvent(event, eventProperties);