@s-stolz/analytics-react

React adapter for @s-stolz/analytics-core.

Consent-Free Setup

Wrap the app in AnalyticsProvider with core tracker options. Consent-free mode is the default.

import { AnalyticsProvider } from "@s-stolz/analytics-react";

export function App() {
  return (
    <AnalyticsProvider
      options={{
        siteId: "voicepipe",
        endpoint: "https://analytics.example/v1/events",
        environment: "production",
        autoTrackPageViews: false
      }}
    >
      <Routes />
    </AnalyticsProvider>
  );
}

Consent-Based Setup

Set privacyMode to consent_based and render the neutral prompt, or use useAnalyticsConsent to build a custom prompt.

import {
  AnalyticsProvider,
  NeutralConsentPrompt
} from "@s-stolz/analytics-react";

export function App() {
  return (
    <AnalyticsProvider
      options={{
        siteId: "voicepipe",
        endpoint: "https://analytics.example/v1/events",
        environment: "production",
        privacyMode: "consent_based"
      }}
    >
      <NeutralConsentPrompt />
      <Routes />
    </AnalyticsProvider>
  );
}

Page Patterns

Use useAnalyticsPageView for route-aware Page Patterns when a React route has parameters. Set autoTrackPageViews to false on AnalyticsProvider options so the hook owns Page View collection for those routes.

import { useAnalyticsPageView } from "@s-stolz/analytics-react";

function AccountSettings({ accountId }: { accountId: string }) {
  useAnalyticsPageView(
    { pagePattern: "/accounts/:accountId/settings" },
    [accountId]
  );

  return <main>Account settings</main>;
}

Interactions

Use useTrackInteraction for explicit Interactions. Names should be stable kebab-case values.

import { useTrackInteraction } from "@s-stolz/analytics-react";

function PlanButton() {
  const trackInteraction = useTrackInteraction();

  return (
    <button
      type="button"
      onClick={() => {
        trackInteraction("pricing-plan-selected", {
          pagePattern: "/pricing",
          properties: {
            plan: "pro",
            billingCycle: "annual"
          }
        });
      }}
    >
      Select plan
    </button>
  );
}