Skip to main content

Product analytics

Mixpanel

The c15t mixpanelAnalytics helper loads the Mixpanel SDK on every page, before the visitor chooses. The helper uses alwaysLoad, but its category is measurement. After the SDK loads, the helper calls mixpanel.opt_out_tracking() while measurement has no consent. It calls mixpanel.opt_in_tracking() while measurement has consent. If the visitor withdraws consent, the helper calls mixpanel.opt_out_tracking() again. By default, c15t also reloads the page.

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
src/consent-scripts.ts
import { mixpanelAnalytics } from '@c15t/integrations/mixpanel-analytics';

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

The helper sets opt_out_tracking_by_default and opt_out_persistence_by_default to true, so the SDK starts a visitor with no stored Mixpanel opt-in as opted out. It then applies the opt-in or opt-out call the helper queued before load. A visitor without consent stays opted out: nothing is tracked, including track calls your code queued before the SDK loaded, and no visitor ID is stored. The SDK still writes an empty mp_* cookie as it starts and removes it during the same page load.

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{ opt_out_tracking_by_default: true, opt_out_persistence_by_default: true }Mixpanel config passed to init, merged over the defaults. 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. Before the SDK loads, the helper queues mixpanel.opt_in_tracking() if measurement is allowed and mixpanel.opt_out_tracking() if not. Mixpanel runs that call during init, before any queued track calls, so a visitor who already consented keeps those events. The helper 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.