# MixpanelClient

A lightweight client providing access to Mixpanel utilities.

# Methods

createTrackingFunction(options?: { productId?, targetProductId? }): Returns a TrackingFunction function sending POST requests to a dedicated tracking endpoint fully compliant with the Workleap platform tracking API.
setGlobalProperty(key, value): Set a single global property that will be attached to all events.
setGlobalProperties(values): Set one or multiple global properties that will be attached to all events.

# Tracking function

A TrackingFunction have the following signature: (eventName, properties: {}, options?: { keepAlive }) => Promise<void>.

eventName: The event name.
properties: The event properties.
options: An optional object literal of options:
- keepAlive: Whether or not to keep the connection alive for the tracking request. It is mostly used for tracking links where the user might navigate away before the request is completed.

The body size for keepalive requests is limited to 64 kibibytes.

# Usage

# Track events

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

const client = useMixpanelClient();

const track = client.createTrackingFunction();

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

# Specific a product id

To track an action targeting a specific product, use the productId option:

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

const client = useMixpanelClient();

const track = client.createTrackingFunction({
    productId: "wlp"
});

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

If a productId is provided both to initializeTelemetry and as an option to createTrackingFunction, the value passed to createTrackingFunction takes precedence.

# Specify a target product

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

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

const client = useMixpanelClient();

const track = client.createTrackingFunction({
    targetProductId: "wov"
});

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 { useMixpanelClient } from "@workleap/telemetry/react";

const client = useMixpanelClient();

const track = client.createTrackingFunction();

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

# Register global properties

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

const client = useMixpanelClient();

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