Mixpanel features

To make data-informed decisions, understand user behavior, and measure product impact, Workleap has adopted Mixpanel, an analytics platform that helps understand how users interact with a product.

The @workleap/telemetry package add basic Mixpanel tracking capabilities to an application. It provides a single track function that sends POST requests to a dedicated tracking endpoint compliant with the Workleap platform tracking API.

Track an event

Events can be tracked by creating a tracking function with the useMixpanelTrackingFunction hook:

import { useMixpanelTrackingFunction } from "@workleap/telemetry/react";

const track = useMixpanelTrackingFunction();

Then, use the returned track function to send a telemetry event:

import { useMixpanelTrackingFunction } from "@workleap/telemetry/react";

const track = useMixpanelTrackingFunction();

track("ButtonClicked", { "Trigger": "ChangePlan", "Location": "Header" });

Track an event for a target product

To track an action targeting another product, use the targetProductId option of useMixpanelTrackingFunction:

import { useMixpanelTrackingFunction } from "@workleap/telemetry/react";

const track = useMixpanelTrackingFunction({
    targetProductId
});

track("ButtonClicked", { "Trigger": "ChangePlan", "Location": "Header" });

Track a link

To track a link click, use the keepAlive option to keep the page alive while the tracking request is being processed:

import { useMixpanelTrackingFunction } from "@workleap/telemetry/react";

const track = useMixpanelTrackingFunction();

track("LinkClicked", { "Trigger": "ChangePlan", "Location": "Header" }, {
    keepAlive: true
});

Correlation ids

Two correlation ids are automatically added to every trace:

• Telemetry Id: Identifies a single application load. It's primarily used to correlate Honeycomb traces with the other telemetry platforms.
• Device Id: Identifies the user's device across sessions. This value is extracted from the shared wl-identity cookie, which is used across Workleap's marketing sites and web applications.

LogRocket session URL

If LogRocket instrumentation is enabled, Mixpanel events are enriched with the LogRocket session URL as soon as it becomes available:

Set global properties

Most applications need to set custom properties about the current user environment on all events. To help with that, MixpanelClient expose the setGlobalEventProperties method:

import { useMixpanelClient } from "@workleap/telemetry/react";

const client = useMixpanelClient();

client.setGlobalEventProperties({
    "User Id": "123" 
})

Now, every event recorded after the execution of setGlobalEventProperties will include the custom property User Id.

Define scoped properties

To scope custom properties to a specific section of the application, wrap it with a MixpanelPropertiesProvider. Define the provider with a static object of Mixpanel properties, and all nested components tracking Mixpanel with a track function created by the useMixpanelTrackingFunction hook will automatically append those properties to their events:

import { MixpanelPropertiesProvider } from "@workleap/telemetry/react";
import { NestedComponent } from "./NestedComponent.tsx";

const MixpanelProperties = {
    section: "User Form"
};

function App() {
    return (
        <MixpanelPropertiesProvider value={MixpanelProperties}>
            <NestedComponent />
        </MixpanelPropertiesProvider>
    )
}