Skip to main content

Analytics

Mixpanel

Configure Mixpanel

Copy the 32-character project token from your Mixpanel installation snippet, where it is passed to mixpanel.init. Remove that snippet.

npm install @c15t/integrations@alpha
src/consent-scripts.ts
import { mixpanelAnalytics } from '@c15t/integrations/mixpanel-analytics';

export const scripts = [
	mixpanelAnalytics({
		token: '0123456789abcdef0123456789abcdef',
		initOptions: { opt_out_tracking_by_default: true },
	}),
];

Mixpanel initializes as soon as its SDK loads, before the helper's first opt-in or opt-out call. opt_out_tracking_by_default starts a visitor who has not opted in as opted out, so nothing is tracked during that gap. That includes track calls your code queued before the SDK loaded, which replay during initialization.

Register the scripts

Complete your framework quickstart first. Keep its Inth endpoint, policy, styles and consent UI. Remove the vendor's original script, SDK initializer or tag-manager entry, so the vendor loads only through c15t.

The vendor pages put the helper in src/consent-scripts.ts. If your framework quickstart already has a scripts array, such as the one in c15t.config.ts in the Next.js guide, add the helper to that array instead of creating a second file. The scripts export is a configuration, not an initializer. Add it to the c15t provider you already have, at the registration point for your framework below. These are edits to that provider, not a second provider.

Add the configuration to scripts in c15t.config.ts, next to next.config.ts:

import { defineConsentConfig } from 'c15t/next';
import { scripts } from './src/consent-scripts';

export default defineConsentConfig({ scripts });

Keep the rest of your config, such as mode and routePrefix, in the same call. ConsentRoot reads the config in the browser, so the layout keeps passing only state. App Router, Pages Router and static export all read the same file. See Next.js scripts and embeds.

Options

OptionDefaultBehavior
tokenRequired32-character hexadecimal project token. Surrounding whitespace is trimmed. Any other value logs an error and the script does not load.
initOptions{}Mixpanel config passed to init. Use JSON-serializable values only.
scriptUrlhttps://cdn.mxpnl.com/libs/mixpanel-2-latest.min.jsLoader URL override.

Loading and revocation

mixpanelAnalytics uses the measurement category with alwaysLoad, so the Mixpanel SDK loads on every page, before any choice. When the SDK loads, the helper calls mixpanel.opt_in_tracking() if measurement is allowed and mixpanel.opt_out_tracking() if not. It calls the matching method again on each later consent change. The SDK stays on the page after revocation.

Before the SDK loads, the helper queues track, identify, reset, register, opt_in_tracking and opt_out_tracking on the default instance. Named instances and people.* calls are not queued.

Verify Mixpanel

  1. In a private window with an opt-in policy, load the page. The request to cdn.mxpnl.com appears before you choose. In the console, mixpanel.has_opted_out_tracking() returns true.
  2. Click Reject, then reload. The SDK loads again and still reports opted out. Call mixpanel.track('Test'); no tracking request goes to Mixpanel.
  3. Open Privacy settings and allow measurement. Without a reload, has_opted_out_tracking() returns false and tracking requests appear.
  4. Turn measurement off again and save. c15t reloads the page, and the new page loads the SDK opted out.

See the consent verification guide for navigation and hosting checks.