@c15t/react 3.0.0-alpha.2 → 3.0.0-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +91 -67
- package/README.md +21 -17
- package/SKILL.md +34 -0
- package/dist/aggregate-components.js +1 -1
- package/dist/chunk-warming.js +1 -1
- package/dist/component-hooks/use-headless-consent-ui.js +1 -1
- package/dist/component-hooks/use-headless-iab-consent-ui.js +1 -1
- package/dist/component-hooks/use-panel-trigger.js +1 -1
- package/dist/components/consent-gate/atoms.js +1 -1
- package/dist/components/consent-gate/consent-gate.js +1 -1
- package/dist/components/consent-preferences-link/consent-preferences-link.js +1 -1
- package/dist/components/iab-panel/atoms/card.js +1 -1
- package/dist/components/iab-panel/atoms/feature-item.js +2 -0
- package/dist/components/iab-panel/atoms/header.js +1 -1
- package/dist/components/iab-panel/atoms/purpose-item.js +1 -1
- package/dist/components/iab-panel/atoms/stack-item.js +1 -1
- package/dist/components/iab-panel/iab-panel.js +1 -1
- package/dist/components/iab-panel/index.js +1 -1
- package/dist/components/iab-prompt/atoms/overlay.js +1 -1
- package/dist/components/iab-prompt/atoms/root.js +1 -1
- package/dist/components/panel/atoms/card.js +1 -1
- package/dist/components/panel/atoms/overlay.js +1 -1
- package/dist/components/panel/atoms/root.js +1 -1
- package/dist/components/panel/index.js +1 -1
- package/dist/components/panel/panel.js +1 -1
- package/dist/components/panel-trigger/atoms/button.js +1 -1
- package/dist/components/panel-trigger/atoms/icon.js +1 -1
- package/dist/components/panel-trigger/atoms/root.js +1 -1
- package/dist/components/panel-trigger/atoms/toolbar.js +1 -1
- package/dist/components/panel-trigger/atoms/trigger-icons.js +1 -0
- package/dist/components/panel-trigger/panel-trigger-toolbar.js +1 -1
- package/dist/components/preferences/atoms/accordion.js +1 -1
- package/dist/components/preferences/atoms/root.js +1 -1
- package/dist/components/preferences/atoms/vendor-list.js +1 -1
- package/dist/components/preferences/index.js +1 -1
- package/dist/components/prompt/atoms/overlay.js +1 -1
- package/dist/components/prompt/atoms/root.js +1 -1
- package/dist/components/prompt/components.js +1 -1
- package/dist/components/prompt/policy-actions.js +1 -1
- package/dist/components/shared/libs/compose-refs.js +1 -0
- package/dist/components/shared/libs/slot.js +1 -1
- package/dist/components/shared/primitives/button.js +1 -1
- package/dist/components/shared/ui/accordion/accordion.js +1 -1
- package/dist/components/shared/ui/collapsible/collapsible.js +1 -1
- package/dist/components/shared/ui/dialog/dialog.js +1 -1
- package/dist/components/shared/ui/icon.js +1 -1
- package/dist/components/shared/ui/logo.js +1 -1
- package/dist/components/shared/ui/preference-item/preference-item.js +1 -1
- package/dist/components/shared/ui/switch/switch.js +1 -1
- package/dist/components/shared/ui/tabs/tabs.js +1 -1
- package/dist/consent-theme.js +1 -0
- package/dist/context/consent-tracking-context.js +1 -1
- package/dist/devtools.js +1 -1
- package/dist/draft.js +1 -1
- package/dist/external-iab-context.js +1 -1
- package/dist/headless.js +1 -1
- package/dist/hooks/use-committed-ref.js +2 -0
- package/dist/hooks/use-focus-trap.js +1 -1
- package/dist/hooks.js +1 -1
- package/dist/iab/styles.tw3.css +5 -45
- package/dist/iab-context.js +1 -1
- package/dist/index.js +1 -1
- package/dist/kernel-selector.js +1 -0
- package/dist/module-hooks/iframe-blocker.js +1 -1
- package/dist/module-hooks/network-blocker.js +1 -1
- package/dist/module-hooks/network-hold.js +2 -0
- package/dist/module-hooks/persistence.js +1 -1
- package/dist/panel.js +1 -1
- package/dist/postcss-tailwind3.js +1 -0
- package/dist/preferences.js +1 -2
- package/dist/provider.js +1 -1
- package/dist/server/fetch-ssr-data.js +1 -1
- package/dist/server/headers.js +1 -1
- package/dist/server/normalize-url.js +1 -1
- package/dist/styles.tw3.css +16 -61
- package/dist/transports/offline.js +1 -1
- package/dist/ui-save.js +1 -1
- package/dist/utils/deferred-module.js +1 -1
- package/dist/utils/merge-slot-props.js +1 -1
- package/dist/utils/theme-utils.js +1 -1
- package/dist/version.js +1 -1
- package/dist-types/chunk-warming.d.ts +41 -8
- package/dist-types/component-hooks/use-headless-consent-ui.d.ts +1 -1
- package/dist-types/component-hooks/use-headless-iab-consent-ui.d.ts +1 -1
- package/dist-types/components/iab-panel/atoms/feature-item.d.ts +28 -0
- package/dist-types/components/iab-panel/atoms/purpose-item.d.ts +4 -1
- package/dist-types/components/iab-panel/atoms/stack-item.d.ts +6 -1
- package/dist-types/components/iab-panel/iab-panel.d.ts +2 -2
- package/dist-types/components/iab-panel/index.d.ts +6 -2
- package/dist-types/components/iab-panel/use-iab-translations.d.ts +4 -0
- package/dist-types/components/iab-prompt/iab-prompt.d.ts +2 -2
- package/dist-types/components/iab-prompt/index.d.ts +2 -2
- package/dist-types/components/panel/atoms/card.d.ts +1 -0
- package/dist-types/components/panel/index.d.ts +1 -0
- package/dist-types/components/panel/panel.d.ts +1 -1
- package/dist-types/components/panel-trigger/atoms/trigger-icons.d.ts +20 -0
- package/dist-types/components/preferences/index.d.ts +1 -0
- package/dist-types/components/prompt/components.d.ts +6 -0
- package/dist-types/components/shared/libs/compose-refs.d.ts +20 -0
- package/dist-types/components/shared/ui/accordion/accordion.d.ts +1 -0
- package/dist-types/components/shared/ui/collapsible/collapsible.d.ts +1 -0
- package/dist-types/components/shared/ui/icon.d.ts +2 -1
- package/dist-types/components/shared/ui/logo.d.ts +0 -10
- package/dist-types/components/shared/ui/preference-item/preference-item.d.ts +14 -0
- package/dist-types/components/shared/ui/switch/switch.d.ts +1 -0
- package/dist-types/components/shared/ui/tabs/tabs.d.ts +1 -0
- package/dist-types/consent-theme.d.ts +38 -0
- package/dist-types/context/consent-tracking-context.d.ts +10 -0
- package/dist-types/context/theme-context.d.ts +2 -2
- package/dist-types/context.d.ts +6 -0
- package/dist-types/devtools.d.ts +13 -2
- package/dist-types/draft.d.ts +50 -7
- package/dist-types/headless.d.ts +0 -1
- package/dist-types/hooks/use-committed-ref.d.ts +24 -0
- package/dist-types/hooks/use-focus-trap.d.ts +3 -1
- package/dist-types/hooks.d.ts +56 -13
- package/dist-types/iab.d.ts +1 -1
- package/dist-types/index.d.ts +4 -3
- package/dist-types/kernel-selector.d.ts +66 -0
- package/dist-types/module-hooks/iframe-blocker.d.ts +27 -0
- package/dist-types/module-hooks/network-blocker.d.ts +23 -0
- package/dist-types/module-hooks/network-hold.d.ts +47 -0
- package/dist-types/panel.d.ts +13 -1
- package/dist-types/postcss-tailwind3.d.ts +21 -0
- package/dist-types/preferences.d.ts +12 -1
- package/dist-types/provider.d.ts +62 -12
- package/dist-types/server/headers.d.ts +14 -4
- package/dist-types/server/normalize-url.d.ts +14 -7
- package/dist-types/server/types.d.ts +12 -1
- package/dist-types/transports/offline.d.ts +7 -16
- package/dist-types/ui-config-context.d.ts +9 -1
- package/dist-types/ui-save.d.ts +21 -1
- package/dist-types/utils/deferred-module.d.ts +3 -1
- package/dist-types/utils/merge-slot-props.d.ts +15 -1
- package/dist-types/utils/theme-utils.d.ts +17 -2
- package/dist-types/version.d.ts +1 -1
- package/docs/README.md +91 -67
- package/docs/assets/v3/bottom-bar.png +0 -0
- package/docs/assets/v3/brand-card.png +0 -0
- package/docs/assets/v3/brand-preferences.png +0 -0
- package/docs/assets/v3/choice-wall.png +0 -0
- package/docs/assets/v3/headless-bar-html.png +0 -0
- package/docs/assets/v3/headless-bar-mobile.png +0 -0
- package/docs/assets/v3/headless-bar.png +0 -0
- package/docs/assets/v3/slim-bar.png +0 -0
- package/docs/concepts/choose-your-setup.md +87 -0
- package/docs/{frameworks/react/concepts → concepts}/consent-categories.md +30 -8
- package/docs/concepts/consent-state.md +357 -0
- package/docs/{guides → concepts}/data-fetching.md +31 -27
- package/docs/concepts/how-consent-works.md +123 -0
- package/docs/{frameworks/react/concepts/policy-presets.md → concepts/policies.md} +7 -59
- package/docs/customization/class-names.md +202 -0
- package/docs/customization/dark-mode.md +157 -0
- package/docs/customization/motion.md +119 -0
- package/docs/customization/overview.md +67 -33
- package/docs/customization/recipes.md +839 -47
- package/docs/customization/slots.md +216 -35
- package/docs/customization/stylesheets.md +147 -0
- package/docs/customization/tailwind.md +842 -0
- package/docs/customization/tokens.md +166 -36
- package/docs/customization/translations.md +61 -3
- package/docs/frameworks/react/callbacks.md +118 -0
- package/docs/frameworks/react/clear-on-revocation.md +106 -0
- package/docs/frameworks/react/components/consent-banner.md +42 -28
- package/docs/frameworks/react/components/consent-dialog-link.md +13 -11
- package/docs/frameworks/react/components/consent-dialog-trigger.md +81 -76
- package/docs/frameworks/react/components/consent-dialog.md +100 -55
- package/docs/frameworks/react/components/consent-gate.md +45 -24
- package/docs/frameworks/react/components/consent-provider.md +126 -0
- package/docs/frameworks/react/components/consent-widget.md +32 -20
- package/docs/frameworks/react/components/dev-tools.md +52 -84
- package/docs/frameworks/react/components.md +105 -0
- package/docs/frameworks/react/compose.md +354 -0
- package/docs/frameworks/react/content-security-policy.md +126 -0
- package/docs/frameworks/react/customize.md +250 -0
- package/docs/frameworks/react/embeds.md +89 -0
- package/docs/frameworks/react/hooks.md +65 -0
- package/docs/frameworks/react/iab.md +222 -0
- package/docs/frameworks/react/network-blocker.md +140 -0
- package/docs/frameworks/react/quickstart.md +139 -101
- package/docs/frameworks/react/rendering.md +128 -0
- package/docs/frameworks/react/scripts.md +115 -0
- package/docs/frameworks/react/translations.md +155 -0
- package/docs/frameworks/react/troubleshooting.md +92 -47
- package/docs/frameworks/react/vendor-consent.md +170 -0
- package/docs/guides/banner-experiments.md +654 -0
- package/docs/guides/troubleshooting.md +120 -47
- package/docs/guides/verify-consent.md +81 -49
- package/docs/integrations/adobe-analytics.md +168 -160
- package/docs/integrations/ahrefs-analytics.md +153 -155
- package/docs/integrations/amplitude.md +163 -157
- package/docs/integrations/building-integrations.md +136 -37
- package/docs/integrations/clearbit.md +155 -155
- package/docs/integrations/cloudflare-web-analytics.md +157 -157
- package/docs/integrations/cloudflare-zaraz.md +210 -262
- package/docs/integrations/crisp.md +165 -159
- package/docs/integrations/databuddy.md +158 -174
- package/docs/integrations/fathom-analytics.md +159 -157
- package/docs/integrations/front-chat.md +322 -0
- package/docs/integrations/google-maps.md +119 -84
- package/docs/integrations/google-tag-manager.md +179 -164
- package/docs/integrations/google-tag.md +164 -161
- package/docs/integrations/heap.md +164 -156
- package/docs/integrations/hightouch.md +162 -158
- package/docs/integrations/hotjar.md +160 -156
- package/docs/integrations/intercom.md +184 -154
- package/docs/integrations/klaviyo.md +486 -0
- package/docs/integrations/linkedin-insights.md +175 -151
- package/docs/integrations/logrocket.md +161 -157
- package/docs/integrations/matomo-analytics.md +189 -179
- package/docs/integrations/meta-pixel.md +189 -151
- package/docs/integrations/microsoft-clarity.md +164 -156
- package/docs/integrations/microsoft-uet.md +149 -155
- package/docs/integrations/mixpanel-analytics.md +156 -161
- package/docs/integrations/one-dollar-stats.md +306 -0
- package/docs/integrations/openai-pixel.md +205 -302
- package/docs/integrations/overview.md +143 -83
- package/docs/integrations/pinterest-tag.md +329 -0
- package/docs/integrations/pirsch.md +170 -160
- package/docs/integrations/plausible-analytics.md +173 -159
- package/docs/integrations/posthog.md +227 -242
- package/docs/integrations/promptwatch.md +155 -155
- package/docs/integrations/reddit-pixel.md +186 -158
- package/docs/integrations/rudderstack.md +202 -187
- package/docs/integrations/rybbit-analytics.md +172 -161
- package/docs/integrations/segment.md +183 -155
- package/docs/integrations/snapchat-pixel.md +187 -157
- package/docs/integrations/tiktok-pixel.md +172 -151
- package/docs/integrations/umami-analytics.md +164 -159
- package/docs/integrations/vercel-analytics.md +167 -158
- package/docs/integrations/x-pixel.md +177 -151
- package/docs/integrations/youtube.md +122 -87
- package/docs/upgrade-v3.md +490 -354
- package/package.json +15 -9
- package/dist/component-hooks/use-manager.js +0 -2
- package/dist-types/component-hooks/use-manager.d.ts +0 -45
- package/docs/assets/v3/brand-bar.png +0 -0
- package/docs/assets/v3/mobile-card.png +0 -0
- package/docs/assets/v3/preferences.png +0 -0
- package/docs/frameworks/react/components/consent-manager-provider.md +0 -75
- package/docs/frameworks/react/hooks/use-consent-manager/overview.md +0 -58
- package/docs/frameworks/react/iab/overview.md +0 -53
- package/docs/frameworks/react/script-loader.md +0 -63
- package/docs/frameworks/react/styling/overview.md +0 -217
- package/docs/guides/consent-state.md +0 -60
- package/docs/guides/deployment-modes.md +0 -75
- package/docs/integrations/clear-on-revocation.md +0 -167
- package/docs/integrations/granular-consent.md +0 -208
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Choose a deployment mode
|
|
3
|
-
description: Choose who runs your consent backend, then select manifest, init or
|
|
4
|
-
offline resolution for your deployment.
|
|
5
|
-
group: guides
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
## Use Inth for managed policy and records
|
|
9
|
-
|
|
10
|
-
Start with [Inth](https://inth.com) unless you need to operate the consent
|
|
11
|
-
service yourself or deliberately need only local browser records. Configure
|
|
12
|
-
policy rules and trusted origins in the project, then use its exact backend
|
|
13
|
-
endpoint in your framework setup.
|
|
14
|
-
|
|
15
|
-
| Backend ownership | Policy source | Record storage | Use when |
|
|
16
|
-
| ------------------------- | ------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------------------------------- |
|
|
17
|
-
| Inth hosted service | Centrally managed policy through a manifest or `/init` | Browser records plus backend submissions | You want managed policy and consent records |
|
|
18
|
-
| Self-hosted c15t | Your backend's manifest or `/init` | Browser records plus your database | You need to operate the service and its infrastructure |
|
|
19
|
-
| Browser-only offline mode | Bundled `policyRules` | Browser persistence | Local development and tests. Not recommended for production environments. |
|
|
20
|
-
|
|
21
|
-
Hosted and self-hosted c15t use the same transport protocol. Switching who runs
|
|
22
|
-
the backend does not require switching from manifests to `/init`.
|
|
23
|
-
|
|
24
|
-
## Choose data fetching separately
|
|
25
|
-
|
|
26
|
-
For Next.js deployments with a runtime server, use the
|
|
27
|
-
[manifest setup](https://c15t.com/docs/frameworks/next/data-fetching). It reuses public policy data
|
|
28
|
-
in your application while consent writes still go to Inth. Regular backend
|
|
29
|
-
`/init` is available when you want backend-owned request resolution or a simpler
|
|
30
|
-
browser setup. See [data fetching and transports](./data-fetching.md) for
|
|
31
|
-
the comparison, including custom transports and offline mode.
|
|
32
|
-
|
|
33
|
-
Manifest resolution removes the per-visitor `/init` request, and with it the
|
|
34
|
-
backend's only count of visitors. The server adapters replace it with a session
|
|
35
|
-
report: after each resolution, on a server-rendered page or the same-origin
|
|
36
|
-
init route, the host posts a small report to the backend's `POST /sessions`,
|
|
37
|
-
server-to-server and detached from the response. The browser makes no request
|
|
38
|
-
and the report stores no identity; the visitor's IP and user agent travel as
|
|
39
|
-
forwarded headers under the backend's usual IP handling. Each report is one
|
|
40
|
-
resolution; a page view can produce a `render` and a `route` report, and the
|
|
41
|
-
consuming side groups them into sessions by address and user agent within a
|
|
42
|
-
window. Static output resolves in the browser and sends none. Set `reportSessions: false` on an adapter to turn
|
|
43
|
-
it off.
|
|
44
|
-
|
|
45
|
-
## Match initialization to your application output
|
|
46
|
-
|
|
47
|
-
| Application output | Initial state | Required setup |
|
|
48
|
-
| ------------------ | ------------------------- | ----------------------------------------------------------- |
|
|
49
|
-
| Request SSR | Prepared for this visitor | Adapter request helper and matching client configuration |
|
|
50
|
-
| Static HTML or SPA | Resolved in the browser | Reachable external URLs or deliberately bundled local rules |
|
|
51
|
-
|
|
52
|
-
Request SSR can include the visitor's prompt in the initial HTML. Pass the
|
|
53
|
-
prepared records and policy resolution through to hydration. Do not convert
|
|
54
|
-
effective permissions into new stored choices.
|
|
55
|
-
|
|
56
|
-
Static HTML is shared across visitors. It cannot contain a choice resolved from
|
|
57
|
-
each visitor's cookies or geography at build time. A static site can still use
|
|
58
|
-
Inth through browser requests. A same-origin `/api/c15t` URL only works if a
|
|
59
|
-
service actually serves it; a Next.js static export does not run API routes.
|
|
60
|
-
|
|
61
|
-
A manifest contains reusable public policy data. A resolved init response and
|
|
62
|
-
personalized consent HTML belong to a request. Do not give them the same shared
|
|
63
|
-
cache treatment.
|
|
64
|
-
|
|
65
|
-
## Handle initialization and storage failures
|
|
66
|
-
|
|
67
|
-
While no policy resolves, optional permissions stay denied and the stock
|
|
68
|
-
consent UI stays hidden. No banner can mean pending or failed initialization.
|
|
69
|
-
It does not mean permission to load analytics. Observe errors before changing
|
|
70
|
-
presentation, and do not silently switch to offline policy after a hosted
|
|
71
|
-
request fails.
|
|
72
|
-
|
|
73
|
-
Browser storage can also be unavailable. A working in-memory interaction does
|
|
74
|
-
not prove the choice survives reload. Use
|
|
75
|
-
[verification](./verify-consent.md) to test the actual deployment.
|
|
@@ -1,167 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Clear on revocation
|
|
3
|
-
description: Remove configured first-party cookies and Web Storage keys when
|
|
4
|
-
their consent category is denied.
|
|
5
|
-
group: integrations
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
## Configure cleanup
|
|
9
|
-
|
|
10
|
-
Add `clearOnRevocation` to your provider or runtime options. Declare only the
|
|
11
|
-
data owned by each optional category:
|
|
12
|
-
|
|
13
|
-
```ts
|
|
14
|
-
import { hosted, type ClearOnRevocationConfig } from 'c15t';
|
|
15
|
-
import { createConsentRuntime } from 'c15t/runtime';
|
|
16
|
-
|
|
17
|
-
const clearOnRevocation = {
|
|
18
|
-
measurement: {
|
|
19
|
-
cookies: ['_ga', '_ga_*'],
|
|
20
|
-
localStorage: ['analytics:*'],
|
|
21
|
-
},
|
|
22
|
-
marketing: {
|
|
23
|
-
cookies: ['_fbp'],
|
|
24
|
-
sessionStorage: ['campaign-id'],
|
|
25
|
-
},
|
|
26
|
-
} satisfies ClearOnRevocationConfig;
|
|
27
|
-
|
|
28
|
-
const runtime = createConsentRuntime({
|
|
29
|
-
mode: hosted({ url: '/api/c15t' }),
|
|
30
|
-
clearOnRevocation,
|
|
31
|
-
});
|
|
32
|
-
|
|
33
|
-
// Start in the browser after mount. The endpoint must serve your c15t backend.
|
|
34
|
-
runtime.start();
|
|
35
|
-
|
|
36
|
-
// Call runtime.dispose() when the app no longer needs consent management.
|
|
37
|
-
```
|
|
38
|
-
|
|
39
|
-
For React, pass the same configuration through `ConsentProvider.options`:
|
|
40
|
-
|
|
41
|
-
```tsx
|
|
42
|
-
import type { ReactNode } from 'react';
|
|
43
|
-
import { ConsentProvider, hosted } from 'c15t/react';
|
|
44
|
-
|
|
45
|
-
const mode = hosted({ url: '/api/c15t' });
|
|
46
|
-
|
|
47
|
-
export function Consent({ children }: { children: ReactNode }) {
|
|
48
|
-
return (
|
|
49
|
-
<ConsentProvider
|
|
50
|
-
options={{
|
|
51
|
-
mode,
|
|
52
|
-
clearOnRevocation: {
|
|
53
|
-
measurement: { cookies: ['_ga', '_ga_*'] },
|
|
54
|
-
},
|
|
55
|
-
}}
|
|
56
|
-
>
|
|
57
|
-
{children}
|
|
58
|
-
</ConsentProvider>
|
|
59
|
-
);
|
|
60
|
-
}
|
|
61
|
-
```
|
|
62
|
-
|
|
63
|
-
The same option is available in Next.js and TanStack Start `ConsentRoot` props, Vue and
|
|
64
|
-
Nuxt configuration, Svelte providers, and Astro integration options. Solid and
|
|
65
|
-
other headless integrations can use `createConsentRuntime` as shown above.
|
|
66
|
-
Every adapter uses the same cleanup module.
|
|
67
|
-
|
|
68
|
-
Omitting `clearOnRevocation` leaves cleanup disabled. The provider option is
|
|
69
|
-
initial-only. Remount the provider to replace its cleanup configuration. For
|
|
70
|
-
a shared runtime, configure the runtime owner rather than a borrowing provider.
|
|
71
|
-
|
|
72
|
-
## Matching names and cookie scopes
|
|
73
|
-
|
|
74
|
-
Use an exact string or a nonempty prefix followed by `*`. `_ga_*` matches
|
|
75
|
-
`_ga_ABC123`; it does not match `_ga`. Regular expressions, wildcards in other
|
|
76
|
-
positions, and a bare `*` are unsupported. Web Storage keys may contain spaces,
|
|
77
|
-
Unicode, and punctuation. Cookie names use their raw spelling, without URL
|
|
78
|
-
decoding.
|
|
79
|
-
|
|
80
|
-
Cookies can share a name while having different domains or paths. Cleanup
|
|
81
|
-
tries the current host and its parent domains, and the current path and its
|
|
82
|
-
ancestors. To target a specific scope, use an object:
|
|
83
|
-
|
|
84
|
-
```ts
|
|
85
|
-
const clearOnRevocation = {
|
|
86
|
-
measurement: {
|
|
87
|
-
cookies: [
|
|
88
|
-
{ name: 'analytics-id', domain: 'example.com', path: '/' },
|
|
89
|
-
{ name: 'checkout-metrics', domain: '', path: '/checkout' },
|
|
90
|
-
{ name: 'partitioned-metrics', partitioned: true },
|
|
91
|
-
],
|
|
92
|
-
},
|
|
93
|
-
};
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
An empty `domain` means host-only. Explicit domains and paths replace the
|
|
97
|
-
automatic attempts for that field. Exact names can be deleted at a configured
|
|
98
|
-
path even when the current page cannot read that cookie. Prefix matching can
|
|
99
|
-
only discover cookie names visible to the current page, so use an exact name
|
|
100
|
-
for a cookie on another path.
|
|
101
|
-
|
|
102
|
-
Partitioned cookies require `partitioned: true`; ordinary targets remove
|
|
103
|
-
unpartitioned cookies. Cookie deletion preserves the browser's `__Secure-`
|
|
104
|
-
and `__Host-` prefix requirements. c15t protects its own consent, notice,
|
|
105
|
-
privacy, pending-save, and IAB consent records in cookies and localStorage,
|
|
106
|
-
including configured custom storage keys, even if your patterns match them.
|
|
107
|
-
c15t does not store consent in sessionStorage, so targeted entries there are
|
|
108
|
-
removed even when their names match consent storage keys.
|
|
109
|
-
|
|
110
|
-
## When cleanup runs
|
|
111
|
-
|
|
112
|
-
The runtime attaches cleanup after persistence and the script loader. Cleanup
|
|
113
|
-
waits while the policy is pending. On the first settled snapshot, it removes
|
|
114
|
-
configured data for every denied category. This includes a new opt-in visitor
|
|
115
|
-
who has not made a choice and a returning visitor whose permission expired.
|
|
116
|
-
|
|
117
|
-
After that first pass, cleanup runs when a category changes from allowed to
|
|
118
|
-
denied. Saving a refusal, expiry, a policy change, Global Privacy Control,
|
|
119
|
-
or synchronized records can cause that transition. Under an opt-out policy,
|
|
120
|
-
an expired grant that remains effectively allowed does not trigger deletion.
|
|
121
|
-
The `necessary` category cannot be configured for cleanup.
|
|
122
|
-
|
|
123
|
-
Cleanup keeps waiting if a failed initial request leaves the policy pending.
|
|
124
|
-
If a previously settled policy falls back to denial after an initialization
|
|
125
|
-
failure, cleanup removes its configured data. A later successful retry cannot
|
|
126
|
-
restore deleted data.
|
|
127
|
-
|
|
128
|
-
Runtime construction, server rendering, draft checkbox edits, opening the
|
|
129
|
-
dialog, and disposal do not clear data. Cleanup does not poll storage or repeat
|
|
130
|
-
on unrelated UI updates.
|
|
131
|
-
|
|
132
|
-
## Use an existing kernel
|
|
133
|
-
|
|
134
|
-
For a manually assembled integration, attach the module in the browser after
|
|
135
|
-
persistence hydration and script-loader setup:
|
|
136
|
-
|
|
137
|
-
```ts
|
|
138
|
-
import { createClearOnRevocation } from 'c15t/modules/clear-on-revocation';
|
|
139
|
-
|
|
140
|
-
const cleanup = createClearOnRevocation({
|
|
141
|
-
kernel,
|
|
142
|
-
config: { measurement: { cookies: ['_ga', '_ga_*'] } },
|
|
143
|
-
storageConfig,
|
|
144
|
-
});
|
|
145
|
-
|
|
146
|
-
// Stop observing consent when this integration is torn down.
|
|
147
|
-
cleanup.dispose();
|
|
148
|
-
```
|
|
149
|
-
|
|
150
|
-
Here `kernel` is your existing consent kernel. Pass the same `storageConfig`
|
|
151
|
-
used by persistence so cleanup protects custom record keys. Attaching the
|
|
152
|
-
module can immediately clear denied categories if the policy is already
|
|
153
|
-
settled. Do not also attach it when your provider or runtime owns cleanup.
|
|
154
|
-
|
|
155
|
-
## Browser limits
|
|
156
|
-
|
|
157
|
-
Cleanup can remove JavaScript-accessible first-party cookies and keys in the
|
|
158
|
-
current origin's `localStorage` and `sessionStorage`. It cannot remove
|
|
159
|
-
`HttpOnly` cookies or another origin's data. Keep `HttpOnly` protections and
|
|
160
|
-
use your server to expire cookies that require server access. Cookie deletion
|
|
161
|
-
must match the cookie's scope. See the
|
|
162
|
-
[browser cookie documentation](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/Cookies).
|
|
163
|
-
|
|
164
|
-
Browser restrictions can prevent reads or deletions. Cleanup failures do not
|
|
165
|
-
block consent updates. A running SDK may write data again after a sweep, so
|
|
166
|
-
keep script gating and the integration's consent-change or teardown behavior
|
|
167
|
-
configured. Deleting a script element cannot undo JavaScript it already ran.
|
|
@@ -1,208 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Granular consent
|
|
3
|
-
description: Let visitors grant a category and still turn one vendor off,
|
|
4
|
-
without adopting IAB TCF.
|
|
5
|
-
group: integrations
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
Granular consent is choice below the category level: a visitor grants
|
|
9
|
-
marketing and still turns Meta off. The unit of that choice is a vendor, so
|
|
10
|
-
the API names them `vendors`, `vendor` and `data-vendor`, and the hooks
|
|
11
|
-
`useVendorAllowed` and `useVendorDraft`. Everything else stays as it is:
|
|
12
|
-
categories, policies, and the preference center gain vendor rows rather than
|
|
13
|
-
a second consent model.
|
|
14
|
-
|
|
15
|
-
## Declare vendors
|
|
16
|
-
|
|
17
|
-
Add `vendors` to your runtime options. Each vendor sits inside a category
|
|
18
|
-
condition and needs a name and a privacy policy URL so the preference surface
|
|
19
|
-
can list it. The React provider takes the same option once its preference
|
|
20
|
-
center renders vendor rows; scripts, rules and iframes are gated the same way
|
|
21
|
-
whichever place declares it:
|
|
22
|
-
|
|
23
|
-
```ts
|
|
24
|
-
import { hosted, type Vendor } from 'c15t';
|
|
25
|
-
import { createConsentRuntime } from 'c15t/runtime';
|
|
26
|
-
|
|
27
|
-
const vendors = [
|
|
28
|
-
{
|
|
29
|
-
id: 'meta-pixel',
|
|
30
|
-
name: 'Meta Pixel',
|
|
31
|
-
category: 'marketing',
|
|
32
|
-
privacyPolicyUrl: 'https://www.facebook.com/privacy/policy/',
|
|
33
|
-
description: 'Ad conversion measurement and audiences.',
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
id: 'google-analytics',
|
|
37
|
-
name: 'Google Analytics',
|
|
38
|
-
category: 'measurement',
|
|
39
|
-
privacyPolicyUrl: 'https://policies.google.com/privacy',
|
|
40
|
-
},
|
|
41
|
-
] satisfies Vendor[];
|
|
42
|
-
|
|
43
|
-
const runtime = createConsentRuntime({
|
|
44
|
-
mode: hosted({ url: '/api/c15t' }),
|
|
45
|
-
vendors,
|
|
46
|
-
scripts: [
|
|
47
|
-
{
|
|
48
|
-
id: 'meta-pixel',
|
|
49
|
-
category: 'marketing',
|
|
50
|
-
vendor: 'meta-pixel',
|
|
51
|
-
src: 'https://connect.facebook.net/en_US/fbevents.js',
|
|
52
|
-
},
|
|
53
|
-
],
|
|
54
|
-
});
|
|
55
|
-
|
|
56
|
-
// Start in the browser after mount. The endpoint must serve your c15t backend.
|
|
57
|
-
runtime.start();
|
|
58
|
-
```
|
|
59
|
-
|
|
60
|
-
The `id` is a lowercase slug of up to 64 characters. Reuse it as the `vendor`
|
|
61
|
-
field on scripts and network rules and as the `data-vendor` attribute on
|
|
62
|
-
iframes. Integrations from `@c15t/scripts` already set `vendor` to their
|
|
63
|
-
manifest slug, so `gtag()` and `metaPixel()` need no extra wiring.
|
|
64
|
-
|
|
65
|
-
A backend can also declare vendors. Add `vendors` and an optional
|
|
66
|
-
`vendorListVersion` to the manifest configuration; `/init` returns them and the
|
|
67
|
-
client merges them with the vendors declared in code. When both declare the
|
|
68
|
-
same id, the copy declared in code wins, and the backend copy comes back if the
|
|
69
|
-
code declaration is removed later. A slug used by a script, rule or iframe
|
|
70
|
-
but declared nowhere still gates loading. It is hidden from the preference surface, and the
|
|
71
|
-
runtime warns about it outside production.
|
|
72
|
-
|
|
73
|
-
## How a vendor is gated
|
|
74
|
-
|
|
75
|
-
A target loads when its category condition passes and the visitor has not
|
|
76
|
-
turned its vendor off:
|
|
77
|
-
|
|
78
|
-
```text
|
|
79
|
-
loads = category condition satisfied AND vendor not denied
|
|
80
|
-
```
|
|
81
|
-
|
|
82
|
-
The category is evaluated first, so an unknown category still throws as a
|
|
83
|
-
configuration error. A vendor toggle never grants a category on its own: with
|
|
84
|
-
marketing denied, `meta-pixel` stays blocked whatever its own switch says.
|
|
85
|
-
A script with `alwaysLoad` still mounts, as it does for a denied category;
|
|
86
|
-
its callbacks receive the vendor result in `info.vendor.granted` so a
|
|
87
|
-
self-managing SDK can honor it.
|
|
88
|
-
|
|
89
|
-
Under an `iab` policy the `vendor` slug is inert. Vendor consent then comes from
|
|
90
|
-
the TC string through `vendorId`, and the vendor rows are not shown.
|
|
91
|
-
|
|
92
|
-
The same rule applies to the three gates:
|
|
93
|
-
|
|
94
|
-
| Surface | Field |
|
|
95
|
-
| --------------- | ------------------------------- |
|
|
96
|
-
| Script loader | `Script.vendor` |
|
|
97
|
-
| Network blocker | `NetworkBlockerRule.vendor` |
|
|
98
|
-
| Iframe blocker | `data-vendor` on the `<iframe>` |
|
|
99
|
-
|
|
100
|
-
An iframe with `data-vendor` and no `data-category` is gated on the vendor
|
|
101
|
-
alone. An unknown `data-vendor` value is granted rather than thrown: a vendor
|
|
102
|
-
the visitor never saw cannot have been turned off. Such a frame has no
|
|
103
|
-
category to follow, so a denial the visitor recorded earlier holds even while
|
|
104
|
-
nothing declares the slug, for example before the backend's vendor list has
|
|
105
|
-
arrived on a cold start.
|
|
106
|
-
|
|
107
|
-
A script, rule or frame keeps its slug declared for as long as it is
|
|
108
|
-
configured. If a backend list or a provider update drops the entry, the
|
|
109
|
-
loader or blocker puts it back, so a stored denial keeps gating it. A slug
|
|
110
|
-
several modules share stays under every category they name it with, whichever
|
|
111
|
-
module updates last, and drops a category only once no module names it there.
|
|
112
|
-
Disposing a loader or blocker, or removing a gated frame from the page, drops
|
|
113
|
-
what only it named, so a vendor no live module owns stops being toggleable.
|
|
114
|
-
|
|
115
|
-
## Record a vendor choice
|
|
116
|
-
|
|
117
|
-
Vendor grants travel with the save. Stage them and confirm with the next save,
|
|
118
|
-
or pass them next to the categories:
|
|
119
|
-
|
|
120
|
-
```ts
|
|
121
|
-
// Stage from a toggle handler; nothing changes until save({}) runs. The
|
|
122
|
-
// empty patch confirms no category, so only the staged vendor is recorded;
|
|
123
|
-
// save() with no input would reconfirm every displayed category too.
|
|
124
|
-
runtime.stageVendorConsent('meta-pixel', false);
|
|
125
|
-
await runtime.kernel.commands.save({});
|
|
126
|
-
|
|
127
|
-
// Or confirm categories and vendors in one action.
|
|
128
|
-
await runtime.kernel.commands.save({
|
|
129
|
-
marketing: true,
|
|
130
|
-
measurement: true,
|
|
131
|
-
vendors: { 'meta-pixel': false },
|
|
132
|
-
});
|
|
133
|
-
```
|
|
134
|
-
|
|
135
|
-
`stageVendorConsent` stages a vendor slug for the next save; it is not the
|
|
136
|
-
IAB handle's `setVendorConsent`, which sets a TCF vendor by numeric id and
|
|
137
|
-
takes effect at once. The grants can also travel in the save context as
|
|
138
|
-
`{ vendors }`, which wins when both are given.
|
|
139
|
-
|
|
140
|
-
Only the vendors the visitor turned off are stored. Accept all and reject all
|
|
141
|
-
both clear that list, so vendors follow their category on a bulk action. A bulk
|
|
142
|
-
action narrowed to the displayed categories only lifts the denials of vendors
|
|
143
|
-
those categories decide on their own; a vendor another granted category would
|
|
144
|
-
still load keeps its denial. A
|
|
145
|
-
vendor that is not declared, or is declared with `disabled: true`, is ignored.
|
|
146
|
-
Under an opt-out policy every vendor starts on and the stored list is the
|
|
147
|
-
do-not-sell list.
|
|
148
|
-
|
|
149
|
-
A vendor-only change records without touching category receipts. The kernel
|
|
150
|
-
emits `vendors:recorded` rather than `choice:recorded`, writes the
|
|
151
|
-
`<storageKey>-vendors` cookie and localStorage entry, and sends the complete
|
|
152
|
-
grant map to the backend as `vendorChoice`. Category confirmation times are not
|
|
153
|
-
renewed. The vendor entry also carries the subject id, so a visitor whose first
|
|
154
|
-
act only decided vendors keeps the same subject after a reload even though no
|
|
155
|
-
category record exists yet.
|
|
156
|
-
|
|
157
|
-
Scripts see the vendor result in their callbacks. `ScriptCallbackInfo.vendor`
|
|
158
|
-
carries `{ id, granted }` outside IAB mode. Integrations that send Google
|
|
159
|
-
Consent Mode or RudderStack signals send every category as denied while their
|
|
160
|
-
vendor is off, so the vendor's own consent API cannot re-enable tracking.
|
|
161
|
-
|
|
162
|
-
## Show vendors in the preference center
|
|
163
|
-
|
|
164
|
-
The `ConsentWidget` and `ConsentDialog` in React, Vue and Svelte list vendors
|
|
165
|
-
under their category when the provider declares them. Pass the same `vendors`
|
|
166
|
-
array to `ConsentProvider`, to the `vendors` prop of `ConsentRoot` in
|
|
167
|
-
[Next.js](https://c15t.com/docs/frameworks/next/script-loader#granular-consent) and
|
|
168
|
-
[TanStack Start](https://c15t.com/docs/frameworks/tanstack-start/quickstart#granular-consent),
|
|
169
|
-
to the Nuxt module or Vue plugin config next to `scripts`, or to
|
|
170
|
-
`ConsentManagerProvider` options in Svelte:
|
|
171
|
-
|
|
172
|
-
```tsx
|
|
173
|
-
import { ConsentProvider, hosted } from 'c15t/react';
|
|
174
|
-
|
|
175
|
-
<ConsentProvider options={{ mode: hosted({ url: '/api/c15t' }), vendors }}>
|
|
176
|
-
{children}
|
|
177
|
-
</ConsentProvider>;
|
|
178
|
-
```
|
|
179
|
-
|
|
180
|
-
Each category row expands to one card per vendor with its own switch. The
|
|
181
|
-
switches disable while the category is off in the draft, and Save records the
|
|
182
|
-
vendors the visitor moved. A custom control uses `useVendorDraft()` from
|
|
183
|
-
`c15t/react` to read and stage the same grants, with `isStale` and `reset` for
|
|
184
|
-
a draft the policy or vendor list changed under, and `useVendorAllowed(id)` to
|
|
185
|
-
read one vendor's effective result. Copy comes from
|
|
186
|
-
`consentManagerDialog.vendors.{title, privacyPolicy, disabledByCategory,
|
|
187
|
-
switchLabel}` in the translations. In Vue, `useConsentDraft()` returns the
|
|
188
|
-
same `vendors` map and `setVendor`; in Svelte, `getConsentManager()` exposes
|
|
189
|
-
`selectedVendors`, `setSelectedVendor` and `getDisplayedVendors(category)`.
|
|
190
|
-
The three frameworks render the same cards, and the parity suite compares
|
|
191
|
-
their markup, accessibility tree, computed styles and geometry.
|
|
192
|
-
|
|
193
|
-
## What a denial does not do
|
|
194
|
-
|
|
195
|
-
Turning a vendor off blocks future loads and requests. It does not delete the
|
|
196
|
-
cookies that vendor already set, and
|
|
197
|
-
[clear on revocation](./clear-on-revocation.md) does not help here:
|
|
198
|
-
it runs when a category is denied, and the category stays granted when only one
|
|
199
|
-
of its vendors is off. Remove that vendor's cookies yourself from an
|
|
200
|
-
`onConsentChange` callback that checks `info.vendor.granted`.
|
|
201
|
-
|
|
202
|
-
A vendor denial has no expiry and no policy basis. It stays until the visitor
|
|
203
|
-
changes it or a bulk action clears it, including across a policy change that
|
|
204
|
-
requires the category choice again.
|
|
205
|
-
|
|
206
|
-
Adding a vendor to the list does not reopen consent. New vendors default to on
|
|
207
|
-
inside a granted category. Use the policy rule's `copyRevision` when a new
|
|
208
|
-
vendor should prompt the visitor again.
|