Ready-made integrations PostHog

PostHog

Markdown
Loading…

Load PostHog with consent, or keep a PostHog you already load in sync with the visitor's choice.

Two integrations cover PostHog. posthog() loads PostHog for you from your project key. posthogSync() leaves loading to you and only turns capture on and off with consent.

Set it up

Install the integrations package:

npm install @cookieyes/scripts

Then add one of the two to the initCookieYes() call you already have. onReject is required. It decides what a "no" means, and PostHog has no safe default for that:

  • "stop": nothing loads until consent. On withdrawal, PostHog and its stored data are removed.
  • "anonymous": PostHog counts visits without a cookie while consent is absent or withdrawn, and switches to normal tracking on accept. This sends requests to PostHog before the visitor decides, and needs Cookieless tracking turned on in your PostHog project settings.
src/consent-manager.tsx
import { initCookieYes } from "@cookieyes/react";
import { posthog } from "@cookieyes/scripts";

initCookieYes({
  mode: "cookie-only",
  regulation: "GDPR",
  integrations: [posthog({ apiKey: "phc_XXXXXXXX", onReject: "stop" })],
});

Remove any PostHog snippet you pasted into the page by hand. The integration adds the script itself.

Capture events with posthog.capture(…) as usual. With "stop", posthog is not on the page before consent, so call it through safeCall(). It does nothing while PostHog is absent and never throws:

import { safeCall } from "@cookieyes/scripts";

safeCall("posthog", "capture", "signup", { plan: "pro" });

Options

OptionDefaultWhat it does
apiKeyrequiredYour project key, "phc_…"
onRejectrequired"stop" or "anonymous", as above
region"us""us" or "eu": where PostHog Cloud stores your data
apiHostnoneThe host of a self-hosted or proxied PostHog. Overrides region
category"analytics"The category the visitor must grant
id"posthog"Only needed when you run more than one project

Already loading PostHog yourself

Keep your own posthog.init() and add posthogSync() instead. It injects nothing: on withdrawal it calls posthog.opt_out_capturing(), on grant posthog.opt_in_capturing(). Initialise PostHog before initCookieYes() runs, and start it opted out, so nothing is captured before consent:

posthog.init("phc_XXXXXXXX", { opt_out_capturing_by_default: true });
integrations: [posthogSync()],

posthogSync() takes only category and id, with the same defaults as above.

Common mistakes

posthog is not defined in the console. The call ran before consent. Use safeCall() as shown above.

With "anonymous", no visits are counted before consent. Cookieless tracking is off in your PostHog project. Turn it on under Settings, Web analytics.

The banner never shows, or shows again for a visitor who decided. Your code reads consent from posthog.has_opted_in_capturing(). Read it from the SDK instead: see useConsent.

Next steps

On this page