# Getting started

Prefer using the @workleap/telemetry umbrella package over this standalone library.

While we recommend using the @workleap/telemetry umbrella package, Workleap's LogRocket instrumentation can also be used as a standalone @worleap/mixpanel package.

To set it up, follow these steps 👇

# Install the packages

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

pnpm add @workleap/mixpanel

# Initialize Mixpanel

Then, initialize Mixpanel using the initializeMixpanel function:

import { initializeMixpanel, MixpanelProvider, createTelemetryContext } from "@workleap/mixpanel/react";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App.tsx";

const client = initializeMixpanel("development", {
    telemetryContext: createTelemetryContext()
});

const root = createRoot(document.getElementById("root")!);

root.render(
    <StrictMode>
        <MixpanelProvider client={client}>
            <App />
        </MixpanelProvider>
    </StrictMode>
);

# Create a track function

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" });

# Track an event

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

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

const track = useTrackingFunction();

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

# Track a link

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
});

# Set custom user 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/mixpanel/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.

# Integrate with LogRocket

Starting with version 3.0, attaching LogRocket session replays to Mixpanel events requires providing a LogRocketInstrumentationClient to the registration function:

import { initializeMixpanel, MixpanelProvider, createTelemetryContext } from "@workleap/mixpanel/react";
import { registerLogRocketInstrumentation } from "@workleap/logrocket/react";
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { App } from "./App.tsx";

const logRocketInstrumentationClient = registerLogRocketInstrumentation("my-app-id");

const mixpanelClient = initializeMixpanel("development", {
    telemetryContext: createTelemetryContext(),
    logRocketInstrumentationClient
});

const root = createRoot(document.getElementById("root")!);

root.render(
    <StrictMode>
        <MixpanelProvider client={mixpanelClient}>
            <App />
        </MixpanelProvider>
    </StrictMode>
);

# Try it 🚀

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

# Troubleshoot issues

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.