@c15t/scripts 3.0.0-alpha.2 → 3.0.0-alpha.3
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 +129 -63
- package/README.md +8 -29
- package/SKILL.md +33 -0
- package/dist/adobe-analytics.js +2 -0
- package/dist/ahrefs-analytics.js +2 -0
- package/dist/amplitude.js +2 -0
- package/dist/clearbit.js +2 -0
- package/dist/cloudflare-web-analytics.js +2 -0
- package/dist/cloudflare-zaraz.js +2 -0
- package/dist/crisp.js +2 -0
- package/dist/databuddy.js +2 -0
- package/dist/e2e-test-utils.js +2 -139
- package/dist/engine/compile.js +2 -89
- package/dist/engine/runtime.js +2 -448
- package/dist/events.js +2 -218
- package/dist/fathom-analytics.js +2 -0
- package/dist/front-chat.js +2 -0
- package/dist/google-tag-manager.js +2 -0
- package/dist/google-tag.js +2 -0
- package/dist/heap.js +2 -0
- package/dist/hightouch.js +2 -0
- package/dist/hotjar.js +2 -0
- package/dist/intercom.js +2 -0
- package/dist/klaviyo.js +2 -0
- package/dist/linkedin-insights.js +2 -0
- package/dist/logrocket.js +2 -0
- package/dist/matomo-analytics.js +2 -0
- package/dist/meta-pixel.js +2 -0
- package/dist/microsoft-clarity.js +2 -0
- package/dist/microsoft-uet.js +2 -0
- package/dist/mixpanel-analytics.js +2 -0
- package/dist/one-dollar-stats.js +2 -0
- package/dist/openai-pixel.js +2 -0
- package/dist/pinterest-tag.js +2 -0
- package/dist/pirsch.js +2 -0
- package/dist/plausible-analytics.js +2 -0
- package/dist/posthog.js +2 -0
- package/dist/promptwatch.js +2 -0
- package/dist/reddit-pixel.js +2 -0
- package/dist/registry.js +2 -422
- package/dist/resolve.js +2 -33
- package/dist/rudderstack.js +2 -0
- package/dist/rybbit-analytics.js +2 -0
- package/dist/segment.js +2 -0
- package/dist/snapchat-pixel.js +2 -0
- package/dist/tiktok-pixel.js +2 -0
- package/dist/types.js +2 -16
- package/dist/umami-analytics.js +2 -0
- package/dist/vendors/_shared/attributes.js +2 -14
- package/dist/vendors/_shared/google-consent.js +2 -27
- package/dist/vendors/_shared/install-builders.js +2 -21
- package/dist/vendors/_shared/required-id.js +2 -0
- package/dist/vendors/_shared/script-url.js +2 -28
- package/dist/vendors/ads-and-pixels/linkedin-insights.js +2 -48
- package/dist/vendors/ads-and-pixels/meta-pixel.js +2 -153
- package/dist/vendors/ads-and-pixels/microsoft-uet.js +2 -110
- package/dist/vendors/ads-and-pixels/openai-pixel.js +2 -88
- package/dist/vendors/ads-and-pixels/pinterest-tag.js +2 -123
- package/dist/vendors/ads-and-pixels/reddit-pixel.js +2 -107
- package/dist/vendors/ads-and-pixels/snapchat-pixel.js +2 -87
- package/dist/vendors/ads-and-pixels/tiktok-pixel.js +2 -89
- package/dist/vendors/ads-and-pixels/x-pixel.js +2 -48
- package/dist/vendors/analytics/adobe-analytics.js +2 -49
- package/dist/vendors/analytics/ahrefs-analytics.js +2 -27
- package/dist/vendors/analytics/amplitude.js +2 -134
- package/dist/vendors/analytics/clearbit.js +2 -28
- package/dist/vendors/analytics/cloudflare-web-analytics.js +2 -32
- package/dist/vendors/analytics/databuddy.js +2 -103
- package/dist/vendors/analytics/fathom-analytics.js +2 -35
- package/dist/vendors/analytics/google-tag.js +2 -78
- package/dist/vendors/analytics/heap.js +2 -134
- package/dist/vendors/analytics/hightouch.js +2 -109
- package/dist/vendors/analytics/hotjar.js +2 -44
- package/dist/vendors/analytics/logrocket.js +2 -58
- package/dist/vendors/analytics/matomo-analytics.js +2 -191
- package/dist/vendors/analytics/microsoft-clarity.js +2 -100
- package/dist/vendors/analytics/mixpanel-analytics.js +2 -93
- package/dist/vendors/analytics/one-dollar-stats.js +2 -30
- package/dist/vendors/analytics/pirsch.js +2 -67
- package/dist/vendors/analytics/plausible-analytics.js +2 -81
- package/dist/vendors/analytics/posthog.js +2 -200
- package/dist/vendors/analytics/promptwatch.js +2 -29
- package/dist/vendors/analytics/rudderstack.js +2 -183
- package/dist/vendors/analytics/rybbit-analytics.js +2 -63
- package/dist/vendors/analytics/segment.js +2 -65
- package/dist/vendors/analytics/umami-analytics.js +2 -39
- package/dist/vendors/analytics/vercel-analytics.js +2 -53
- package/dist/vendors/email-and-sms/klaviyo.js +2 -0
- package/dist/vendors/functional/crisp.js +2 -100
- package/dist/vendors/functional/front-chat.js +2 -64
- package/dist/vendors/functional/intercom.js +2 -45
- package/dist/vendors/tag-managers/cloudflare-zaraz.js +2 -98
- package/dist/vendors/tag-managers/google-tag-manager.js +2 -73
- package/dist/vercel-analytics.js +2 -0
- package/dist/x-pixel.js +2 -0
- package/dist-types/adobe-analytics.d.ts +2 -0
- package/dist-types/ahrefs-analytics.d.ts +2 -0
- package/dist-types/amplitude.d.ts +2 -0
- package/dist-types/clearbit.d.ts +2 -0
- package/dist-types/cloudflare-web-analytics.d.ts +2 -0
- package/dist-types/cloudflare-zaraz.d.ts +2 -0
- package/dist-types/crisp.d.ts +2 -0
- package/dist-types/databuddy.d.ts +2 -0
- package/dist-types/e2e-test-utils.d.ts +2 -0
- package/dist-types/engine/compile.d.ts +2 -3
- package/dist-types/engine/runtime.d.ts +2 -3
- package/dist-types/events.d.ts +2 -46
- package/dist-types/fathom-analytics.d.ts +2 -0
- package/dist-types/front-chat.d.ts +2 -0
- package/dist-types/google-tag-manager.d.ts +2 -0
- package/dist-types/google-tag.d.ts +2 -0
- package/dist-types/heap.d.ts +2 -0
- package/dist-types/hightouch.d.ts +2 -0
- package/dist-types/hotjar.d.ts +2 -0
- package/dist-types/intercom.d.ts +2 -0
- package/dist-types/klaviyo.d.ts +2 -0
- package/dist-types/linkedin-insights.d.ts +2 -0
- package/dist-types/logrocket.d.ts +2 -0
- package/dist-types/matomo-analytics.d.ts +2 -0
- package/dist-types/meta-pixel.d.ts +2 -0
- package/dist-types/microsoft-clarity.d.ts +2 -0
- package/dist-types/microsoft-uet.d.ts +2 -0
- package/dist-types/mixpanel-analytics.d.ts +2 -0
- package/dist-types/one-dollar-stats.d.ts +2 -0
- package/dist-types/openai-pixel.d.ts +2 -0
- package/dist-types/pinterest-tag.d.ts +2 -0
- package/dist-types/pirsch.d.ts +2 -0
- package/dist-types/plausible-analytics.d.ts +2 -0
- package/dist-types/posthog.d.ts +2 -0
- package/dist-types/promptwatch.d.ts +2 -0
- package/dist-types/reddit-pixel.d.ts +2 -0
- package/dist-types/registry.d.ts +2 -485
- package/dist-types/resolve.d.ts +2 -9
- package/dist-types/rudderstack.d.ts +2 -0
- package/dist-types/rybbit-analytics.d.ts +2 -0
- package/dist-types/segment.d.ts +2 -0
- package/dist-types/snapchat-pixel.d.ts +2 -0
- package/dist-types/tiktok-pixel.d.ts +2 -0
- package/dist-types/types.d.ts +2 -314
- package/dist-types/umami-analytics.d.ts +2 -0
- package/dist-types/vendors/_shared/attributes.d.ts +2 -35
- package/dist-types/vendors/_shared/google-consent.d.ts +2 -47
- package/dist-types/vendors/_shared/install-builders.d.ts +2 -30
- package/dist-types/vendors/_shared/required-id.d.ts +2 -0
- package/dist-types/vendors/_shared/script-url.d.ts +2 -75
- package/dist-types/vendors/ads-and-pixels/linkedin-insights.d.ts +2 -92
- package/dist-types/vendors/ads-and-pixels/meta-pixel.d.ts +2 -289
- package/dist-types/vendors/ads-and-pixels/microsoft-uet.d.ts +2 -105
- package/dist-types/vendors/ads-and-pixels/openai-pixel.d.ts +2 -211
- package/dist-types/vendors/ads-and-pixels/pinterest-tag.d.ts +2 -295
- package/dist-types/vendors/ads-and-pixels/reddit-pixel.d.ts +2 -210
- package/dist-types/vendors/ads-and-pixels/snapchat-pixel.d.ts +2 -171
- package/dist-types/vendors/ads-and-pixels/tiktok-pixel.d.ts +2 -106
- package/dist-types/vendors/ads-and-pixels/x-pixel.d.ts +2 -183
- package/dist-types/vendors/analytics/adobe-analytics.d.ts +2 -75
- package/dist-types/vendors/analytics/ahrefs-analytics.d.ts +2 -62
- package/dist-types/vendors/analytics/amplitude.d.ts +2 -234
- package/dist-types/vendors/analytics/clearbit.d.ts +2 -60
- package/dist-types/vendors/analytics/cloudflare-web-analytics.d.ts +2 -67
- package/dist-types/vendors/analytics/databuddy.d.ts +2 -147
- package/dist-types/vendors/analytics/fathom-analytics.d.ts +2 -90
- package/dist-types/vendors/analytics/google-tag.d.ts +2 -95
- package/dist-types/vendors/analytics/heap.d.ts +2 -316
- package/dist-types/vendors/analytics/hightouch.d.ts +2 -285
- package/dist-types/vendors/analytics/hotjar.d.ts +2 -73
- package/dist-types/vendors/analytics/logrocket.d.ts +2 -101
- package/dist-types/vendors/analytics/matomo-analytics.d.ts +2 -41
- package/dist-types/vendors/analytics/microsoft-clarity.d.ts +2 -97
- package/dist-types/vendors/analytics/mixpanel-analytics.d.ts +2 -113
- package/dist-types/vendors/analytics/one-dollar-stats.d.ts +2 -39
- package/dist-types/vendors/analytics/pirsch.d.ts +2 -96
- package/dist-types/vendors/analytics/plausible-analytics.d.ts +2 -122
- package/dist-types/vendors/analytics/posthog.d.ts +2 -175
- package/dist-types/vendors/analytics/promptwatch.d.ts +2 -36
- package/dist-types/vendors/analytics/rudderstack.d.ts +2 -330
- package/dist-types/vendors/analytics/rybbit-analytics.d.ts +2 -82
- package/dist-types/vendors/analytics/segment.d.ts +2 -164
- package/dist-types/vendors/analytics/umami-analytics.d.ts +2 -93
- package/dist-types/vendors/analytics/vercel-analytics.d.ts +2 -66
- package/dist-types/vendors/email-and-sms/klaviyo.d.ts +2 -0
- package/dist-types/vendors/functional/crisp.d.ts +2 -78
- package/dist-types/vendors/functional/front-chat.d.ts +2 -62
- package/dist-types/vendors/functional/intercom.d.ts +2 -135
- package/dist-types/vendors/tag-managers/cloudflare-zaraz.d.ts +2 -39
- package/dist-types/vendors/tag-managers/google-tag-manager.d.ts +2 -96
- package/dist-types/vercel-analytics.d.ts +2 -0
- package/dist-types/x-pixel.d.ts +2 -0
- package/docs/README.md +129 -63
- 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/concepts/consent-categories.md +84 -0
- package/docs/{guides → concepts}/consent-state.md +71 -101
- package/docs/{guides → concepts}/data-fetching.md +31 -27
- package/docs/concepts/how-consent-works.md +123 -0
- package/docs/concepts/policies.md +71 -0
- 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 -34
- package/docs/customization/recipes.md +839 -49
- 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 +163 -96
- package/docs/customization/translations.md +61 -3
- package/docs/frameworks/astro/embeds.md +160 -0
- package/docs/frameworks/astro/network-blocker.md +86 -0
- package/docs/frameworks/astro/scripts.md +146 -0
- package/docs/frameworks/html/embeds.md +142 -0
- package/docs/frameworks/html/network-blocker.md +105 -0
- package/docs/frameworks/html/scripts.md +164 -0
- package/docs/frameworks/javascript/scripts.md +119 -0
- package/docs/frameworks/next/embeds.md +90 -0
- package/docs/frameworks/next/network-blocker.md +153 -0
- package/docs/frameworks/next/scripts.md +196 -0
- package/docs/frameworks/nuxt/embeds.md +81 -0
- package/docs/frameworks/nuxt/network-blocker.md +97 -0
- package/docs/frameworks/nuxt/scripts.md +89 -0
- package/docs/frameworks/react/embeds.md +89 -0
- package/docs/frameworks/react/network-blocker.md +140 -0
- package/docs/frameworks/react/scripts.md +115 -0
- package/docs/frameworks/svelte/embeds.md +96 -0
- package/docs/frameworks/svelte/network-blocker.md +141 -0
- package/docs/frameworks/svelte/scripts.md +137 -0
- package/docs/frameworks/sveltekit/embeds.md +103 -0
- package/docs/frameworks/sveltekit/network-blocker.md +149 -0
- package/docs/frameworks/sveltekit/scripts.md +141 -0
- package/docs/frameworks/tanstack-start/embeds.md +96 -0
- package/docs/frameworks/tanstack-start/network-blocker.md +145 -0
- package/docs/frameworks/tanstack-start/scripts.md +103 -0
- package/docs/frameworks/vue/embeds.md +84 -0
- package/docs/frameworks/vue/network-blocker.md +99 -0
- package/docs/frameworks/vue/scripts.md +93 -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 +167 -159
- package/docs/integrations/ahrefs-analytics.md +152 -154
- package/docs/integrations/amplitude.md +162 -156
- package/docs/integrations/building-integrations.md +136 -37
- package/docs/integrations/clearbit.md +154 -154
- package/docs/integrations/cloudflare-web-analytics.md +156 -156
- package/docs/integrations/cloudflare-zaraz.md +209 -261
- package/docs/integrations/crisp.md +164 -158
- package/docs/integrations/databuddy.md +157 -173
- package/docs/integrations/fathom-analytics.md +158 -156
- package/docs/integrations/front-chat.md +167 -167
- package/docs/integrations/google-maps.md +118 -83
- package/docs/integrations/google-tag-manager.md +178 -163
- package/docs/integrations/google-tag.md +163 -160
- package/docs/integrations/heap.md +163 -155
- package/docs/integrations/hightouch.md +161 -157
- package/docs/integrations/hotjar.md +159 -155
- package/docs/integrations/intercom.md +183 -153
- package/docs/integrations/klaviyo.md +486 -0
- package/docs/integrations/linkedin-insights.md +174 -150
- package/docs/integrations/logrocket.md +160 -156
- package/docs/integrations/matomo-analytics.md +188 -178
- package/docs/integrations/meta-pixel.md +188 -150
- package/docs/integrations/microsoft-clarity.md +163 -155
- package/docs/integrations/microsoft-uet.md +148 -154
- package/docs/integrations/mixpanel-analytics.md +155 -160
- package/docs/integrations/one-dollar-stats.md +166 -165
- package/docs/integrations/openai-pixel.md +204 -301
- package/docs/integrations/overview.md +137 -80
- package/docs/integrations/pinterest-tag.md +191 -183
- package/docs/integrations/pirsch.md +169 -159
- package/docs/integrations/plausible-analytics.md +172 -158
- package/docs/integrations/posthog.md +226 -241
- package/docs/integrations/promptwatch.md +154 -154
- package/docs/integrations/reddit-pixel.md +185 -157
- package/docs/integrations/rudderstack.md +201 -186
- package/docs/integrations/rybbit-analytics.md +171 -160
- package/docs/integrations/segment.md +182 -154
- package/docs/integrations/snapchat-pixel.md +186 -156
- package/docs/integrations/tiktok-pixel.md +171 -150
- package/docs/integrations/umami-analytics.md +163 -158
- package/docs/integrations/vercel-analytics.md +166 -157
- package/docs/integrations/x-pixel.md +176 -150
- package/docs/integrations/youtube.md +121 -86
- package/docs/upgrade-v3.md +475 -467
- package/package.json +10 -257
- package/dist-types/__tests__/helpers.d.ts +0 -141
- 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/javascript/script-loader.md +0 -100
- package/docs/frameworks/next/script-loader.md +0 -216
- package/docs/frameworks/react/script-loader.md +0 -69
- package/docs/guides/deployment-modes.md +0 -75
- package/docs/guides/shared-consent-controls.md +0 -158
- package/docs/integrations/clear-on-revocation.md +0 -167
- package/docs/integrations/granular-consent.md +0 -210
|
@@ -1,36 +1,42 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Amplitude
|
|
3
|
-
description:
|
|
4
|
-
|
|
3
|
+
description: Load the Amplitude Browser SDK 2 only after measurement consent
|
|
4
|
+
with the c15t amplitude helper, which opts the SDK out on revocation and back
|
|
5
|
+
in on a new grant.
|
|
6
|
+
icon: amplitude
|
|
5
7
|
group: integrations
|
|
6
8
|
---
|
|
7
9
|
|
|
8
10
|
## Configure Amplitude
|
|
9
11
|
|
|
10
|
-
Use
|
|
12
|
+
Use your Amplitude project API key. The `amplitude` helper initializes Browser
|
|
13
|
+
SDK 2 for you, so remove any existing Amplitude snippet or `init` call.
|
|
11
14
|
|
|
12
|
-
| Package manager | Command
|
|
13
|
-
| :-------------- |
|
|
14
|
-
| npm | `npm install @c15t/
|
|
15
|
-
| pnpm | `pnpm add @c15t/
|
|
16
|
-
| yarn | `yarn add @c15t/
|
|
17
|
-
| bun | `bun add @c15t/
|
|
15
|
+
| Package manager | Command |
|
|
16
|
+
| :-------------- | :------------------------------------- |
|
|
17
|
+
| npm | `npm install @c15t/integrations@alpha` |
|
|
18
|
+
| pnpm | `pnpm add @c15t/integrations@alpha` |
|
|
19
|
+
| yarn | `yarn add @c15t/integrations@alpha` |
|
|
20
|
+
| bun | `bun add @c15t/integrations@alpha` |
|
|
18
21
|
|
|
19
22
|
```ts title="src/consent-scripts.ts"
|
|
20
|
-
import { amplitude } from '@c15t/
|
|
23
|
+
import { amplitude } from '@c15t/integrations/amplitude';
|
|
21
24
|
|
|
22
|
-
export const scripts = [amplitude({ apiKey: 'YOUR_PROJECT_API_KEY'
|
|
25
|
+
export const scripts = [amplitude({ apiKey: 'YOUR_PROJECT_API_KEY' })];
|
|
23
26
|
```
|
|
24
27
|
|
|
25
28
|
## Register the scripts
|
|
26
29
|
|
|
27
30
|
Complete your [framework quickstart](https://c15t.com/docs/frameworks) first. Keep its Inth
|
|
28
31
|
endpoint, policy, styles and consent UI. Remove the vendor's original script,
|
|
29
|
-
SDK initializer or tag-manager entry so
|
|
32
|
+
SDK initializer or tag-manager entry, so the vendor loads only through c15t.
|
|
30
33
|
|
|
31
|
-
The
|
|
32
|
-
|
|
33
|
-
|
|
34
|
+
The vendor pages put the helper in `src/consent-scripts.ts`. If your framework
|
|
35
|
+
quickstart already created a scripts file, such as `lib/scripts.ts` in the
|
|
36
|
+
Next.js guide, add the helper to that array instead of creating a second file.
|
|
37
|
+
The `scripts` export is a configuration, not an initializer. Add it to the c15t provider you already have, at the registration
|
|
38
|
+
point for your framework below. These are edits to that provider, not a second
|
|
39
|
+
provider.
|
|
34
40
|
|
|
35
41
|
**Next.js**
|
|
36
42
|
|
|
@@ -51,158 +57,106 @@ router guide. Its manifest, init and save URLs stay in effect. Add
|
|
|
51
57
|
</ConsentRoot>
|
|
52
58
|
```
|
|
53
59
|
|
|
54
|
-
|
|
55
|
-
`
|
|
56
|
-
|
|
60
|
+
App Router, Pages Router and static export all use this `ConsentRoot` in
|
|
61
|
+
the `'use client'` wrapper `components/consent.tsx`. Keep `scripts` there,
|
|
62
|
+
because a Server Component cannot pass script callbacks to it. See
|
|
63
|
+
[Next.js scripts and embeds](../frameworks/next/scripts.md).
|
|
57
64
|
|
|
58
65
|
**TanStack Start**
|
|
59
66
|
|
|
60
|
-
|
|
61
|
-
`ConsentRoot
|
|
67
|
+
Import the configuration into your root route and pass it to the existing
|
|
68
|
+
`ConsentRoot` as a top-level prop. Keep the loader, `backendURL` and
|
|
69
|
+
`initRoute` from the [TanStack Start quickstart](https://c15t.com/docs/frameworks/tanstack-start/quickstart):
|
|
62
70
|
|
|
63
|
-
```tsx
|
|
64
|
-
import { Outlet } from '@tanstack/react-router';
|
|
65
|
-
import { ConsentRoot } from 'c15t/tanstack-start';
|
|
71
|
+
```tsx title="src/routes/__root.tsx"
|
|
66
72
|
import { scripts } from '../consent-scripts';
|
|
67
73
|
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
</ConsentRoot>
|
|
75
|
-
);
|
|
76
|
-
}
|
|
74
|
+
<ConsentRoot
|
|
75
|
+
state={consent}
|
|
76
|
+
backendURL={backendURL}
|
|
77
|
+
initRoute={false}
|
|
78
|
+
scripts={scripts}
|
|
79
|
+
>
|
|
77
80
|
```
|
|
78
81
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
instead. Do not return script callbacks from a server function or route loader.
|
|
82
|
+
Import vendor helpers in the root route module, not in a server function.
|
|
83
|
+
A server function's return value must be serializable, and script
|
|
84
|
+
configurations carry callbacks. See
|
|
85
|
+
[TanStack Start scripts](../frameworks/tanstack-start/scripts.md).
|
|
84
86
|
|
|
85
87
|
**React**
|
|
86
88
|
|
|
87
|
-
|
|
89
|
+
Add the configuration to the existing `ConsentProvider` options, next to
|
|
90
|
+
`mode`:
|
|
88
91
|
|
|
89
|
-
```
|
|
90
|
-
import { ConsentProvider } from 'c15t/react';
|
|
92
|
+
```tsx title="src/consent.tsx"
|
|
91
93
|
import { scripts } from './consent-scripts';
|
|
92
|
-
```
|
|
93
|
-
|
|
94
|
-
Keep the existing options and add `scripts`:
|
|
95
94
|
|
|
96
|
-
|
|
97
|
-
<ConsentProvider options={{ ...consentOptions, scripts }}>
|
|
98
|
-
{children}
|
|
99
|
-
</ConsentProvider>
|
|
95
|
+
<ConsentProvider options={{ mode, scripts }}>
|
|
100
96
|
```
|
|
101
97
|
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
link inside the provider. See
|
|
98
|
+
`mode` is the `hosted({ url: 'https://your-project.inth.app' })` value
|
|
99
|
+
from the [React quickstart](https://c15t.com/docs/frameworks/react/quickstart). Keep the banner,
|
|
100
|
+
dialog and preferences link inside the provider. See
|
|
101
|
+
[React scripts and embeds](../frameworks/react/scripts.md).
|
|
105
102
|
|
|
106
103
|
**Nuxt**
|
|
107
104
|
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
than serialized `nuxt.config.ts` runtime configuration.
|
|
105
|
+
Register the scripts under the `c15t` key in `app/app.config.ts`. Adjust the
|
|
106
|
+
relative import to where you created `consent-scripts.ts`:
|
|
111
107
|
|
|
112
|
-
```
|
|
113
|
-
<script setup lang="ts">
|
|
114
|
-
import { onUnmounted } from 'vue';
|
|
115
|
-
import { createScriptLoader } from 'c15t/modules/script-loader';
|
|
108
|
+
```ts title="app/app.config.ts"
|
|
116
109
|
import { scripts } from '../src/consent-scripts';
|
|
117
110
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
let loader: ReturnType<typeof createScriptLoader> | undefined;
|
|
121
|
-
|
|
122
|
-
const removeMountedHook = nuxtApp.hook('app:mounted', () => {
|
|
123
|
-
loader = createScriptLoader({ kernel, scripts });
|
|
124
|
-
});
|
|
125
|
-
onUnmounted(() => {
|
|
126
|
-
removeMountedHook();
|
|
127
|
-
loader?.dispose();
|
|
111
|
+
export default defineAppConfig({
|
|
112
|
+
c15t: { scripts },
|
|
128
113
|
});
|
|
129
|
-
</script>
|
|
130
|
-
|
|
131
|
-
<template>
|
|
132
|
-
<ConsentRoot />
|
|
133
|
-
<NuxtPage />
|
|
134
|
-
</template>
|
|
135
114
|
```
|
|
136
115
|
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
116
|
+
The Nuxt module merges this over its options in `nuxt.config.ts` and starts
|
|
117
|
+
one script loader in the browser after hydration, once it has applied the
|
|
118
|
+
visitor's stored choice and privacy signals. Keep `scripts` out of
|
|
119
|
+
`nuxt.config.ts`, which reaches the browser as JSON and drops the vendor
|
|
120
|
+
callbacks. Write the vendor IDs into `consent-scripts.ts`. See
|
|
121
|
+
[Nuxt scripts and embeds](../frameworks/nuxt/scripts.md).
|
|
143
122
|
|
|
144
123
|
**Vue**
|
|
145
124
|
|
|
146
|
-
|
|
147
|
-
`App.vue`, whose lifetime covers the application:
|
|
125
|
+
Pass the scripts to the existing `c15tVue` plugin call in `src/main.ts`:
|
|
148
126
|
|
|
149
|
-
```
|
|
150
|
-
<script setup lang="ts">
|
|
151
|
-
import { onMounted, onUnmounted } from 'vue';
|
|
152
|
-
import { createScriptLoader } from 'c15t/modules/script-loader';
|
|
153
|
-
import { useConsentKernel } from 'c15t/vue/vue-plugin';
|
|
154
|
-
import ConsentRoot from 'c15t/vue/consent-root';
|
|
127
|
+
```ts title="src/main.ts"
|
|
155
128
|
import { scripts } from './consent-scripts';
|
|
156
129
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
onMounted(() => {
|
|
161
|
-
loader = createScriptLoader({ kernel, scripts });
|
|
130
|
+
app.use(c15tVue, {
|
|
131
|
+
backendURL: 'https://your-project.inth.app',
|
|
132
|
+
scripts,
|
|
162
133
|
});
|
|
163
|
-
onUnmounted(() => loader?.dispose());
|
|
164
|
-
</script>
|
|
165
|
-
|
|
166
|
-
<template>
|
|
167
|
-
<ConsentRoot />
|
|
168
|
-
<main>Your application</main>
|
|
169
|
-
</template>
|
|
170
134
|
```
|
|
171
135
|
|
|
172
|
-
Keep your existing
|
|
173
|
-
the
|
|
174
|
-
Do not
|
|
175
|
-
[Vue
|
|
136
|
+
Keep your existing backend URL and other options. The plugin starts one
|
|
137
|
+
script loader when the app mounts, after it has applied the visitor's stored
|
|
138
|
+
choice. Do not also call `createScriptLoader` from a component. See
|
|
139
|
+
[Vue scripts and embeds](../frameworks/vue/scripts.md).
|
|
176
140
|
|
|
177
141
|
**Astro**
|
|
178
142
|
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
import { fileURLToPath } from 'node:url';
|
|
185
|
-
```
|
|
186
|
-
|
|
187
|
-
Add this option to the existing `c15t({ ... })` call. Resolve the path from
|
|
188
|
-
the configuration file because Astro injects the import into a virtual module:
|
|
143
|
+
Add the scripts to the client entrypoint from the
|
|
144
|
+
[Astro quickstart](https://c15t.com/docs/frameworks/astro/quickstart), the module that the
|
|
145
|
+
integration's `clientEntrypoint` option names. Keep `mode`, `ui` and the
|
|
146
|
+
framework integration in `astro.config.mjs` as they are. If the module
|
|
147
|
+
already exports scripts, combine the two arrays.
|
|
189
148
|
|
|
190
|
-
```
|
|
191
|
-
clientEntrypoint: fileURLToPath(new URL('./src/c15t.client.ts', import.meta.url)),
|
|
192
|
-
```
|
|
193
|
-
|
|
194
|
-
Export the scripts from that module:
|
|
195
|
-
|
|
196
|
-
```ts title="src/c15t.client.ts"
|
|
149
|
+
```ts title="src/consent-client.ts"
|
|
197
150
|
import type { C15tClientOptionsExtension } from 'c15t/astro';
|
|
198
151
|
import { scripts } from './consent-scripts';
|
|
199
152
|
|
|
200
153
|
export default { scripts } satisfies C15tClientOptionsExtension;
|
|
201
154
|
```
|
|
202
155
|
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
156
|
+
Vendor helpers contain callbacks, and the integration options in
|
|
157
|
+
`astro.config.mjs` are serialized into the page, so do not put helpers in
|
|
158
|
+
the integration's `scripts` option. The integration passes the client
|
|
159
|
+
entrypoint to the one runtime every page shares, including across
|
|
206
160
|
`ClientRouter` navigation.
|
|
207
161
|
|
|
208
162
|
**Svelte**
|
|
@@ -215,9 +169,7 @@ pass them as a top-level prop:
|
|
|
215
169
|
import { ConsentManagerProvider, hosted } from '@c15t/svelte';
|
|
216
170
|
import { scripts } from './consent-scripts';
|
|
217
171
|
|
|
218
|
-
const
|
|
219
|
-
if (!backendURL) throw new Error('Set VITE_C15T_BACKEND_URL');
|
|
220
|
-
const mode = hosted({ url: backendURL });
|
|
172
|
+
const mode = hosted({ url: 'https://your-project.inth.app' });
|
|
221
173
|
</script>
|
|
222
174
|
|
|
223
175
|
<ConsentManagerProvider {mode} {scripts}>
|
|
@@ -239,7 +191,7 @@ and its serializable prefetch data from the [SvelteKit quickstart](https://c15t.
|
|
|
239
191
|
import { scripts } from '../consent-scripts';
|
|
240
192
|
|
|
241
193
|
let { children, data } = $props();
|
|
242
|
-
const mode = hosted({ url:
|
|
194
|
+
const mode = hosted({ url: 'https://your-project.inth.app' });
|
|
243
195
|
</script>
|
|
244
196
|
|
|
245
197
|
<ConsentManagerProvider {mode} {scripts} prefetch={data.prefetch}>
|
|
@@ -248,45 +200,99 @@ and its serializable prefetch data from the [SvelteKit quickstart](https://c15t.
|
|
|
248
200
|
</ConsentManagerProvider>
|
|
249
201
|
```
|
|
250
202
|
|
|
251
|
-
Import vendor helpers in the layout component, not in `+layout.server.ts
|
|
252
|
-
|
|
253
|
-
|
|
203
|
+
Import vendor helpers in the layout component, not in `+layout.server.ts`:
|
|
204
|
+
a server load cannot send functions to the browser. Prerendered, static and
|
|
205
|
+
SPA-mode pages use the same `scripts` prop. If you pass an externally owned
|
|
254
206
|
`runtime` to the provider, register scripts when creating that runtime instead.
|
|
255
207
|
|
|
256
|
-
**
|
|
257
|
-
|
|
258
|
-
Attach the loader to your existing kernel before calling
|
|
259
|
-
`kernel.commands.init()`:
|
|
208
|
+
**HTML**
|
|
260
209
|
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
210
|
+
The helpers in `@c15t/integrations` are ES modules that need a bundler. On a
|
|
211
|
+
page that loads the c15t script tag, paste the vendor's own snippet instead
|
|
212
|
+
and keep it inert until its category is allowed:
|
|
264
213
|
|
|
265
|
-
|
|
214
|
+
```html
|
|
215
|
+
<script type="text/plain" data-c15t-category="measurement">
|
|
216
|
+
// The vendor's snippet, unchanged
|
|
217
|
+
</script>
|
|
266
218
|
```
|
|
267
219
|
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
[
|
|
220
|
+
Use the category this guide names for the vendor. c15t runs the snippet
|
|
221
|
+
once that category is allowed, and reloads the page when the visitor
|
|
222
|
+
withdraws it. Helper options on this page, such as `loadMode`, do not apply
|
|
223
|
+
to a pasted snippet. See [HTML scripts](../frameworks/html/scripts.md).
|
|
272
224
|
|
|
273
|
-
|
|
225
|
+
**JavaScript**
|
|
274
226
|
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
| `apiKey` | Required non-empty project API key. |
|
|
278
|
-
| `initOptions` | Optional JSON-serializable Browser SDK 2 initialization options. |
|
|
279
|
-
| `scriptUrl` | Optional loader override. The built-in loader is pinned to Browser SDK 2 version `2.44.4`. |
|
|
227
|
+
Pass the scripts to `init()` from `@c15t/browser`, next to your backend
|
|
228
|
+
URL:
|
|
280
229
|
|
|
281
|
-
|
|
230
|
+
```ts
|
|
231
|
+
import { init } from '@c15t/browser';
|
|
232
|
+
import { scripts } from './consent-scripts';
|
|
282
233
|
|
|
283
|
-
|
|
234
|
+
const consent = init({
|
|
235
|
+
backendURL: 'https://your-project.inth.app',
|
|
236
|
+
scripts,
|
|
237
|
+
});
|
|
238
|
+
```
|
|
284
239
|
|
|
285
|
-
|
|
240
|
+
Keep the backend URL from your quickstart. With
|
|
241
|
+
`createConsentRuntime` from `c15t/runtime`, pass `scripts` to it instead.
|
|
242
|
+
A kernel you create yourself needs a loader from
|
|
243
|
+
`c15t/modules/script-loader`. Attach one loader per kernel. See
|
|
244
|
+
[JavaScript scripts](../frameworks/javascript/scripts.md).
|
|
286
245
|
|
|
287
|
-
|
|
246
|
+
## Options
|
|
288
247
|
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
248
|
+
| Option | Default | Behavior |
|
|
249
|
+
| ------------- | ------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
|
|
250
|
+
| `apiKey` | Required | Project API key passed to `amplitude.init`. The helper trims it. Empty or whitespace-only values throw. |
|
|
251
|
+
| `initOptions` | `{}` | Browser SDK 2 options passed as the second argument to `init`. Use JSON-serializable values only. |
|
|
252
|
+
| `scriptUrl` | `https://cdn.amplitude.com/libs/analytics-browser-2.44.4-min.js.gz` | Loader URL override. The default pins Browser SDK 2 version `2.44.4`. A blank value falls back to the default. |
|
|
253
|
+
|
|
254
|
+
## Loading and revocation
|
|
255
|
+
|
|
256
|
+
`amplitude` uses the `measurement` category. Before measurement is allowed,
|
|
257
|
+
c15t defines no `window.amplitude` and loads nothing from Amplitude. When
|
|
258
|
+
measurement becomes allowed, the helper creates the Browser SDK 2 queue stub,
|
|
259
|
+
queues `init(apiKey, initOptions)` and `setOptOut(false)`, then loads the SDK,
|
|
260
|
+
which replays the queue. Amplitude saves an opt-out in its cookie, so the
|
|
261
|
+
queued `setOptOut(false)` clears one left by an earlier revocation.
|
|
262
|
+
|
|
263
|
+
On revocation the helper calls `amplitude.setOptOut(true)` and leaves the SDK
|
|
264
|
+
on the page, because removing the script would not stop the running client.
|
|
265
|
+
If the visitor allows measurement again before the page reloads, the helper
|
|
266
|
+
calls `setOptOut(false)` on that SDK instead of loading a second copy.
|
|
267
|
+
|
|
268
|
+
## Verify Amplitude
|
|
269
|
+
|
|
270
|
+
After you allow measurement, the `analytics-browser-2.44.4-min.js.gz` request
|
|
271
|
+
loads and a test event reaches your Amplitude project. Revoke measurement, then
|
|
272
|
+
allow it again on a later page and check that events reach Amplitude again.
|
|
273
|
+
|
|
274
|
+
Test in a private window with an opt-in policy. Open DevTools Network, disable
|
|
275
|
+
the cache and filter by the vendor's domain:
|
|
276
|
+
|
|
277
|
+
1. Load the page. No request goes to the vendor before you choose.
|
|
278
|
+
2. Click Reject, then reload. There is still no vendor request.
|
|
279
|
+
3. Open Privacy settings and allow the helper's category. The vendor script
|
|
280
|
+
loads without a page reload.
|
|
281
|
+
4. Turn the category off again and save. c15t reloads the page, and the new
|
|
282
|
+
page makes no vendor request.
|
|
283
|
+
|
|
284
|
+
c15t reloads on revocation because removing a script element does not stop
|
|
285
|
+
code that already ran. The vendor's listeners, timers and queued events stay
|
|
286
|
+
alive until the page unloads. If you set `reloadOnConsentRevoked: false`, stop
|
|
287
|
+
the vendor yourself. Register a callback-only script whose `onConsentChange`
|
|
288
|
+
calls the vendor's opt-out API, as shown in
|
|
289
|
+
[custom integrations](./building-integrations.md), and check the
|
|
290
|
+
permission before each of your own event calls. The reload does not delete
|
|
291
|
+
cookies the vendor already set; see
|
|
292
|
+
[clear on revocation for your framework](./overview.md#vendor-switches-and-cookie-cleanup).
|
|
293
|
+
|
|
294
|
+
The helper sets `vendor` to its script ID, so once you declare that vendor a
|
|
295
|
+
visitor can turn it off inside an allowed category. See
|
|
296
|
+
[vendor consent for your framework](./overview.md#vendor-switches-and-cookie-cleanup). The
|
|
297
|
+
[consent verification guide](../guides/verify-consent.md) covers navigation,
|
|
298
|
+
expiry and hosting checks.
|
|
@@ -1,52 +1,151 @@
|
|
|
1
1
|
---
|
|
2
2
|
title: Custom integrations
|
|
3
|
-
description:
|
|
4
|
-
|
|
3
|
+
description: Gate a vendor that has no @c15t/integrations helper, or sync
|
|
4
|
+
consent with an SDK your app already loads, using a c15t script configuration.
|
|
5
5
|
group: integrations
|
|
6
6
|
---
|
|
7
7
|
|
|
8
|
-
##
|
|
8
|
+
## Define a script
|
|
9
9
|
|
|
10
|
-
Check the
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
Check the [integration list](./overview.md) first. For a vendor
|
|
11
|
+
without a helper, write a script configuration with a stable `id`, a category
|
|
12
|
+
and the source URL, then register it like any helper:
|
|
13
|
+
|
|
14
|
+
```ts title="src/consent-scripts.ts"
|
|
15
|
+
import type { Script } from 'c15t';
|
|
16
|
+
|
|
17
|
+
const exampleAnalytics: Script = {
|
|
18
|
+
id: 'example-analytics',
|
|
19
|
+
category: 'measurement',
|
|
20
|
+
src: 'https://analytics.example.com/sdk.js',
|
|
21
|
+
onLoad() {
|
|
22
|
+
// Initialize the vendor here with its documented API.
|
|
23
|
+
},
|
|
24
|
+
onError({ error }) {
|
|
25
|
+
console.error('Analytics SDK failed to load', error);
|
|
26
|
+
},
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export const scripts = [exampleAnalytics];
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
Replace the URL and the `onLoad` body with the vendor's own setup. c15t adds the
|
|
33
|
+
`<script>` element only while measurement is allowed. To register `scripts`
|
|
34
|
+
with your framework, follow any vendor guide, for example
|
|
35
|
+
[Ahrefs Analytics](./ahrefs-analytics.md).
|
|
36
|
+
|
|
37
|
+
## Script fields
|
|
38
|
+
|
|
39
|
+
| Field | Default | Behavior |
|
|
40
|
+
| ----------------------------------------------- | ---------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
41
|
+
| `id` | Required | Stable identifier. c15t tracks the script by it across renders. |
|
|
42
|
+
| `category` | Required | A category name, or a condition such as `{ or: ['measurement', 'marketing'] }`, `{ and: [...] }` or `{ not: '...' }`. |
|
|
43
|
+
| `src` / `textContent` | None | Set exactly one, unless `callbackOnly` is `true`. |
|
|
44
|
+
| `vendor` | None | Vendor slug, so a visitor can turn this vendor off inside an allowed category. |
|
|
45
|
+
| `callbackOnly` | `false` | Run callbacks without adding a script element. |
|
|
46
|
+
| `alwaysLoad` | `false` | Load regardless of permission. |
|
|
47
|
+
| `persistAfterConsentRevoked` | `false` | Keep the script element when permission is revoked. |
|
|
48
|
+
| `onBeforeLoad`, `onLoad`, `onError` | None | Run before the element is added, after it loads, and if it fails. |
|
|
49
|
+
| `onConsentChange` | None | Runs when permissions change after the script has loaded, and when it is removed. |
|
|
50
|
+
| `onDispose` | None | Runs when this configuration is removed or its loader is disposed. Revocation alone does not call it. |
|
|
51
|
+
| `target` | `'head'` | `'head'` or `'body'`. |
|
|
52
|
+
| `async`, `defer`, `attributes`, `fetchPriority` | None | Copied to the script element. |
|
|
53
|
+
| `nonce` | The provider's `nonce` | Content Security Policy nonce for this element. |
|
|
54
|
+
| `anonymizeId` | `true` | Use a random element ID. Set `false` for `c15t-script-<id>`. |
|
|
55
|
+
|
|
56
|
+
Every callback receives `{ id, elementId, hasConsent, consents }`, plus
|
|
57
|
+
`vendor` when the script declares one, and `element` for scripts with an
|
|
58
|
+
element.
|
|
59
|
+
|
|
60
|
+
## Load before consent and signal the vendor
|
|
61
|
+
|
|
62
|
+
Use `alwaysLoad` only for an SDK that has its own consent API, such as a
|
|
63
|
+
Consent Mode tag. The script loads on every page and c15t never removes it on
|
|
64
|
+
a permission change. `hasConsent` in each callback still reports the real
|
|
65
|
+
permission, so pass it to the SDK:
|
|
13
66
|
|
|
14
67
|
```ts
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}
|
|
68
|
+
const consentModeTag = {
|
|
69
|
+
id: 'example-consent-mode',
|
|
70
|
+
category: 'marketing',
|
|
71
|
+
src: 'https://tags.example.com/tag.js',
|
|
72
|
+
alwaysLoad: true,
|
|
73
|
+
onBeforeLoad({ hasConsent }) {
|
|
74
|
+
window.exampleTag = window.exampleTag ?? [];
|
|
75
|
+
window.exampleTag.push(['consent', hasConsent ? 'grant' : 'deny']);
|
|
76
|
+
},
|
|
77
|
+
onConsentChange({ hasConsent }) {
|
|
78
|
+
window.exampleTag?.push(['consent', hasConsent ? 'grant' : 'deny']);
|
|
79
|
+
},
|
|
80
|
+
};
|
|
28
81
|
```
|
|
29
82
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
83
|
+
`window.exampleTag` stands for the vendor's own queue. An `alwaysLoad` script
|
|
84
|
+
makes requests before any choice, so it does not meet a requirement of no
|
|
85
|
+
vendor request before consent.
|
|
33
86
|
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
87
|
+
## Keep a loaded SDK and switch it off
|
|
88
|
+
|
|
89
|
+
`persistAfterConsentRevoked: true` keeps the script element when permission is
|
|
90
|
+
revoked. c15t then calls `onConsentChange` with `hasConsent: false`, which is
|
|
91
|
+
where you call the vendor's opt-out API. If permission comes back on the same
|
|
92
|
+
page, c15t reuses the element and calls `onConsentChange` again with
|
|
93
|
+
`hasConsent: true`; `onLoad` does not run twice.
|
|
94
|
+
|
|
95
|
+
```ts
|
|
96
|
+
const examplePixel = {
|
|
97
|
+
id: 'example-pixel',
|
|
98
|
+
category: 'marketing',
|
|
99
|
+
src: 'https://pixel.example.com/pixel.js',
|
|
100
|
+
persistAfterConsentRevoked: true,
|
|
101
|
+
onConsentChange({ hasConsent }) {
|
|
102
|
+
window.examplePixel?.(hasConsent ? 'optIn' : 'optOut');
|
|
103
|
+
},
|
|
104
|
+
};
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
Nothing persists across a reload. After c15t's revocation reload, or any later
|
|
108
|
+
page load, the script loads again only when permission allows it. Without
|
|
109
|
+
`persistAfterConsentRevoked`, c15t removes the element on revocation, then
|
|
110
|
+
calls `onConsentChange`.
|
|
111
|
+
|
|
112
|
+
## Sync an SDK your app already loads
|
|
113
|
+
|
|
114
|
+
`callbackOnly: true` adds no script element. Use it when your app imports and
|
|
115
|
+
initializes the SDK itself and c15t only has to tell it the permission. Pair
|
|
116
|
+
it with `alwaysLoad` so the callbacks run on the first page load even while
|
|
117
|
+
permission is denied:
|
|
118
|
+
|
|
119
|
+
```ts
|
|
120
|
+
const existingSdkConsent = {
|
|
121
|
+
id: 'existing-sdk-consent',
|
|
122
|
+
category: 'measurement',
|
|
123
|
+
callbackOnly: true,
|
|
124
|
+
alwaysLoad: true,
|
|
125
|
+
onBeforeLoad({ hasConsent }) {
|
|
126
|
+
existingSdk.setTracking(hasConsent);
|
|
127
|
+
},
|
|
128
|
+
onConsentChange({ hasConsent }) {
|
|
129
|
+
existingSdk.setTracking(hasConsent);
|
|
130
|
+
},
|
|
131
|
+
};
|
|
132
|
+
```
|
|
38
133
|
|
|
39
|
-
|
|
134
|
+
`existingSdk` stands for your initialized SDK. c15t does not delay its import
|
|
135
|
+
or its first request, so initialize it with tracking off. Without `alwaysLoad`,
|
|
136
|
+
a callback-only script runs `onBeforeLoad` and `onLoad` only once permission is
|
|
137
|
+
allowed. [PostHog](./posthog.md#use-an-existing-posthog-sdk) shows
|
|
138
|
+
this pattern with a real SDK.
|
|
40
139
|
|
|
41
|
-
|
|
42
|
-
vendor's consent API or disable future work. `persistAfterConsentRevoked` retains
|
|
43
|
-
a loaded script when set; `alwaysLoad` bypasses initial category gating. Enable
|
|
44
|
-
those only when the vendor's own consent behavior matches the intended design.
|
|
140
|
+
## Revocation and verification
|
|
45
141
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
142
|
+
By default c15t reloads the page when a visitor turns off a category or vendor
|
|
143
|
+
they had allowed, because removing a script element does not stop code that
|
|
144
|
+
already ran. Set `reloadOnConsentRevoked: false` only if every script stops
|
|
145
|
+
itself in `onConsentChange`.
|
|
49
146
|
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
147
|
+
For a nonce-based Content Security Policy, set the provider's `nonce` option or
|
|
148
|
+
a per-script `nonce`. Then test the script the way the vendor guides do. Check
|
|
149
|
+
for no request before a choice or after rejection, a load after allowing, and
|
|
150
|
+
no request after revocation and reload. See
|
|
151
|
+
[consent verification](../guides/verify-consent.md).
|