c15t/docs/integrations/posthog.md

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

---
title: PostHog
description: PostHog is an open-source product analytics platform for tracking
  user behavior, session replays, feature flags, and A/B testing. It supports
  cookieless tracking, allowing analytics to continue even without cookie
  consent.
icon: posthog
group: integrations
---
PostHog is an open-source product analytics platform that helps you understand user behavior, track events, and analyze product usage. Unlike traditional analytics tools, PostHog supports both cookieless and cookie-based tracking. This means you can sync c15t with PostHog and, when your PostHog project is configured for cookieless tracking, continue collecting privacy-preserving analytics after a user rejects measurement consent.

c15t exposes two integration patterns for PostHog. Pick the one that matches how you already load the SDK:

* **PostHog SDK** — your app loads `posthog-js` itself; c15t only synchronizes consent. Recommended for most React apps.
* **PostHog Script** — c15t loads PostHog's array bootstrap as a managed `Script`.

## Integrate with c15t

### SDK pattern

This is the recommended approach if you're using the PostHog JS SDK; it's commonly used in React projects.

1. **Enable cookieless tracking in PostHog** Before using `cookieless_mode`, enable **Cookieless server hash mode** in your PostHog project under **Project Settings** > **Web analytics**. PostHog ignores cookieless events unless this project setting is enabled.

2. **Initialize PostHog** When you initialize PostHog, set `cookieless_mode` to `on_reject`. This keeps PostHog from writing cookies or local/session storage until the user grants measurement consent. If the user rejects measurement consent, c15t calls `opt_out_capturing()` and PostHog switches to cookieless capture.

   ```ts
   posthog.init("phc_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx", {
     api_host: "https://eu.i.posthog.com",
     defaults: "2026-01-30",
     cookieless_mode: 'on_reject'
   })

   posthog.opt_out_capturing() // Avoids cookie-based capture until c15t syncs consent
   ```

3. **Sync settled consent once, then subscribe to real changes** The recommended PostHog SDK approach uses two phases: run one initial sync after c15t has finished resolving consent, then subscribe to future real preference changes with `subscribeToConsentChanges()`.

   With cookieless\_mode: 'on\_reject', denied measurement consent does not mean "no events." It means PostHog records cookieless events without browser persistence. If your product needs denied consent to stop all PostHog event capture, do not use cookieless mode; load or call PostHog only after consent is granted.

   > ⚠️ Warning:
   > Do not use posthog.has\_opted\_in\_capturing() or posthog.has\_opted\_out\_capturing() to decide whether to show your banner. In recent PostHog versions, has\_opted\_in\_capturing() can return true when consent is still pending. Use c15t's consent store as the source of truth, or use PostHog's get\_explicit\_consent\_status() when you specifically need PostHog's stored consent state.
   >
   > ℹ️ Info:
   > To wrap this in your framework, pass the callbacks option to your ConsentManagerProvider the same way you would pass scripts — see the JavaScript, React, or Next.js script loader guide.

   ```ts
   import { getOrCreateConsentRuntime } from 'c15t';
   import posthog from 'posthog-js';

   function syncPostHogMeasurementConsent(hasMeasurementConsent: boolean) {
     if (hasMeasurementConsent) {
       posthog.opt_in_capturing();
     } else {
       posthog.opt_out_capturing();
     }
   }

   const runtime = getOrCreateConsentRuntime({
     mode: 'hosted',
     callbacks: {
       onBannerFetched() {
         syncPostHogMeasurementConsent(
           runtime.consentStore.getState().has('measurement')
         );
       },
     },
   });

   runtime.consentStore
     .getState()
     .subscribeToConsentChanges(({ allowedCategories }) => {
       syncPostHogMeasurementConsent(
         allowedCategories.includes('measurement')
       );
     });
   ```

   > ℹ️ Info:
   > Avoid using onConsentSet plus manual deduplication for PostHog. subscribeToConsentChanges() already gives you the exact change-only semantics most analytics SDKs need.

### Script helper pattern

If you want to load PostHog via a script tag, it's recommended to use this approach.

1. **Choose a region and loading mode** The c15t helper seeds PostHog's initialization queue, loads the bootstrap script, and synchronizes consent through `posthog.opt_in_capturing()` / `posthog.opt_out_capturing()`. You do not need to call `posthog.init()` separately.

   Use region to keep PostHog's API, UI, and bootstrap script hosts aligned. c15t defaults to region: 'eu'; set region: 'us' for PostHog Cloud US. You can still pass apiHost, uiHost, or scriptUrl for self-hosted or proxied setups.

   The helper supports three loading modes:

   * `loadMode: 'always'` — the backwards-compatible default. PostHog loads immediately and c15t synchronizes measurement consent through PostHog's APIs. Use this when you intentionally want PostHog cookieless behavior after rejection.
   * `loadMode: 'after-consent'` — PostHog is not requested until measurement consent is granted. This is the recommended GDPR/EU cookie-banner default when your policy requires no PostHog network activity before consent.
   * `loadMode: 'disabled'` — returns an inert callback-only script with no PostHog network request. Use this for environment flags or temporary rollouts.

   > ℹ️ Info:
   > For a privacy-first GDPR/EU cookie-banner setup, use region: 'eu' with loadMode: 'after-consent'. This keeps PostHog Cloud in the EU region and prevents any PostHog script request until measurement consent is granted.

   The helper includes these PostHog init defaults:

   ```ts
   const initOptions = {
     api_host: 'https://eu.i.posthog.com',
     ui_host: 'https://eu.posthog.com',
     defaults: '2026-01-30',
     cookieless_mode: 'on_reject',
   };
   ```

   You can still override any of these through initOptions. Keep cookieless\_mode: 'on\_reject' when you want PostHog to use cookieless capture after a consent rejection.

2. **Enable cookieless tracking in PostHog** Enable **Cookieless server hash mode** in your PostHog project under **Project Settings** > **Web analytics** when you use `loadMode: 'always'` and want rejected-consent traffic to be recorded cookielessly. This is required by PostHog before cookieless events are accepted.

3. **Add the script helper**

   import \{ type ReactNode } from 'react';
   import \{ ConsentManagerProvider } from '@c15t/react';
   import \{ posthog } from '@c15t/scripts/posthog';

   const scripts = \[
    posthog(\{
    id: 'phc\_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    region: 'eu',
    loadMode: 'after-consent',
    }),
   ];

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

   import \{ type ReactNode } from 'react';
   import \{ ConsentManagerProvider } from '@c15t/nextjs';
   import \{ posthog } from '@c15t/scripts/posthog';

   const scripts = \[
   &#x20;posthog(\{
   &#x20;id: 'phc\_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
   &#x20;region: 'eu',
   &#x20;loadMode: 'after-consent',
   &#x20;}),
   ];

   export function ConsentProvider(\{ children }: \{ children: ReactNode }) \{
   &#x20;return (
   &#x20;\<ConsentManagerProvider
   &#x20;options=\{\{
   &#x20;mode: 'hosted',
   &#x20;backendURL: '/api/c15t',
   &#x20;scripts,
   &#x20;}}
   &#x20;\>
   &#x20;\{children}
   &#x20;\</ConsentManagerProvider>
   &#x20;);
   }import \{ getOrCreateConsentRuntime } from 'c15t';
   import \{ posthog } from '@c15t/scripts/posthog';

   getOrCreateConsentRuntime(\{
   &#x20;mode: 'hosted',
   &#x20;backendURL: 'https\://your-instance.c15t.dev',
   &#x20;scripts: \[
   &#x20;posthog(\{
   &#x20;id: 'phc\_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
   &#x20;region: 'eu',
   &#x20;loadMode: 'after-consent',
   &#x20;}),
   &#x20;],
   });

### No PostHog request before consent

If your policy requires PostHog to be completely absent until the user grants measurement consent, use `loadMode: 'after-consent'`:

```ts
import { posthog } from '@c15t/scripts/posthog';

const scripts = [
  posthog({
    id: 'phc_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
    region: 'eu',
    loadMode: 'after-consent',
  }),
];
```

With this mode, c15t does not inject the PostHog script until `measurement` consent is granted. PostHog cannot record cookieless rejected-consent events because the SDK has not loaded.

For PostHog Cloud US, switch the region:

```ts
posthog({
  id: 'phc_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
  region: 'us',
});
```

## How c15t loads it

* **Category:** `measurement` (Analytics)
* **SDK pattern:** your app loads `posthog-js`; c15t synchronizes
  measurement consent with PostHog opt-in and opt-out APIs.
* **Script helper pattern:** by default, c15t loads PostHog on page start with
  [`alwaysLoad`](/docs/frameworks/react/script-loader#always-load), then
  switches PostHog between cookie-based and cookieless capture as consent
  changes. Set `loadMode: 'after-consent'` to block the script request until
  measurement consent is granted.

## Tracking events in your app

The behavior depends on which pattern you chose:

* **SDK Implementation** — your app loaded `posthog-js` itself, so `posthog.capture(...)` is available once your SDK setup has run. c15t calls `opt_in_capturing()` / `opt_out_capturing()` for you. Pending events before c15t syncs consent may be dropped; after denial, PostHog captures cookieless events.
* **Script Implementation with `loadMode: 'always'`** — `window.posthog` is defined early as a queue. Calls to `posthog.capture(...)` before the bootstrap finishes are replayed after the SDK installs instead of being dropped. c15t queues the current consent decision ahead of those calls, then keeps calling `opt_in_capturing()` / `opt_out_capturing()` as consent changes. After denial, PostHog captures cookieless events when your PostHog project supports cookieless mode.
* **Script Implementation with `loadMode: 'after-consent'`** — PostHog is unavailable until measurement consent is granted. Guard `posthog.capture(...)` calls or call them only after consent.

> ⚠️ **Warning:**
> PostHog may start a new session when a user moves between cookieless and cookie-based capture. This can split pre-consent and post-consent activity into separate sessions, which may inflate session counts or affect funnels around the consent boundary. Treat this as a PostHog analytics limitation, not a c15t consent sync issue. See the upstream PostHog session continuity issue.

```ts
posthog.capture('signup');
```

You do not need to guard these calls with `useConsentManager().has('measurement')` when cookieless measurement after rejection is acceptable. Add your own guard if denied consent should mean no PostHog event capture at all.

## Consent and privacy

PostHog's GDPR guidance recommends using PostHog Cloud EU for robust GDPR compliance, configuring consent clearly, and limiting what personal data is collected. Cookieless mode helps avoid browser persistence when measurement consent is rejected, but it does not replace your own legal basis, consent language, data minimization, IP capture settings, or right-to-be-forgotten process.

## Types

### PosthogConsentOptions

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

\*ExtractedTypeTable: Could not extract "PosthogConsentOptions" from "./packages/scripts/src/vendors/analytics/posthog.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.\*