Integrations

Choose an integration

Each vendor helper in @c15t/integrations returns a script configuration that you register with your c15t provider. Importing a helper installs nothing on its own. Set up consent with your framework quickstart first, then follow the vendor guide.

npm install @c15t/integrations

pnpm add @c15t/integrations

yarn add @c15t/integrations

bun add @c15t/integrations

@c15t/integrations is a separate package. Keep importing c15t itself from c15t, for example c15t/react or c15t/next.

The integrations are grouped by what each tool does. The Category column names the consent category each helper uses. The Loading behavior column shows when each helper requests the vendor. Most wait for the category to be allowed. A few load on every page and pass the permission to the vendor's own consent API, so the browser contacts the vendor before a choice.

Web analytics

Product analytics

Replay and monitoring

Experimentation and personalization

Ads and growth

Data and tags

Chat and embeds

The YouTube and Google Maps guides include examples for every supported framework. Embeds do not require @c15t/integrations.

Read the integration catalog

For programmatic discovery, import builtInScriptIntegrations and BUILT_IN_INTEGRATION_KINDS from @c15t/integrations/registry. Each built-in entry has an integrationKind, typed as IntegrationKind, for the groups above. BUILT_IN_INTEGRATION_KINDS supplies their labels and display order.

The existing integrationCategory, IntegrationCategory and BUILT_IN_INTEGRATION_CATEGORIES keep their v3 values, so existing category filters still work. consentCategory identifies the default consent category or condition for each helper.

Load each vendor once

Remove the vendor's own snippet, tracking image, framework plugin or tag manager entry before adding its helper. c15t cannot gate a copy it did not load. Tag managers and data pipelines such as Segment can load further destinations, which need consent settings of their own.

Framework packages are loaders too. To move their vendors to c15t, see migrate from @next/third-parties for Next.js, and migrate from @nuxt/scripts or migrate from nuxt-gtag for Nuxt.

When a visitor turns off a category they had allowed, c15t reloads the page so that code which already ran stops. Each vendor guide lists what its helper does on revocation and how to check it.

Vendor switches and cookie cleanup

Every helper sets a vendor slug and the vendor's name and privacy policy. Vendor switches are optional: the preference dialog shows only categories until you declare a vendor. Once you do, it lists each helper's vendor with its own switch, and a visitor can allow a category and still switch one vendor off. c15t then does not load that vendor's script. Helpers that load on every page, such as Google Tag Manager, Microsoft UET and Mixpanel, still load and send the vendor a denied signal instead. The dialog lists necessary helpers without a switch. Declare a vendor with the same slug to replace its name and links, for example when you self-host Matomo or PostHog. Gating also leaves behind the cookies a vendor already wrote; clearOnRevocation deletes them when their category is denied. Each framework documents both in its Scripts and embeds group:

Send events only to allowed integrations

The event dispatcher sends one named event to every registered integration that has an event API and is allowed right now. It drops events while measurement is denied, and one vendor's error does not stop delivery to the others. Each framework gives you the provider's dispatcher, so you don't pass the scripts or the consent snapshot yourself:

import { useEventDispatcher } from 'c15t/react';
import { useEffect } from 'react';

export const DocsSearch = ({ path }: { path: string }) => {
	const events = useEventDispatcher({ pageviews: ['posthog'] });
	useEffect(() => {
		events.pageview(path);
	}, [events, path]);
	return (
		<button onClick={() => events.track('docs_search', { resultCount: 4 })}>
			Search
		</button>
	);
};

The dispatcher sends to the scripts registered on the provider. Pass scripts to add more. It reads consent when an event goes out, so an event sent right after a visitor withdraws consent is dropped. Every dispatcher for the same provider shares one pageview history, so a component that remounts or a consent change does not resend or lose a pageview.

track supports Google Tag Manager, Google Tag, PostHog, Mixpanel, Segment, Hightouch, Heap, Amplitude, LogRocket, Adobe Analytics, Databuddy, Plausible, Fathom, Pirsch, Microsoft Clarity, Hotjar, Vercel Analytics, OneDollarStats, Umami, Rybbit, RudderStack and Matomo. pageview sends single-page-app page views only to the integrations named in pageviews: PostHog, Segment or Hightouch. Call it from your router's navigation hook. The first call records the path without sending, and repeated paths or hash-only changes are skipped. Each framework's scripts page shows where to call it.

Without a provider, createEventDispatcher from @c15t/integrations/events takes scripts and a getSnapshot function that returns the live consent snapshot. Create it once and keep it: a new dispatcher starts a new pageview history.

Add a vendor without a helper

Use custom integrations for a vendor without a helper, or an SDK your app already loads. Test every integration with the consent verification guide.