# Migrate to v3.0

This major version introduces several important changes. initializeMixpanel now returns a client instance. The standalone createTrackingFunction and setSuperProperties functions has been moved to the client, telemetry correlation ids are no longer implicitly added to session replays, and global variables for third-party integrations have been deprecated. To attach telemetry correlation ids to session replays, you must now provide a TelemetryContext instance. Third-party libraries such as Squide and the Platform widgets should also be explicitly provided with the returned client instance to use Mixpanel.

• Removed the setSuperProperty and setSuperProperties standalone functions, use the client setGlobalEventProperty and setGlobalEventProperties methods instead.

• The createTrackingFunction has been deprecated, use the client createTrackingFunction method instead.
• The window.__WLP_MIXPANEL_IS_INITIALIZED__ global variable have been deprecated. Instead, provide a client instance to the third-party libraries.

• The telemetryId and deviceId correlation ids are no longer implicitly attached to LogRocket session replays. To attach these ids, provide a TelemetryContext instance to the initializeMixpanel function. You can create a TelemetryContext instance using the createTelemetryContext utility function.
• If your application is a React application, you must now import everything from @workleap/mixpanel/react rather than @workleap/mixpanel.

The initializeMixpanel function now returns a client that must be forwarded to the MixpanelProvider. In addition, a TelemetryContext instance must be manually provided to the registration function to ensure correlation ids continue being attached to Mixpanel events.

Before:

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

const client = initializeMixpanel("wlp", "development");

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

root.render(
    <StrictMode>
        <App />
    </StrictMode>
);

Now:

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("wlp", "development", {
    telemetryContext: createTelemetryContext()
});

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

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

The setSuperProperty and setSuperProperties standalone functions are not exported anymore. Use the client setGlobalEventProperty and setGlobalEventProperties methods instead.

Before:

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

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

Now:

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

const client = useMixpanelClient();

client.setGlobalEventProperty("User Id", "123");

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

The createTrackingFunction standalone function is not exported anymore. Use the client createTrackingFunction method instead.

Before:

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

const track = createTrackingFunction();

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

Now:

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

const client = useMixpanelClient();

const track = client.createTrackingFunction();

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

• A new MixpanelProvider React context provider is available to forward a MixpanelClient instance.
• A new useMixpanelClient hook is available to retrieve the provided MixpanelClient instance.