@c15t/react 3.1.0 → 3.2.0-canary.0
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 +11 -4
- package/README.md +2 -2
- package/dist/component-hooks/use-consent-gate.js +2 -0
- package/dist/component-hooks/use-consent-labels.js +2 -0
- package/dist/component-hooks/use-consent-text-direction.js +2 -0
- package/dist/component-hooks/use-vendors-listed-under.js +2 -0
- package/dist/components/consent-gate/atoms.js +1 -1
- package/dist/components/consent-gate/consent-gate.js +1 -1
- package/dist/components/iab-prompt/atoms/root.js +1 -1
- package/dist/components/panel-trigger/atoms/toolbar.js +1 -1
- package/dist/components/preferences/atoms/button.js +1 -1
- package/dist/components/preferences/atoms/vendor-list.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/prompt/prompt.js +1 -1
- package/dist/components/prompt/surface-context.js +1 -1
- package/dist/components/prompt/use-banner-copy.js +1 -1
- package/dist/components/shared/streamed-surface.js +1 -1
- package/dist/headless.js +1 -1
- package/dist/index-parts/offline.js +1 -1
- package/dist/modes.js +1 -1
- package/dist/transports/offline.js +1 -1
- package/dist/version.js +1 -1
- package/dist-types/component-hooks/use-consent-gate.d.ts +102 -0
- package/dist-types/component-hooks/use-consent-labels.d.ts +32 -0
- package/dist-types/component-hooks/use-consent-text-direction.d.ts +22 -0
- package/dist-types/component-hooks/use-vendors-listed-under.d.ts +30 -0
- package/dist-types/components/prompt/atoms/root.d.ts +3 -3
- package/dist-types/components/prompt/prompt.d.ts +4 -3
- package/dist-types/components/prompt/surface-context.d.ts +1 -14
- package/dist-types/components/prompt/use-banner-copy.d.ts +8 -3
- package/dist-types/components/shared/streamed-surface.d.ts +47 -10
- package/dist-types/headless.d.ts +10 -1
- package/dist-types/hooks/use-iab-policy-guard.d.ts +17 -1
- package/dist-types/hooks/use-scroll-lock.d.ts +16 -2
- package/dist-types/index-parts/offline.d.ts +1 -1
- package/dist-types/modes.d.ts +1 -1
- package/dist-types/module-hooks/script-loader.d.ts +9 -0
- package/dist-types/provider.d.ts +3 -3
- package/dist-types/transports/offline.d.ts +2 -2
- package/dist-types/version.d.ts +1 -1
- package/docs/README.md +11 -4
- package/docs/concepts/choose-your-setup.md +9 -9
- package/docs/concepts/consent-state.md +81 -9
- package/docs/concepts/data-fetching.md +30 -23
- package/docs/concepts/modes.md +85 -35
- package/docs/customization/recipes.md +4 -4
- package/docs/customization/stylesheets.md +3 -3
- package/docs/customization/tailwind.md +17 -34
- package/docs/customization/translations.md +18 -12
- package/docs/frameworks/react/clear-on-revocation.md +3 -2
- package/docs/frameworks/react/components/consent-banner.md +3 -3
- package/docs/frameworks/react/components/consent-provider.md +29 -29
- package/docs/frameworks/react/gpp.md +1 -1
- package/docs/frameworks/react/headless.md +146 -19
- package/docs/frameworks/react/iab.md +8 -1
- package/docs/frameworks/react/quickstart.md +1 -1
- package/docs/frameworks/react/rendering.md +1 -1
- package/docs/frameworks/react/translations.md +9 -9
- package/docs/frameworks/react/troubleshooting.md +1 -1
- package/docs/frameworks/react/upgrade-v3.md +39 -32
- package/docs/frameworks/react/vendor-consent.md +5 -0
- package/docs/guides/banner-experiments.md +3 -3
- package/docs/guides/troubleshooting.md +3 -2
- package/docs/integrations/adobe-analytics.md +2 -2
- package/docs/integrations/ahrefs-analytics.md +2 -2
- package/docs/integrations/amplitude.md +2 -2
- package/docs/integrations/clay.md +305 -0
- package/docs/integrations/clearbit.md +2 -2
- package/docs/integrations/cloudflare-web-analytics.md +2 -2
- package/docs/integrations/cloudflare-zaraz.md +2 -2
- package/docs/integrations/crisp.md +2 -2
- package/docs/integrations/databuddy.md +2 -2
- package/docs/integrations/fathom-analytics.md +2 -2
- package/docs/integrations/front-chat.md +2 -2
- package/docs/integrations/google-maps.md +2 -2
- package/docs/integrations/google-tag-manager.md +59 -2
- package/docs/integrations/google-tag.md +2 -2
- package/docs/integrations/heap.md +2 -2
- package/docs/integrations/hightouch.md +2 -2
- package/docs/integrations/hotjar.md +40 -26
- package/docs/integrations/intercom.md +2 -2
- package/docs/integrations/klaviyo.md +2 -2
- package/docs/integrations/linkedin-insights.md +2 -2
- package/docs/integrations/logrocket.md +2 -2
- package/docs/integrations/matomo-analytics.md +2 -2
- package/docs/integrations/meta-pixel.md +2 -2
- package/docs/integrations/microsoft-clarity.md +2 -2
- package/docs/integrations/microsoft-uet.md +2 -2
- package/docs/integrations/mixpanel-analytics.md +2 -2
- package/docs/integrations/one-dollar-stats.md +2 -2
- package/docs/integrations/openai-pixel.md +2 -2
- package/docs/integrations/other-ads-and-pixels.md +94 -0
- package/docs/integrations/other-analytics.md +108 -0
- package/docs/integrations/other-chat-and-support.md +112 -0
- package/docs/integrations/other-email-and-sms.md +156 -0
- package/docs/integrations/other-experience.md +222 -0
- package/docs/integrations/overview.md +55 -21
- package/docs/integrations/pinterest-tag.md +2 -2
- package/docs/integrations/pirsch.md +2 -2
- package/docs/integrations/plausible-analytics.md +2 -2
- package/docs/integrations/posthog.md +2 -2
- package/docs/integrations/promptwatch.md +2 -2
- package/docs/integrations/reddit-pixel.md +2 -2
- package/docs/integrations/rudderstack.md +2 -2
- package/docs/integrations/rybbit-analytics.md +2 -2
- package/docs/integrations/segment.md +2 -2
- package/docs/integrations/sentry.md +2 -2
- package/docs/integrations/shopify.md +323 -0
- package/docs/integrations/snapchat-pixel.md +2 -2
- package/docs/integrations/tiktok-pixel.md +2 -2
- package/docs/integrations/umami-analytics.md +2 -2
- package/docs/integrations/vercel-analytics.md +2 -2
- package/docs/integrations/vercel-speed-insights.md +7 -2
- package/docs/integrations/x-pixel.md +2 -2
- package/docs/integrations/youtube.md +2 -2
- package/package.json +10 -32
- package/dist/components/prompt/resolve-banner-primary-actions.js +0 -1
- package/dist-types/components/prompt/resolve-banner-primary-actions.d.ts +0 -14
|
@@ -166,7 +166,7 @@ pass them as a top-level prop:
|
|
|
166
166
|
|
|
167
167
|
```svelte title="src/App.svelte"
|
|
168
168
|
<script lang="ts">
|
|
169
|
-
import { ConsentProvider, manifest } from '
|
|
169
|
+
import { ConsentProvider, manifest } from 'c15t/svelte';
|
|
170
170
|
import { scripts } from './consent-scripts';
|
|
171
171
|
</script>
|
|
172
172
|
|
|
@@ -185,7 +185,7 @@ handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs
|
|
|
185
185
|
|
|
186
186
|
```svelte title="src/routes/+layout.svelte"
|
|
187
187
|
<script lang="ts">
|
|
188
|
-
import { ConsentRoot } from '
|
|
188
|
+
import { ConsentRoot } from 'c15t/svelte';
|
|
189
189
|
import { scripts } from '../consent-scripts';
|
|
190
190
|
|
|
191
191
|
let { children, data } = $props();
|
|
@@ -0,0 +1,305 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Clay
|
|
3
|
+
description: Load Clay web intent only after marketing consent and understand
|
|
4
|
+
its storage and revocation limits.
|
|
5
|
+
seoTitle: Clay web intent consent with c15t
|
|
6
|
+
seoDescription: Gate Clay visitor identification on marketing consent with c15t
|
|
7
|
+
and verify the loader, storage and revocation behavior.
|
|
8
|
+
icon: radar
|
|
9
|
+
group: integrations
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
The `clay` helper waits for `marketing` consent before loading Clay web intent.
|
|
13
|
+
Clay resolves visitors' IP addresses to companies and can use device fingerprints
|
|
14
|
+
and identifiers from other vendors for sales profiling.
|
|
15
|
+
|
|
16
|
+
## Configure Clay
|
|
17
|
+
|
|
18
|
+
Copy the `id` from Settings > Web intent > JavaScript Snippet. Remove any direct
|
|
19
|
+
Clay snippet or GTM copy so it cannot bypass c15t.
|
|
20
|
+
|
|
21
|
+
| Package manager | Command |
|
|
22
|
+
| :-------------- | :------------------------------- |
|
|
23
|
+
| npm | `npm install @c15t/integrations` |
|
|
24
|
+
| pnpm | `pnpm add @c15t/integrations` |
|
|
25
|
+
| yarn | `yarn add @c15t/integrations` |
|
|
26
|
+
| bun | `bun add @c15t/integrations` |
|
|
27
|
+
|
|
28
|
+
```ts title="src/consent-scripts.ts"
|
|
29
|
+
import { clay } from '@c15t/integrations/clay';
|
|
30
|
+
|
|
31
|
+
export const scripts = [clay({ siteId: 'YOUR_SITE_ID' })];
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
## Register the scripts
|
|
35
|
+
|
|
36
|
+
Complete your [framework quickstart](https://c15t.com/docs/frameworks) first. Keep its Inth
|
|
37
|
+
endpoint, policy, styles and consent UI. Remove the vendor's original script,
|
|
38
|
+
SDK initializer or tag-manager entry, so the vendor loads only through c15t.
|
|
39
|
+
|
|
40
|
+
The vendor pages put the helper in `src/consent-scripts.ts`. If your framework
|
|
41
|
+
quickstart already has a `scripts` array, such as the one in `c15t.config.ts`
|
|
42
|
+
in the Next.js guide, add the helper to that array instead of creating a
|
|
43
|
+
second file.
|
|
44
|
+
The `scripts` export is a configuration, not an initializer. Add it to the c15t provider you already have, at the registration
|
|
45
|
+
point for your framework below. These are edits to that provider, not a second
|
|
46
|
+
provider.
|
|
47
|
+
|
|
48
|
+
**Next.js**
|
|
49
|
+
|
|
50
|
+
Add the configuration to `scripts` in `c15t.config.ts`, next to
|
|
51
|
+
`next.config.ts`:
|
|
52
|
+
|
|
53
|
+
```ts title="c15t.config.ts"
|
|
54
|
+
import { defineConsentConfig } from 'c15t/next';
|
|
55
|
+
import { scripts } from './src/consent-scripts';
|
|
56
|
+
|
|
57
|
+
export default defineConsentConfig({ scripts });
|
|
58
|
+
```
|
|
59
|
+
|
|
60
|
+
Keep the rest of your config, such as `mode` and `routePrefix`, in the
|
|
61
|
+
same call. `ConsentRoot` reads the config in the browser, so the layout
|
|
62
|
+
keeps passing only `state`. App Router, Pages Router and static export all
|
|
63
|
+
read the same file. See
|
|
64
|
+
[Next.js scripts and embeds](https://c15t.com/docs/frameworks/next/scripts).
|
|
65
|
+
|
|
66
|
+
**TanStack Start**
|
|
67
|
+
|
|
68
|
+
Import the configuration into your root route and pass it to the existing
|
|
69
|
+
`ConsentRoot` as a top-level prop. Keep the loader from the
|
|
70
|
+
[TanStack Start quickstart](https://c15t.com/docs/frameworks/tanstack-start/quickstart):
|
|
71
|
+
|
|
72
|
+
```tsx title="src/routes/__root.tsx"
|
|
73
|
+
import { scripts } from '../consent-scripts';
|
|
74
|
+
|
|
75
|
+
<ConsentRoot state={consent} scripts={scripts}>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
Import vendor helpers in the root route module, not in a server function.
|
|
79
|
+
A server function's return value must be serializable, and script
|
|
80
|
+
configurations carry callbacks. See
|
|
81
|
+
[TanStack Start scripts](https://c15t.com/docs/frameworks/tanstack-start/scripts).
|
|
82
|
+
|
|
83
|
+
**React**
|
|
84
|
+
|
|
85
|
+
Add the configuration to the existing `ConsentProvider` options, next to
|
|
86
|
+
`mode`:
|
|
87
|
+
|
|
88
|
+
```tsx title="src/consent.tsx"
|
|
89
|
+
import { scripts } from './consent-scripts';
|
|
90
|
+
|
|
91
|
+
<ConsentProvider options={{ mode, scripts }}>
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
`mode` is the `manifest()` value from the
|
|
95
|
+
[React quickstart](../frameworks/react/quickstart.md). Keep the banner,
|
|
96
|
+
dialog and preferences link inside the provider. See
|
|
97
|
+
[React scripts and embeds](../frameworks/react/scripts.md).
|
|
98
|
+
|
|
99
|
+
**Nuxt**
|
|
100
|
+
|
|
101
|
+
Register the scripts under the `c15t` key in `app/app.config.ts`. Adjust the
|
|
102
|
+
relative import to where you created `consent-scripts.ts`:
|
|
103
|
+
|
|
104
|
+
```ts title="app/app.config.ts"
|
|
105
|
+
import { scripts } from '../src/consent-scripts';
|
|
106
|
+
|
|
107
|
+
export default defineAppConfig({
|
|
108
|
+
c15t: { scripts },
|
|
109
|
+
});
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
The Nuxt module merges this over its options in `nuxt.config.ts` and starts
|
|
113
|
+
one script loader in the browser after hydration, once it has applied the
|
|
114
|
+
visitor's stored choice and privacy signals. Keep `scripts` out of
|
|
115
|
+
`nuxt.config.ts`, which reaches the browser as JSON and drops the vendor
|
|
116
|
+
callbacks. Write the vendor IDs into `consent-scripts.ts`. See
|
|
117
|
+
[Nuxt scripts and embeds](https://c15t.com/docs/frameworks/nuxt/scripts).
|
|
118
|
+
|
|
119
|
+
**Vue**
|
|
120
|
+
|
|
121
|
+
Pass the scripts to the existing `c15tVue` plugin call in `src/main.ts`:
|
|
122
|
+
|
|
123
|
+
```ts title="src/main.ts"
|
|
124
|
+
import { c15tVue, manifest } from 'c15t/vue/vue-plugin';
|
|
125
|
+
import { scripts } from './consent-scripts';
|
|
126
|
+
|
|
127
|
+
app.use(c15tVue, {
|
|
128
|
+
mode: manifest(),
|
|
129
|
+
scripts,
|
|
130
|
+
});
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
Keep your existing `mode` and other options. The plugin starts one
|
|
134
|
+
script loader when the app mounts, after it has applied the visitor's stored
|
|
135
|
+
choice. Do not also call `createScriptLoader` from a component. See
|
|
136
|
+
[Vue scripts and embeds](https://c15t.com/docs/frameworks/vue/scripts).
|
|
137
|
+
|
|
138
|
+
**Astro**
|
|
139
|
+
|
|
140
|
+
Add the scripts to the client entrypoint from the
|
|
141
|
+
[Astro quickstart](https://c15t.com/docs/frameworks/astro/quickstart), `src/c15t.client.ts`,
|
|
142
|
+
which the integration finds on its own. Keep `astro.config.mjs` as it is.
|
|
143
|
+
If the module already exports scripts, combine the two arrays.
|
|
144
|
+
|
|
145
|
+
```ts title="src/c15t.client.ts"
|
|
146
|
+
import type { C15tClientOptionsExtension } from 'c15t/astro';
|
|
147
|
+
import { scripts } from './consent-scripts';
|
|
148
|
+
|
|
149
|
+
export default { scripts } satisfies C15tClientOptionsExtension;
|
|
150
|
+
```
|
|
151
|
+
|
|
152
|
+
Vendor helpers contain callbacks, and the integration options in
|
|
153
|
+
`astro.config.mjs` are serialized into the page, so do not put helpers in
|
|
154
|
+
the integration's `scripts` option. The integration passes the client
|
|
155
|
+
entrypoint to the one runtime every page shares, including across
|
|
156
|
+
`ClientRouter` navigation.
|
|
157
|
+
|
|
158
|
+
**Svelte**
|
|
159
|
+
|
|
160
|
+
Import the scripts in the component that owns your existing provider and
|
|
161
|
+
pass them as a top-level prop:
|
|
162
|
+
|
|
163
|
+
```svelte title="src/App.svelte"
|
|
164
|
+
<script lang="ts">
|
|
165
|
+
import { ConsentProvider, manifest } from 'c15t/svelte';
|
|
166
|
+
import { scripts } from './consent-scripts';
|
|
167
|
+
</script>
|
|
168
|
+
|
|
169
|
+
<ConsentProvider mode={manifest()} {scripts}>
|
|
170
|
+
<!-- Keep your application, consent UI and preferences link here. -->
|
|
171
|
+
</ConsentProvider>
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
Retain the styles and consent UI from the [Svelte quickstart](https://c15t.com/docs/frameworks/svelte/quickstart).
|
|
175
|
+
The provider owns the loader and disposes it on unmount.
|
|
176
|
+
|
|
177
|
+
**SvelteKit**
|
|
178
|
+
|
|
179
|
+
Add the scripts to the existing `ConsentRoot` in the root layout. Keep the
|
|
180
|
+
handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs/frameworks/sveltekit/quickstart).
|
|
181
|
+
|
|
182
|
+
```svelte title="src/routes/+layout.svelte"
|
|
183
|
+
<script lang="ts">
|
|
184
|
+
import { ConsentRoot } from 'c15t/svelte';
|
|
185
|
+
import { scripts } from '../consent-scripts';
|
|
186
|
+
|
|
187
|
+
let { children, data } = $props();
|
|
188
|
+
</script>
|
|
189
|
+
|
|
190
|
+
<ConsentRoot state={data.consent} {scripts}>
|
|
191
|
+
{@render children()}
|
|
192
|
+
<!-- Keep your consent UI and preferences link here. -->
|
|
193
|
+
</ConsentRoot>
|
|
194
|
+
```
|
|
195
|
+
|
|
196
|
+
Import vendor helpers in the layout component, not in `+layout.server.ts`:
|
|
197
|
+
a server load cannot send functions to the browser. Prerendered, static and
|
|
198
|
+
SPA-mode pages use the same `scripts` prop. If you pass an externally owned
|
|
199
|
+
`runtime` to the provider, register scripts when creating that runtime instead.
|
|
200
|
+
|
|
201
|
+
**HTML**
|
|
202
|
+
|
|
203
|
+
The helpers in `@c15t/integrations` are ES modules that need a bundler. On a
|
|
204
|
+
page that loads the c15t script tag, paste the vendor's own snippet instead
|
|
205
|
+
and keep it inert until its category is allowed:
|
|
206
|
+
|
|
207
|
+
```html
|
|
208
|
+
<script type="text/plain" data-c15t-category="measurement">
|
|
209
|
+
// The vendor's snippet, unchanged
|
|
210
|
+
</script>
|
|
211
|
+
```
|
|
212
|
+
|
|
213
|
+
Use the category this guide names for the vendor. c15t runs the snippet
|
|
214
|
+
once that category is allowed, and reloads the page when the visitor
|
|
215
|
+
withdraws it. Helper options on this page, such as `loadMode`, do not apply
|
|
216
|
+
to a pasted snippet. See [HTML scripts](https://c15t.com/docs/frameworks/html/scripts).
|
|
217
|
+
|
|
218
|
+
**JavaScript**
|
|
219
|
+
|
|
220
|
+
Pass the scripts to `init()` from `@c15t/browser`, next to your mode:
|
|
221
|
+
|
|
222
|
+
```ts
|
|
223
|
+
import { init, manifest } from '@c15t/browser';
|
|
224
|
+
import { scripts } from './consent-scripts';
|
|
225
|
+
|
|
226
|
+
const consent = init({
|
|
227
|
+
mode: manifest(),
|
|
228
|
+
scripts,
|
|
229
|
+
});
|
|
230
|
+
```
|
|
231
|
+
|
|
232
|
+
Keep the mode from your quickstart. With
|
|
233
|
+
`createConsentRuntime` from `c15t/runtime`, pass `scripts` to it instead.
|
|
234
|
+
A kernel you create yourself needs a loader from
|
|
235
|
+
`c15t/modules/script-loader`. Attach one loader per kernel. See
|
|
236
|
+
[JavaScript scripts](https://c15t.com/docs/frameworks/javascript/scripts).
|
|
237
|
+
|
|
238
|
+
## Options
|
|
239
|
+
|
|
240
|
+
| Option | Default | Behavior |
|
|
241
|
+
| ----------- | --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
242
|
+
| `siteId` | Required | Public ID from Clay's snippet. Trimmed and URL-encoded. Non-string, blank or invalid IDs log an error and skip loading. |
|
|
243
|
+
| `scriptUrl` | `https://static.claydar.com/init.v1.js?id=<siteId>` | Override for a proxy or pinned loader. Keep the `id` query parameter because Clay reads `document.currentScript.src`. A blank override uses the default. |
|
|
244
|
+
|
|
245
|
+
## Loading and revocation
|
|
246
|
+
|
|
247
|
+
The loader runs from a real script element in the body after marketing consent.
|
|
248
|
+
It loads `cdn.claydar.com/releases/latest/radar.min.js`, which sends data to
|
|
249
|
+
`api.claydar.com`. Include those hosts in the matching CSP directives.
|
|
250
|
+
Measurement consent alone loads nothing. Clay's own CMP detection does not cover
|
|
251
|
+
c15t.
|
|
252
|
+
|
|
253
|
+
On load, the helper queues `giveCookieConsent`. On withdrawal it calls
|
|
254
|
+
`denyCookieConsent` when available. These methods were verified in the served
|
|
255
|
+
tracker, but Clay does not document them. Denial moves identifiers from persistent
|
|
256
|
+
storage into session storage. It does not stop requests. Keep c15t's default
|
|
257
|
+
`reloadOnConsentRevoked` behavior enabled. With reload disabled, the tracker can
|
|
258
|
+
continue sending events until navigation. Removing its loader cannot unload the
|
|
259
|
+
tracker or its child scripts.
|
|
260
|
+
|
|
261
|
+
The served tracker uses `claydar_*` cookies and local storage, including a device
|
|
262
|
+
ID cookie with a one-year lifetime. It also uses `radar_sn_*` session keys for
|
|
263
|
+
fingerprints, `spotter_data` for company lookup and a temporary `__sn_tld_probe`
|
|
264
|
+
cookie. Account settings and future vendor versions can change this inventory.
|
|
265
|
+
|
|
266
|
+
## Verify Clay
|
|
267
|
+
|
|
268
|
+
Filter Network by `claydar.com`. Denial and measurement-only consent must show no
|
|
269
|
+
requests, no `Claydar` global and no vendor storage. Grant marketing and confirm
|
|
270
|
+
one `init.v1.js?id=<siteId>` loader plus the tracker. Withdraw consent and confirm
|
|
271
|
+
the page reloads, then confirm Clay stays blocked on the new page.
|
|
272
|
+
|
|
273
|
+
The monitor uses a placeholder site ID. Successful loader and tracker execution
|
|
274
|
+
does not establish account configuration or successful company identification.
|
|
275
|
+
|
|
276
|
+
Sources: [Clay Web intent](https://university.clay.com/docs/website-tracking),
|
|
277
|
+
[Clay's Web intent announcement](https://www.clay.com/blog/web-intent),
|
|
278
|
+
[loader](https://static.claydar.com/init.v1.js), and
|
|
279
|
+
[served tracker](https://cdn.claydar.com/releases/latest/radar.min.js).
|
|
280
|
+
|
|
281
|
+
Test in a private window with an opt-in policy. Open DevTools Network, disable
|
|
282
|
+
the cache and filter by the vendor's domain:
|
|
283
|
+
|
|
284
|
+
1. Load the page. No request goes to the vendor before you choose.
|
|
285
|
+
2. Click Reject, then reload. There is still no vendor request.
|
|
286
|
+
3. Open Privacy settings and allow the helper's category. The vendor script
|
|
287
|
+
loads without a page reload.
|
|
288
|
+
4. Turn the category off again and save. c15t reloads the page, and the new
|
|
289
|
+
page makes no vendor request.
|
|
290
|
+
|
|
291
|
+
c15t reloads on revocation because removing a script element does not stop
|
|
292
|
+
code that already ran. The vendor's listeners, timers and queued events stay
|
|
293
|
+
alive until the page unloads. If you set `reloadOnConsentRevoked: false`, stop
|
|
294
|
+
the vendor yourself. Register a callback-only script whose `onConsentChange`
|
|
295
|
+
calls the vendor's opt-out API, as shown in
|
|
296
|
+
[custom integrations](./building-integrations.md), and check the
|
|
297
|
+
permission before each of your own event calls. The reload does not delete
|
|
298
|
+
cookies the vendor already set; see
|
|
299
|
+
[clear on revocation for your framework](./overview.md#vendor-switches-and-cookie-cleanup).
|
|
300
|
+
|
|
301
|
+
The helper lists its vendor by name in the preference dialog, so a visitor can
|
|
302
|
+
turn it off inside an allowed category. See
|
|
303
|
+
[vendor consent for your framework](./overview.md#vendor-switches-and-cookie-cleanup). The
|
|
304
|
+
[consent verification guide](../guides/verify-consent.md) covers navigation,
|
|
305
|
+
expiry and hosting checks.
|
|
@@ -165,7 +165,7 @@ pass them as a top-level prop:
|
|
|
165
165
|
|
|
166
166
|
```svelte title="src/App.svelte"
|
|
167
167
|
<script lang="ts">
|
|
168
|
-
import { ConsentProvider, manifest } from '
|
|
168
|
+
import { ConsentProvider, manifest } from 'c15t/svelte';
|
|
169
169
|
import { scripts } from './consent-scripts';
|
|
170
170
|
</script>
|
|
171
171
|
|
|
@@ -184,7 +184,7 @@ handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs
|
|
|
184
184
|
|
|
185
185
|
```svelte title="src/routes/+layout.svelte"
|
|
186
186
|
<script lang="ts">
|
|
187
|
-
import { ConsentRoot } from '
|
|
187
|
+
import { ConsentRoot } from 'c15t/svelte';
|
|
188
188
|
import { scripts } from '../consent-scripts';
|
|
189
189
|
|
|
190
190
|
let { children, data } = $props();
|
|
@@ -166,7 +166,7 @@ pass them as a top-level prop:
|
|
|
166
166
|
|
|
167
167
|
```svelte title="src/App.svelte"
|
|
168
168
|
<script lang="ts">
|
|
169
|
-
import { ConsentProvider, manifest } from '
|
|
169
|
+
import { ConsentProvider, manifest } from 'c15t/svelte';
|
|
170
170
|
import { scripts } from './consent-scripts';
|
|
171
171
|
</script>
|
|
172
172
|
|
|
@@ -185,7 +185,7 @@ handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs
|
|
|
185
185
|
|
|
186
186
|
```svelte title="src/routes/+layout.svelte"
|
|
187
187
|
<script lang="ts">
|
|
188
|
-
import { ConsentRoot } from '
|
|
188
|
+
import { ConsentRoot } from 'c15t/svelte';
|
|
189
189
|
import { scripts } from '../consent-scripts';
|
|
190
190
|
|
|
191
191
|
let { children, data } = $props();
|
|
@@ -206,7 +206,7 @@ pass them as a top-level prop:
|
|
|
206
206
|
|
|
207
207
|
```svelte title="src/App.svelte"
|
|
208
208
|
<script lang="ts">
|
|
209
|
-
import { ConsentProvider, manifest } from '
|
|
209
|
+
import { ConsentProvider, manifest } from 'c15t/svelte';
|
|
210
210
|
import { scripts } from './consent-scripts';
|
|
211
211
|
</script>
|
|
212
212
|
|
|
@@ -225,7 +225,7 @@ handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs
|
|
|
225
225
|
|
|
226
226
|
```svelte title="src/routes/+layout.svelte"
|
|
227
227
|
<script lang="ts">
|
|
228
|
-
import { ConsentRoot } from '
|
|
228
|
+
import { ConsentRoot } from 'c15t/svelte';
|
|
229
229
|
import { scripts } from '../consent-scripts';
|
|
230
230
|
|
|
231
231
|
let { children, data } = $props();
|
|
@@ -164,7 +164,7 @@ pass them as a top-level prop:
|
|
|
164
164
|
|
|
165
165
|
```svelte title="src/App.svelte"
|
|
166
166
|
<script lang="ts">
|
|
167
|
-
import { ConsentProvider, manifest } from '
|
|
167
|
+
import { ConsentProvider, manifest } from 'c15t/svelte';
|
|
168
168
|
import { scripts } from './consent-scripts';
|
|
169
169
|
</script>
|
|
170
170
|
|
|
@@ -183,7 +183,7 @@ handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs
|
|
|
183
183
|
|
|
184
184
|
```svelte title="src/routes/+layout.svelte"
|
|
185
185
|
<script lang="ts">
|
|
186
|
-
import { ConsentRoot } from '
|
|
186
|
+
import { ConsentRoot } from 'c15t/svelte';
|
|
187
187
|
import { scripts } from '../consent-scripts';
|
|
188
188
|
|
|
189
189
|
let { children, data } = $props();
|
|
@@ -176,7 +176,7 @@ pass them as a top-level prop:
|
|
|
176
176
|
|
|
177
177
|
```svelte title="src/App.svelte"
|
|
178
178
|
<script lang="ts">
|
|
179
|
-
import { ConsentProvider, manifest } from '
|
|
179
|
+
import { ConsentProvider, manifest } from 'c15t/svelte';
|
|
180
180
|
import { scripts } from './consent-scripts';
|
|
181
181
|
</script>
|
|
182
182
|
|
|
@@ -195,7 +195,7 @@ handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs
|
|
|
195
195
|
|
|
196
196
|
```svelte title="src/routes/+layout.svelte"
|
|
197
197
|
<script lang="ts">
|
|
198
|
-
import { ConsentRoot } from '
|
|
198
|
+
import { ConsentRoot } from 'c15t/svelte';
|
|
199
199
|
import { scripts } from '../consent-scripts';
|
|
200
200
|
|
|
201
201
|
let { children, data } = $props();
|
|
@@ -166,7 +166,7 @@ pass them as a top-level prop:
|
|
|
166
166
|
|
|
167
167
|
```svelte title="src/App.svelte"
|
|
168
168
|
<script lang="ts">
|
|
169
|
-
import { ConsentProvider, manifest } from '
|
|
169
|
+
import { ConsentProvider, manifest } from 'c15t/svelte';
|
|
170
170
|
import { scripts } from './consent-scripts';
|
|
171
171
|
</script>
|
|
172
172
|
|
|
@@ -185,7 +185,7 @@ handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs
|
|
|
185
185
|
|
|
186
186
|
```svelte title="src/routes/+layout.svelte"
|
|
187
187
|
<script lang="ts">
|
|
188
|
-
import { ConsentRoot } from '
|
|
188
|
+
import { ConsentRoot } from 'c15t/svelte';
|
|
189
189
|
import { scripts } from '../consent-scripts';
|
|
190
190
|
|
|
191
191
|
let { children, data } = $props();
|
|
@@ -166,7 +166,7 @@ pass them as a top-level prop:
|
|
|
166
166
|
|
|
167
167
|
```svelte title="src/App.svelte"
|
|
168
168
|
<script lang="ts">
|
|
169
|
-
import { ConsentProvider, manifest } from '
|
|
169
|
+
import { ConsentProvider, manifest } from 'c15t/svelte';
|
|
170
170
|
import { scripts } from './consent-scripts';
|
|
171
171
|
</script>
|
|
172
172
|
|
|
@@ -185,7 +185,7 @@ handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs
|
|
|
185
185
|
|
|
186
186
|
```svelte title="src/routes/+layout.svelte"
|
|
187
187
|
<script lang="ts">
|
|
188
|
-
import { ConsentRoot } from '
|
|
188
|
+
import { ConsentRoot } from 'c15t/svelte';
|
|
189
189
|
import { scripts } from '../consent-scripts';
|
|
190
190
|
|
|
191
191
|
let { children, data } = $props();
|
|
@@ -239,7 +239,7 @@ The provider from your quickstart supplies its consent state.
|
|
|
239
239
|
|
|
240
240
|
```svelte title="src/ConsentEmbed.svelte"
|
|
241
241
|
<script lang="ts">
|
|
242
|
-
import { ConsentGate } from '
|
|
242
|
+
import { ConsentGate } from 'c15t/svelte';
|
|
243
243
|
import { embedCategory, embedURL, embedTitle, embedAspectRatio } from './embed-config';
|
|
244
244
|
</script>
|
|
245
245
|
|
|
@@ -268,7 +268,7 @@ Keep the SvelteKit root and its server-resolved state unchanged.
|
|
|
268
268
|
|
|
269
269
|
```svelte title="src/lib/ConsentEmbed.svelte"
|
|
270
270
|
<script lang="ts">
|
|
271
|
-
import { ConsentGate } from '
|
|
271
|
+
import { ConsentGate } from 'c15t/svelte';
|
|
272
272
|
import { embedCategory, embedURL, embedTitle, embedAspectRatio } from '../embed-config';
|
|
273
273
|
</script>
|
|
274
274
|
|
|
@@ -175,7 +175,7 @@ pass them as a top-level prop:
|
|
|
175
175
|
|
|
176
176
|
```svelte title="src/App.svelte"
|
|
177
177
|
<script lang="ts">
|
|
178
|
-
import { ConsentProvider, manifest } from '
|
|
178
|
+
import { ConsentProvider, manifest } from 'c15t/svelte';
|
|
179
179
|
import { scripts } from './consent-scripts';
|
|
180
180
|
</script>
|
|
181
181
|
|
|
@@ -194,7 +194,7 @@ handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs
|
|
|
194
194
|
|
|
195
195
|
```svelte title="src/routes/+layout.svelte"
|
|
196
196
|
<script lang="ts">
|
|
197
|
-
import { ConsentRoot } from '
|
|
197
|
+
import { ConsentRoot } from 'c15t/svelte';
|
|
198
198
|
import { scripts } from '../consent-scripts';
|
|
199
199
|
|
|
200
200
|
let { children, data } = $props();
|
|
@@ -356,6 +356,63 @@ settings, or fire it from a Custom Event trigger on `consent-update`. If a
|
|
|
356
356
|
vendor must make no request before consent, remove it from the container and
|
|
357
357
|
register its own c15t helper instead.
|
|
358
358
|
|
|
359
|
+
## Use the GTM template instead
|
|
360
|
+
|
|
361
|
+
Use the `googleTagManager` helper where you can. It sends the Consent Mode
|
|
362
|
+
default before `gtm.js` starts, and it can hold the container back until
|
|
363
|
+
consent. The c15t Consent Management template in the GTM Community Template
|
|
364
|
+
Gallery is for sites that manage scripts only through GTM. It loads the c15t
|
|
365
|
+
script-tag build, `@c15t/browser`, from inside the container and forwards
|
|
366
|
+
c15t's permissions to Google. Use the helper or the template on a page, never
|
|
367
|
+
both, or Google receives two sets of consent commands.
|
|
368
|
+
|
|
369
|
+
To add it:
|
|
370
|
+
|
|
371
|
+
1. In GTM, open Templates, search the gallery for **c15t Consent
|
|
372
|
+
Management** and add it. If it is not listed yet, download
|
|
373
|
+
[`template.tpl`](https://github.com/c15t/c15t/blob/canary/packages/browser/gtm-template/template.tpl),
|
|
374
|
+
then under Tag Templates choose New, open the ⋮ menu, choose Import and
|
|
375
|
+
select the file.
|
|
376
|
+
2. Create a tag from it with the **Consent Initialization - All Pages**
|
|
377
|
+
trigger, so it runs before your other tags.
|
|
378
|
+
3. Set **c15t script URL** to one of:
|
|
379
|
+
* `https://your-project.inth.app/c15t.js` for an Inth project, which
|
|
380
|
+
serves the script with its backend URL already set.
|
|
381
|
+
* `https://cdn.jsdelivr.net/npm/@c15t/browser@<version>/dist/c15t.js`,
|
|
382
|
+
with **Backend URL** set to your backend. The tag fails without it.
|
|
383
|
+
* `https://cdn.jsdelivr.net/npm/@c15t/browser@<version>/dist/c15t.local.js`
|
|
384
|
+
for local mode, with **Backend URL** left blank. This file needs
|
|
385
|
+
version 3.2.0 or later; earlier versions call it `c15t.offline.js`.
|
|
386
|
+
4. Under **Consent categories**, tick each purpose your container's tags
|
|
387
|
+
serve. c15t asks the visitor about these, besides strictly necessary.
|
|
388
|
+
Analytics and Marketing are ticked by default. With none ticked, c15t
|
|
389
|
+
asks only about categories that your c15t setup sets, and a container
|
|
390
|
+
loaded only through this tag has none.
|
|
391
|
+
5. Leave **Default consent state** empty to deny every type except
|
|
392
|
+
`security_storage`, or add rows per region. If you add region rows, also
|
|
393
|
+
add a row with **Region** blank. Without it, visitors outside those regions
|
|
394
|
+
get no default from the tag. **Wait for update** defaults to 500
|
|
395
|
+
milliseconds.
|
|
396
|
+
|
|
397
|
+
Use an exact version, such as `3.1.0`. The template rejects tags such as
|
|
398
|
+
`latest` and ranges such as `3.1`, which jsDelivr would move to each new
|
|
399
|
+
release without a change to your container. It accepts only Inth and jsDelivr
|
|
400
|
+
URLs. For a self-hosted backend,
|
|
401
|
+
add its script tag to your page source and untick **Load c15t from this tag**.
|
|
402
|
+
The tag then subscribes to the c15t already on the page. It also does this
|
|
403
|
+
when it finds c15t loaded, whichever setting you choose.
|
|
404
|
+
|
|
405
|
+
Once c15t starts, the tag sends an `update` with the visitor's permissions,
|
|
406
|
+
then pushes a `consent-update` event. It does both again after each change. It
|
|
407
|
+
uses the same category mapping as the helper, shown above, and cannot change
|
|
408
|
+
it. Unlike the helper, it also pushes the event when c15t starts, because c15t
|
|
409
|
+
usually starts after your page-view triggers have fired.
|
|
410
|
+
|
|
411
|
+
A tag that its consent settings block does not fire again by itself when the
|
|
412
|
+
visitor allows it. Give each non-Google tag a consent requirement and a Custom
|
|
413
|
+
Event trigger on `consent-update`. If the tag should fire once per page, set
|
|
414
|
+
its firing option to Once per page.
|
|
415
|
+
|
|
359
416
|
## Measure opt-in rate
|
|
360
417
|
|
|
361
418
|
If you run a banner experiment, the backend already counts visitors and
|
|
@@ -172,7 +172,7 @@ pass them as a top-level prop:
|
|
|
172
172
|
|
|
173
173
|
```svelte title="src/App.svelte"
|
|
174
174
|
<script lang="ts">
|
|
175
|
-
import { ConsentProvider, manifest } from '
|
|
175
|
+
import { ConsentProvider, manifest } from 'c15t/svelte';
|
|
176
176
|
import { scripts } from './consent-scripts';
|
|
177
177
|
</script>
|
|
178
178
|
|
|
@@ -191,7 +191,7 @@ handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs
|
|
|
191
191
|
|
|
192
192
|
```svelte title="src/routes/+layout.svelte"
|
|
193
193
|
<script lang="ts">
|
|
194
|
-
import { ConsentRoot } from '
|
|
194
|
+
import { ConsentRoot } from 'c15t/svelte';
|
|
195
195
|
import { scripts } from '../consent-scripts';
|
|
196
196
|
|
|
197
197
|
let { children, data } = $props();
|
|
@@ -166,7 +166,7 @@ pass them as a top-level prop:
|
|
|
166
166
|
|
|
167
167
|
```svelte title="src/App.svelte"
|
|
168
168
|
<script lang="ts">
|
|
169
|
-
import { ConsentProvider, manifest } from '
|
|
169
|
+
import { ConsentProvider, manifest } from 'c15t/svelte';
|
|
170
170
|
import { scripts } from './consent-scripts';
|
|
171
171
|
</script>
|
|
172
172
|
|
|
@@ -185,7 +185,7 @@ handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs
|
|
|
185
185
|
|
|
186
186
|
```svelte title="src/routes/+layout.svelte"
|
|
187
187
|
<script lang="ts">
|
|
188
|
-
import { ConsentRoot } from '
|
|
188
|
+
import { ConsentRoot } from 'c15t/svelte';
|
|
189
189
|
import { scripts } from '../consent-scripts';
|
|
190
190
|
|
|
191
191
|
let { children, data } = $props();
|
|
@@ -164,7 +164,7 @@ pass them as a top-level prop:
|
|
|
164
164
|
|
|
165
165
|
```svelte title="src/App.svelte"
|
|
166
166
|
<script lang="ts">
|
|
167
|
-
import { ConsentProvider, manifest } from '
|
|
167
|
+
import { ConsentProvider, manifest } from 'c15t/svelte';
|
|
168
168
|
import { scripts } from './consent-scripts';
|
|
169
169
|
</script>
|
|
170
170
|
|
|
@@ -183,7 +183,7 @@ handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs
|
|
|
183
183
|
|
|
184
184
|
```svelte title="src/routes/+layout.svelte"
|
|
185
185
|
<script lang="ts">
|
|
186
|
-
import { ConsentRoot } from '
|
|
186
|
+
import { ConsentRoot } from 'c15t/svelte';
|
|
187
187
|
import { scripts } from '../consent-scripts';
|
|
188
188
|
|
|
189
189
|
let { children, data } = $props();
|