# Getting started

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.

This 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.

First, open a terminal at the root of the application and install the following packages:

pnpm add @workleap/telemetry @workleap/mixpanel

Then, initialize Mixpanel using the initializeMixpanel function:

import { initializeMixpanel } from "@workleap/mixpanel";

initializeMixpanel("wlp", "development", {
    verbose: true
});

Then create a track function using the useTrackingFunction hook if the host application is in React:

import { useTrackingFunction } from "@workleap/mixpanel/react";

const track = useTrackingFunction();

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

Otherwise use the createTrackingFunction directly:

import { createTrackingFunction } from "@workleap/mixpanel";

const track = createTrackingFunction();

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

Finally, using the retrieved track function, send a telemetry event:

import { useTrackingFunction } from "@workleap/mixpanel/react";

const track = useTrackingFunction();

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

Link clicks requires to keep the page alive while the tracking request is being processed. To do so, set the keepAlive option of the track function:

import { useTrackingFunction } from "@workleap/mixpanel/react";

const track = useTrackingFunction();

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

Most applications need to set custom properties on events about the current user environment. To help with that, @workleap/mixpanel expose the setSuperProperties function.

Update your application code to include the setSuperProperties function:

import { setSuperProperties } from "@workleap/mixpanel";

setSuperProperties({
    "User Id": "123" 
})

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

Start the application in a development environment using the dev script. Render a page, then navigate to your Mixpanel instance. Go to "Events" page. If you are tracking events, you should see a new event appear.

You can try filtering the event list using different properties, such as:

• User Id

If you are experiencing issues with this guide:

• Set the verbose predefined option to true.
• Open the DevTools console and look for logs starting with [mixpanel].
• Refer to the sample on GitHub.

The initializeMixpanel function automatically adds two properties to every event to unify Mixpanel with the other telemetry platforms:

• Telemetry Id: Identifies a single application load. It's primarily used to correlate with Honeycomb traces.
• 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.

To correlate a session with other telemetry platforms, filter the session list using these user traits.

To benefit from the new integrated experience, follow the migration guide for v2.0.