c15t/docs/integrations/mixpanel-analytics.md

Headless JavaScript consent management platform for cookie banners, privacy preferences, consent storage, and script gating.

---
title: Mixpanel Analytics
description: Load Mixpanel with c15t and let Mixpanel's own opt-in and opt-out
  APIs follow measurement consent.
group: integrations
icon: mixpanel
---
Mixpanel helps you track product usage, funnels, and retention. The `mixpanelAnalytics()` helper always loads the Mixpanel library, initializes it after the bundle is ready, and uses Mixpanel's own `opt_in_tracking()` and `opt_out_tracking()` methods to keep tracking aligned with `measurement` consent.

## Integrate with c15t

**React**

```tsx
import { type ReactNode } from 'react';
import { ConsentManagerProvider } from '@c15t/react';
import { mixpanelAnalytics } from '@c15t/scripts/mixpanel-analytics';

const scripts = [
  mixpanelAnalytics({
    token: '1234567890abcdef1234567890abcdef',
  }),
];

export function ConsentProvider({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'hosted',
        backendURL: 'https://your-instance.c15t.dev',
        scripts,
      }}
    >
      {children}
    </ConsentManagerProvider>
  );
}
```

**Next.js**

```tsx
'use client';

import { type ReactNode } from 'react';
import { ConsentManagerProvider } from '@c15t/nextjs';
import { mixpanelAnalytics } from '@c15t/scripts/mixpanel-analytics';

const scripts = [
  mixpanelAnalytics({
    token: '1234567890abcdef1234567890abcdef',
  }),
];

export function ConsentProvider({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'hosted',
        backendURL: '/api/c15t',
        scripts,
      }}
    >
      {children}
    </ConsentManagerProvider>
  );
}
```

**JavaScript**

```ts
import { getOrCreateConsentRuntime } from 'c15t';
import { mixpanelAnalytics } from '@c15t/scripts/mixpanel-analytics';

getOrCreateConsentRuntime({
  mode: 'hosted',
  backendURL: 'https://your-instance.c15t.dev',
  scripts: [
    mixpanelAnalytics({
      token: '1234567890abcdef1234567890abcdef',
    }),
  ],
});
```

## How c15t loads it

* **Category:** `measurement` (Analytics)
* **Loads when:** immediately (`alwaysLoad: true`)
* **Consent behavior:** c15t keeps the SDK loaded and toggles tracking by calling Mixpanel's opt-in and opt-out APIs when consent changes.

## Configure the integration

You can pass serializable init options through to `mixpanel.init(...)`.

```ts
import { mixpanelAnalytics } from '@c15t/scripts/mixpanel-analytics';

mixpanelAnalytics({
  token: '1234567890abcdef1234567890abcdef',
  initOptions: {
    debug: true,
  },
});
```

## Tracking events in your app

Because Mixpanel is configured with `alwaysLoad: true`, `window.mixpanel` is available as soon as the script loads, even before `measurement` consent is granted. You can still call `window.mixpanel.track(...)` from app code; consent suppression is handled by Mixpanel's opt-in/opt-out methods that c15t triggers on consent updates.

## Types

### MixpanelAnalyticsOptions

|Property|Value|
|:--|:--|
|Type Name|\`MixpanelAnalyticsOptions\`|
|Source Path|\`./packages/scripts/src/vendors/analytics/mixpanel-analytics.ts\`|

\*ExtractedTypeTable: Could not extract "MixpanelAnalyticsOptions" from "./packages/scripts/src/vendors/analytics/mixpanel-analytics.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*

### Script

|Property|Value|
|:--|:--|
|Type Name|\`Script\`|
|Source Path|\`./packages/core/src/libs/script-loader/types.ts\`|

\*ExtractedTypeTable: Could not extract "Script" from "./packages/core/src/libs/script-loader/types.ts" using base path "/home/runner/work/c15t/c15t". Verify the path/name and that the file is included by your tsconfig.\*