# @portxchange/mixpanel-utils

> Wrapper around Mixpanel for consistent setup of Mixpanel in projects

Latest version **1.1.0** (published 2022-01-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install @portxchange/mixpanel-utils
pnpm add @portxchange/mixpanel-utils
yarn add @portxchange/mixpanel-utils
bun add @portxchange/mixpanel-utils
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2022-01-07 |
| First published | 2021-02-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 17.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | erwindetesters, basbz, ivdwiel, mdecorte, robertsreberski_pxp |

## Links

- npm: https://www.npmjs.com/package/@portxchange/mixpanel-utils
- npm.io page: https://npm.io/package/@portxchange/mixpanel-utils

## Dependencies (5)

- [typescript](https://npm.io/package/typescript.md) ^3.7.4
- [mixpanel-browser](https://npm.io/package/mixpanel-browser.md) 2.39.0
- [@portxchange/core](https://npm.io/package/@portxchange/core.md) ^1.0.2
- [@types/mixpanel-browser](https://npm.io/package/@types/mixpanel-browser.md) ^2.35.0
- [@portxchange/shared-styles](https://npm.io/package/@portxchange/shared-styles.md) ^0.3.10

## Recent versions

- 1.1.0 (latest) — 2022-01-07
- 1.0.8 — 2021-06-08
- 1.0.7 — 2021-06-08
- 1.0.6 — 2021-04-22
- 1.0.4 — 2021-02-25
- 1.0.3 — 2021-02-25
- 1.0.2 — 2021-02-25
- 1.0.1 — 2021-02-25
- 1.0.0 — 2021-02-23

## README

# mixpanel-utils

Collection of Mixpanel utility functions for easy setup and usage of Mixpanel.

## Installation

Install this package using `npm install @portxchange/mixpanel-utils`.

## Usage

### Initialisation

First, we need to wrap your application with a Mixpanel provider. To do that, implement the following code, so it's executed before any other Mixpanel code is run:

```js
import React, { useEffect } from "react";
import { MixpanelProvider } from "@portxchange/mixpanel-utils";

export const App = () => (
  <MixpanelProvider mixpanelId={YOUR_MIXPANEL_ID_HERE} config={YOUR_MIXPANEL_CONFIG}>
    <Homepage />
  </MixpanelProvider>
);
```

When this is done, Mixpanel will register itself for your site and start tracking.

### Tracking users

Mixpanel allows you to track user properties, to help with identifying users and some context about how they use your application.

To register a user and track it with Mixpanel, you can implement in the following way:

```js
import React, { useEffect } from "react";

export const UserComponent = (props) => {
  // All Mixpanel utilites are exposed through a hook, so first we have to get those:
  const { identify, setUserProperties, incrementUserProperty } = useMixpanel();

  useEffect(() => {
    // This function registers a unique identifier for the current user, so that can link together individual sessions to one user in Mixpanel
    identify(props.user.id);

    // This function registers properties on the Mixpanel user object
    setUserProperties({
      email: props.user.email, // When logging user data, you might need to obfuscate the data by hashing it to be compliant with GDPR
      name: props.user.name,
      age: props.user.age,
    });
  }, [props.user]);

  const onClick = useCallback((event) => {
    // This function allows to increment a numeric user property by the amount specified in the configuration.
    incrementUserProperty({
      totalNumberOfClicks: 1,
    });
    props.handleClick(event);
  });

  return <button onClick={onClick}>Click me!</button>;
};
```

### Tracking events

The main feature of Mixpanel is being able to track certain events happening within your application. You can track events like so:

```js
import React, { useEffect, useCallback } from "react";

export const ButtonComponent = (props) => {
  const { register, track } = useMixpanel();

  useEffect(() => {
    // Registering super properties will register these properties for every event tracked in the application.
    register({
      date: props.date,
    });
    // You can also register super properties that will be tracked once in the following event. These will not override previous super properties
    registerOnce({
      something: "happened",
    });
  }, [props.date]);

  const onClick = useCallback((event) => {
    // By calling `track` you can fire custom events and track additional data along those:
    track("User clicked something", {});
    props.handleClick(event);
  });

  return <button onClick={onClick}>Click me!</button>;
};
```

### Reset tracking

When someone logs out, you should clear all the super and user properties that you've registered with Mixpanel. You can do that by calling `reset()` from your components:

```js
import React, { useCallback } from "react";

export const LogoutComponent = (props) => {
  const { reset } = useMixpanel();

  const onLogout = useCallback((event) => {
    // Reset Mixpanel to clear all super and user properties
    reset();
    props.onLogout();
  });

  return <button onClick={onLogout}>Log out</button>;
};
```

---
_Source: https://npm.io/package/@portxchange/mixpanel-utils · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._