@antribute/tracking v0.1.0-dev.000c377e11b18c5110d5255f08eff9f74b0c67e8

Antribute Tracking

An Antribute abstraction over Mixpanel

Installation

pnpm i @antribute/tracking

Usage

Client-Side

In the root of your app, add the following:

import { TrackingProvider } from '@antribute/tracking';

function MyApp() {
  return (
    <TrackingProvider value={{ token: process.env.NEXT_PUBLIC_MIXPANEL_TOKEN }}>
      {/* The rest of your app goes here! */}
    </TrackingProvider>
  );
}

export default MyApp;

To track events in individual components, do the following

import { useTracking } from '@antribute/tracking';

function MyComponent() {
  const track = useTracking();

  const handleClick = () => {
    track('button-click');
  };

  return (
    <button onClick={handleClick} type="button">
      Click Me!
    </button>
  );
}

export default MyComponent;

Server-Side

To track events in server-side code, do the following

import { track } from '@antribute/tracking/server';

function MyBackendFunction() {
  track({ event: 'some-backend-event', token: process.env.NEXT_PUBLIC_MIXPANEL_TOKEN });
  // Finish your function
}