@allem-sdk/analytics

Provider-agnostic analytics hooks for React. Bring your own analytics provider (Mixpanel, Segment, PostHog, etc.) via a simple adapter interface. Supports multiple adapters simultaneously.

Installation

npm install @allem-sdk/analytics

Usage

import { AnalyticsProvider, useTrack, usePageView, useIdentify } from "@allem-sdk/analytics";

// Define adapters for your providers (use one or many)
const mixpanelAdapter = {
  track: (event, properties) => mixpanel.track(event, properties),
  page: (name, properties) => mixpanel.track_pageview({ page: name, ...properties }),
  identify: (userId, traits) => mixpanel.identify(userId),
};

const posthogAdapter = {
  track: (event, properties) => posthog.capture(event, properties),
  page: (name, properties) => posthog.capture("$pageview", { page: name, ...properties }),
  identify: (userId, traits) => posthog.identify(userId, traits),
};

function App() {
  return (
    <AnalyticsProvider adapters={[mixpanelAdapter, posthogAdapter]}>
      <MyApp />
    </AnalyticsProvider>
  );
}

function ProductPage({ product }) {
  const track = useTrack();
  usePageView("Product Page", { productId: product.id });

  return (
    <button onClick={() => track("Add to Cart", { productId: product.id })}>
      Add to Cart
    </button>
  );
}

Built-in Adapters

Pre-built adapters for popular analytics providers:

import { mixpanelAdapter, posthogAdapter, segmentAdapter, consoleAdapter } from "@allem-sdk/analytics";

| Adapter | Usage | Description | |---------|-------|-------------| | mixpanelAdapter(mixpanel) | Pass your initialized Mixpanel instance | Tracks events, page views, and identifies users with people.set | | posthogAdapter(posthog) | Pass your initialized PostHog instance | Uses capture for events and $pageview for pages | | segmentAdapter(analytics) | Pass window.analytics or Analytics.js instance | Direct mapping to Segment's track, page, identify | | consoleAdapter(prefix?) | No dependencies | Logs all events to console. Great for development. |

import mixpanel from "mixpanel-browser";
import posthog from "posthog-js";

mixpanel.init("YOUR_TOKEN");
posthog.init("YOUR_KEY", { api_host: "https://app.posthog.com" });

// Use one or many adapters simultaneously
<AnalyticsProvider adapters={[mixpanelAdapter(mixpanel), posthogAdapter(posthog), consoleAdapter()]}>
  <App />
</AnalyticsProvider>

Exports

| Export | Type | Description | |--------|------|-------------| | AnalyticsProvider | Component | Context provider accepting one or multiple adapters | | useTrack | Hook | Returns a track(event, properties) function | | usePageView | Hook | Tracks a page view on mount | | useIdentify | Hook | Returns an identify(userId, traits) function | | mixpanelAdapter | Factory | Adapter for Mixpanel | | posthogAdapter | Factory | Adapter for PostHog | | segmentAdapter | Factory | Adapter for Segment / Analytics.js | | consoleAdapter | Factory | Console-logging adapter for development |

Part of Allem SDK

This package can be used standalone or as part of the full SDK. Install allem-sdk to get all packages in one install.

Support

If you find Allem SDK useful, consider supporting its development:

License

MIT - Ahmed Allem