@c15t/react 3.2.0-canary.0 → 3.2.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 +30 -7
- package/dist/styles.tw3.css +2 -2
- package/dist/version.js +1 -1
- package/dist-types/version.d.ts +1 -1
- package/docs/README.md +30 -7
- package/docs/concepts/modes.md +5 -3
- package/docs/customization/stylesheets.md +39 -0
- package/docs/frameworks/react/hooks.md +2 -1
- package/docs/frameworks/react/quickstart.md +1 -1
- package/docs/frameworks/react/upgrade-v3.md +2 -2
- package/docs/integrations/activecampaign.md +297 -0
- package/docs/integrations/ada.md +396 -0
- package/docs/integrations/adobe-target.md +460 -0
- package/docs/integrations/adroll.md +336 -0
- package/docs/integrations/amazon-ads.md +424 -0
- package/docs/integrations/appcues.md +368 -0
- package/docs/integrations/attentive.md +313 -0
- package/docs/integrations/building-integrations.md +29 -16
- package/docs/integrations/clearbit.md +1 -1
- package/docs/integrations/customer-io.md +369 -0
- package/docs/integrations/databuddy.md +125 -50
- package/docs/integrations/default-com.md +497 -0
- package/docs/integrations/dynamic-yield.md +373 -0
- package/docs/integrations/fullstory.md +298 -0
- package/docs/integrations/gainsight-px.md +418 -0
- package/docs/integrations/gorgias.md +365 -0
- package/docs/integrations/hubspot.md +529 -0
- package/docs/integrations/insider.md +550 -0
- package/docs/integrations/liveintent.md +327 -0
- package/docs/integrations/lucky-orange.md +336 -0
- package/docs/integrations/marketo.md +309 -0
- package/docs/integrations/optimizely.md +411 -0
- package/docs/integrations/oracle-eloqua.md +301 -0
- package/docs/integrations/overview.md +124 -111
- package/docs/integrations/pendo.md +339 -0
- package/docs/integrations/rb2b.md +363 -0
- package/docs/integrations/salesforce-pardot.md +342 -0
- package/docs/integrations/statable-analytics.md +345 -0
- package/docs/integrations/the-trade-desk.md +328 -0
- package/docs/integrations/vector.md +333 -0
- package/docs/integrations/wisepops.md +416 -0
- package/docs/integrations/zendesk.md +359 -0
- package/package.json +8 -8
- package/docs/integrations/other-ads-and-pixels.md +0 -94
- package/docs/integrations/other-analytics.md +0 -108
- package/docs/integrations/other-chat-and-support.md +0 -112
- package/docs/integrations/other-email-and-sms.md +0 -156
- package/docs/integrations/other-experience.md +0 -222
|
@@ -0,0 +1,359 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Zendesk Messaging
|
|
3
|
+
description: Load the Zendesk Messaging Web Widget after functionality consent,
|
|
4
|
+
map measurement consent to its cookie ranges and clear widget storage on
|
|
5
|
+
revocation.
|
|
6
|
+
seoTitle: Zendesk Messaging cookie consent with c15t
|
|
7
|
+
seoDescription: Gate Zendesk Messaging on functionality consent. Map measurement
|
|
8
|
+
consent to analytics storage and send Zendesk's none range when consent is
|
|
9
|
+
withdrawn.
|
|
10
|
+
icon: messages-square
|
|
11
|
+
group: integrations
|
|
12
|
+
---
|
|
13
|
+
|
|
14
|
+
Zendesk Messaging adds the Zendesk support chat widget to your site. The c15t
|
|
15
|
+
`zendeskWidget` helper waits for `functionality` consent before it creates
|
|
16
|
+
Zendesk's globals or requests the widget. Before the widget loads, it tells
|
|
17
|
+
Zendesk which storage to use: functional storage only, or analytics storage as
|
|
18
|
+
well when `measurement` is allowed.
|
|
19
|
+
|
|
20
|
+
On withdrawal, the helper tells Zendesk to hide the widget and delete its local
|
|
21
|
+
and session storage, and c15t reloads the page by default.
|
|
22
|
+
|
|
23
|
+
This helper covers Zendesk Messaging. Web Widget Classic uses a different API.
|
|
24
|
+
|
|
25
|
+
## Configure Zendesk Messaging
|
|
26
|
+
|
|
27
|
+
In **Admin Center > Channels > Messaging and social > Messaging**, select your
|
|
28
|
+
widget and open **Installation**. Copy the widget key from its code snippet.
|
|
29
|
+
Then remove the Zendesk snippet from your page or tag manager.
|
|
30
|
+
|
|
31
|
+
| Package manager | Command |
|
|
32
|
+
| :-------------- | :------------------------------- |
|
|
33
|
+
| npm | `npm install @c15t/integrations` |
|
|
34
|
+
| pnpm | `pnpm add @c15t/integrations` |
|
|
35
|
+
| yarn | `yarn add @c15t/integrations` |
|
|
36
|
+
| bun | `bun add @c15t/integrations` |
|
|
37
|
+
|
|
38
|
+
```ts title="src/consent-scripts.ts"
|
|
39
|
+
import { zendeskWidget } from '@c15t/integrations/zendesk';
|
|
40
|
+
|
|
41
|
+
export const scripts = [zendeskWidget({ key: 'YOUR_ZENDESK_WIDGET_KEY' })];
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
## Register the scripts
|
|
45
|
+
|
|
46
|
+
Complete your [framework quickstart](https://c15t.com/docs/frameworks) first. Keep its Inth
|
|
47
|
+
endpoint, policy, styles and consent UI. Remove the vendor's original script,
|
|
48
|
+
SDK initializer or tag-manager entry, so the vendor loads only through c15t.
|
|
49
|
+
|
|
50
|
+
The vendor pages put the helper in `src/consent-scripts.ts`. If your framework
|
|
51
|
+
quickstart already has a `scripts` array, such as the one in `c15t.config.ts`
|
|
52
|
+
in the Next.js guide, add the helper to that array instead of creating a
|
|
53
|
+
second file.
|
|
54
|
+
The `scripts` export is a configuration, not an initializer. Add it to the c15t provider you already have, at the registration
|
|
55
|
+
point for your framework below. These are edits to that provider, not a second
|
|
56
|
+
provider.
|
|
57
|
+
|
|
58
|
+
**Next.js**
|
|
59
|
+
|
|
60
|
+
Add the configuration to `scripts` in `c15t.config.ts`, next to
|
|
61
|
+
`next.config.ts`:
|
|
62
|
+
|
|
63
|
+
```ts title="c15t.config.ts"
|
|
64
|
+
import { defineConsentConfig } from 'c15t/next';
|
|
65
|
+
import { scripts } from './src/consent-scripts';
|
|
66
|
+
|
|
67
|
+
export default defineConsentConfig({ scripts });
|
|
68
|
+
```
|
|
69
|
+
|
|
70
|
+
Keep the rest of your config, such as `mode` and `routePrefix`, in the
|
|
71
|
+
same call. `ConsentRoot` reads the config in the browser, so the layout
|
|
72
|
+
keeps passing only `state`. App Router, Pages Router and static export all
|
|
73
|
+
read the same file. See
|
|
74
|
+
[Next.js scripts and embeds](https://c15t.com/docs/frameworks/next/scripts).
|
|
75
|
+
|
|
76
|
+
**TanStack Start**
|
|
77
|
+
|
|
78
|
+
Import the configuration into your root route and pass it to the existing
|
|
79
|
+
`ConsentRoot` as a top-level prop. Keep the loader from the
|
|
80
|
+
[TanStack Start quickstart](https://c15t.com/docs/frameworks/tanstack-start/quickstart):
|
|
81
|
+
|
|
82
|
+
```tsx title="src/routes/__root.tsx"
|
|
83
|
+
import { scripts } from '../consent-scripts';
|
|
84
|
+
|
|
85
|
+
<ConsentRoot state={consent} scripts={scripts}>
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
Import vendor helpers in the root route module, not in a server function.
|
|
89
|
+
A server function's return value must be serializable, and script
|
|
90
|
+
configurations carry callbacks. See
|
|
91
|
+
[TanStack Start scripts](https://c15t.com/docs/frameworks/tanstack-start/scripts).
|
|
92
|
+
|
|
93
|
+
**React**
|
|
94
|
+
|
|
95
|
+
Add the configuration to the existing `ConsentProvider` options, next to
|
|
96
|
+
`mode`:
|
|
97
|
+
|
|
98
|
+
```tsx title="src/consent.tsx"
|
|
99
|
+
import { scripts } from './consent-scripts';
|
|
100
|
+
|
|
101
|
+
<ConsentProvider options={{ mode, scripts }}>
|
|
102
|
+
```
|
|
103
|
+
|
|
104
|
+
`mode` is the `manifest()` value from the
|
|
105
|
+
[React quickstart](../frameworks/react/quickstart.md). Keep the banner,
|
|
106
|
+
dialog and preferences link inside the provider. See
|
|
107
|
+
[React scripts and embeds](../frameworks/react/scripts.md).
|
|
108
|
+
|
|
109
|
+
**Nuxt**
|
|
110
|
+
|
|
111
|
+
Register the scripts under the `c15t` key in `app/app.config.ts`. Adjust the
|
|
112
|
+
relative import to where you created `consent-scripts.ts`:
|
|
113
|
+
|
|
114
|
+
```ts title="app/app.config.ts"
|
|
115
|
+
import { scripts } from '../src/consent-scripts';
|
|
116
|
+
|
|
117
|
+
export default defineAppConfig({
|
|
118
|
+
c15t: { scripts },
|
|
119
|
+
});
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
The Nuxt module merges this over its options in `nuxt.config.ts` and starts
|
|
123
|
+
one script loader in the browser after hydration, once it has applied the
|
|
124
|
+
visitor's stored choice and privacy signals. Keep `scripts` out of
|
|
125
|
+
`nuxt.config.ts`, which reaches the browser as JSON and drops the vendor
|
|
126
|
+
callbacks. Write the vendor IDs into `consent-scripts.ts`. See
|
|
127
|
+
[Nuxt scripts and embeds](https://c15t.com/docs/frameworks/nuxt/scripts).
|
|
128
|
+
|
|
129
|
+
**Vue**
|
|
130
|
+
|
|
131
|
+
Pass the scripts to the existing `c15tVue` plugin call in `src/main.ts`:
|
|
132
|
+
|
|
133
|
+
```ts title="src/main.ts"
|
|
134
|
+
import { c15tVue, manifest } from 'c15t/vue/vue-plugin';
|
|
135
|
+
import { scripts } from './consent-scripts';
|
|
136
|
+
|
|
137
|
+
app.use(c15tVue, {
|
|
138
|
+
mode: manifest(),
|
|
139
|
+
scripts,
|
|
140
|
+
});
|
|
141
|
+
```
|
|
142
|
+
|
|
143
|
+
Keep your existing `mode` and other options. The plugin starts one
|
|
144
|
+
script loader when the app mounts, after it has applied the visitor's stored
|
|
145
|
+
choice. Do not also call `createScriptLoader` from a component. See
|
|
146
|
+
[Vue scripts and embeds](https://c15t.com/docs/frameworks/vue/scripts).
|
|
147
|
+
|
|
148
|
+
**Astro**
|
|
149
|
+
|
|
150
|
+
Add the scripts to the client entrypoint from the
|
|
151
|
+
[Astro quickstart](https://c15t.com/docs/frameworks/astro/quickstart), `src/c15t.client.ts`,
|
|
152
|
+
which the integration finds on its own. Keep `astro.config.mjs` as it is.
|
|
153
|
+
If the module already exports scripts, combine the two arrays.
|
|
154
|
+
|
|
155
|
+
```ts title="src/c15t.client.ts"
|
|
156
|
+
import type { C15tClientOptionsExtension } from 'c15t/astro';
|
|
157
|
+
import { scripts } from './consent-scripts';
|
|
158
|
+
|
|
159
|
+
export default { scripts } satisfies C15tClientOptionsExtension;
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
Vendor helpers contain callbacks, and the integration options in
|
|
163
|
+
`astro.config.mjs` are serialized into the page, so do not put helpers in
|
|
164
|
+
the integration's `scripts` option. The integration passes the client
|
|
165
|
+
entrypoint to the one runtime every page shares, including across
|
|
166
|
+
`ClientRouter` navigation.
|
|
167
|
+
|
|
168
|
+
**Svelte**
|
|
169
|
+
|
|
170
|
+
Import the scripts in the component that owns your existing provider and
|
|
171
|
+
pass them as a top-level prop:
|
|
172
|
+
|
|
173
|
+
```svelte title="src/App.svelte"
|
|
174
|
+
<script lang="ts">
|
|
175
|
+
import { ConsentProvider, manifest } from 'c15t/svelte';
|
|
176
|
+
import { scripts } from './consent-scripts';
|
|
177
|
+
</script>
|
|
178
|
+
|
|
179
|
+
<ConsentProvider mode={manifest()} {scripts}>
|
|
180
|
+
<!-- Keep your application, consent UI and preferences link here. -->
|
|
181
|
+
</ConsentProvider>
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
Retain the styles and consent UI from the [Svelte quickstart](https://c15t.com/docs/frameworks/svelte/quickstart).
|
|
185
|
+
The provider owns the loader and disposes it on unmount.
|
|
186
|
+
|
|
187
|
+
**SvelteKit**
|
|
188
|
+
|
|
189
|
+
Add the scripts to the existing `ConsentRoot` in the root layout. Keep the
|
|
190
|
+
handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs/frameworks/sveltekit/quickstart).
|
|
191
|
+
|
|
192
|
+
```svelte title="src/routes/+layout.svelte"
|
|
193
|
+
<script lang="ts">
|
|
194
|
+
import { ConsentRoot } from 'c15t/svelte';
|
|
195
|
+
import { scripts } from '../consent-scripts';
|
|
196
|
+
|
|
197
|
+
let { children, data } = $props();
|
|
198
|
+
</script>
|
|
199
|
+
|
|
200
|
+
<ConsentRoot state={data.consent} {scripts}>
|
|
201
|
+
{@render children()}
|
|
202
|
+
<!-- Keep your consent UI and preferences link here. -->
|
|
203
|
+
</ConsentRoot>
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
Import vendor helpers in the layout component, not in `+layout.server.ts`:
|
|
207
|
+
a server load cannot send functions to the browser. Prerendered, static and
|
|
208
|
+
SPA-mode pages use the same `scripts` prop. If you pass an externally owned
|
|
209
|
+
`runtime` to the provider, register scripts when creating that runtime instead.
|
|
210
|
+
|
|
211
|
+
**HTML**
|
|
212
|
+
|
|
213
|
+
The helpers in `@c15t/integrations` are ES modules that need a bundler. On a
|
|
214
|
+
page that loads the c15t script tag, paste the vendor's own snippet instead
|
|
215
|
+
and keep it inert until its category is allowed:
|
|
216
|
+
|
|
217
|
+
```html
|
|
218
|
+
<script type="text/plain" data-c15t-category="measurement">
|
|
219
|
+
// The vendor's snippet, unchanged
|
|
220
|
+
</script>
|
|
221
|
+
```
|
|
222
|
+
|
|
223
|
+
Use the category this guide names for the vendor. c15t runs the snippet
|
|
224
|
+
once that category is allowed, and reloads the page when the visitor
|
|
225
|
+
withdraws it. Helper options on this page, such as `loadMode`, do not apply
|
|
226
|
+
to a pasted snippet. See [HTML scripts](https://c15t.com/docs/frameworks/html/scripts).
|
|
227
|
+
|
|
228
|
+
**JavaScript**
|
|
229
|
+
|
|
230
|
+
Pass the scripts to `init()` from `@c15t/browser`, next to your mode:
|
|
231
|
+
|
|
232
|
+
```ts
|
|
233
|
+
import { init, manifest } from '@c15t/browser';
|
|
234
|
+
import { scripts } from './consent-scripts';
|
|
235
|
+
|
|
236
|
+
const consent = init({
|
|
237
|
+
mode: manifest(),
|
|
238
|
+
scripts,
|
|
239
|
+
});
|
|
240
|
+
```
|
|
241
|
+
|
|
242
|
+
Keep the mode from your quickstart. With
|
|
243
|
+
`createConsentRuntime` from `c15t/runtime`, pass `scripts` to it instead.
|
|
244
|
+
A kernel you create yourself needs a loader from
|
|
245
|
+
`c15t/modules/script-loader`. Attach one loader per kernel. See
|
|
246
|
+
[JavaScript scripts](https://c15t.com/docs/frameworks/javascript/scripts).
|
|
247
|
+
|
|
248
|
+
## Options
|
|
249
|
+
|
|
250
|
+
| Option | Default | Behavior |
|
|
251
|
+
| ---------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
252
|
+
| `key` | Required | Public Messaging widget key. Trimmed and URL-encoded. If it's missing or blank, c15t logs `zendeskWidget: missing or invalid key` and never loads the widget. |
|
|
253
|
+
| `category` | `functionality` | c15t consent category or condition needed to load the widget. Measurement consent still controls analytics storage. |
|
|
254
|
+
|
|
255
|
+
## Loading and revocation
|
|
256
|
+
|
|
257
|
+
When the consent condition passes, the helper creates Zendesk's `zE` command
|
|
258
|
+
queue (also exposed as `zEmbed`) and loads
|
|
259
|
+
`https://static.zdassets.com/ekr/snippet.js?key=<key>`. Before the loader runs,
|
|
260
|
+
and again on each consent change, it queues
|
|
261
|
+
`zE('messenger:set', 'cookies', range)`:
|
|
262
|
+
|
|
263
|
+
| Mapped consent | Measurement consent | Zendesk range |
|
|
264
|
+
| -------------------- | ------------------- | ------------- |
|
|
265
|
+
| Granted | Granted | `all` |
|
|
266
|
+
| Granted | Denied | `functional` |
|
|
267
|
+
| Denied after loading | Either | `none` |
|
|
268
|
+
|
|
269
|
+
With `functional`, Zendesk turns off the analytics behind Pages viewed and
|
|
270
|
+
Proactive messages analytics. With `none`, Zendesk hides the widget and deletes
|
|
271
|
+
its local and session storage. These effects come from Zendesk's
|
|
272
|
+
[Set cookies API](https://developer.zendesk.com/api-reference/widget-messaging/web/core/#set-cookies).
|
|
273
|
+
Turning off the visitor's Zendesk vendor switch counts as denied, so it also
|
|
274
|
+
sends `none`.
|
|
275
|
+
|
|
276
|
+
c15t removes the loader on revocation. The `none` call doesn't unload the SDK or
|
|
277
|
+
stop every request in progress. Keep `reloadOnConsentRevoked` enabled to stop
|
|
278
|
+
code already running on the page. If the visitor grants consent again before
|
|
279
|
+
the reload, c15t inserts a new loader and the helper sends the current range.
|
|
280
|
+
|
|
281
|
+
### Several helpers and one widget key
|
|
282
|
+
|
|
283
|
+
Helper calls with the same key and consent condition share one script. If you
|
|
284
|
+
recreate the helper on each render, its loader and consent updates stay active.
|
|
285
|
+
If several registrations share that configuration, the widget stays available
|
|
286
|
+
while any of them has consent. `all` needs measurement consent from every
|
|
287
|
+
granted registration.
|
|
288
|
+
|
|
289
|
+
Use one widget key per page. Zendesk exposes a single global `zE` API, so two
|
|
290
|
+
widgets on the same page control each other. Different keys get separate
|
|
291
|
+
loaders, but that doesn't separate Zendesk's global API.
|
|
292
|
+
|
|
293
|
+
### Removing the helper
|
|
294
|
+
|
|
295
|
+
Removing the helper from your configuration, or unmounting its provider,
|
|
296
|
+
releases that registration. When the last registration goes, c15t removes the
|
|
297
|
+
loader but keeps the conversation and storage. It doesn't send `none` or unload
|
|
298
|
+
code that already ran, and later consent changes no longer reach the widget.
|
|
299
|
+
Revoke consent first, or reload the page, when you need the widget stopped and
|
|
300
|
+
its storage cleared.
|
|
301
|
+
|
|
302
|
+
## Cookies and storage
|
|
303
|
+
|
|
304
|
+
Zendesk's [in-product cookie policy](https://support.zendesk.com/hc/en-us/articles/4408824378650-Zendesk-In-Product-Cookie-Policy)
|
|
305
|
+
lists these entries for the Web Widget. Check your own widget configuration for
|
|
306
|
+
other product storage.
|
|
307
|
+
|
|
308
|
+
| Name | Zendesk category | Lifetime |
|
|
309
|
+
| ------------------------------------------------------------------------------------------ | ---------------- | --------------------------------------------------------- |
|
|
310
|
+
| `<integrationId>.appUserId`, `<integrationId>.clientId`, `<integrationId>.sessionToken` | Essential | Local or session storage, subject to the browser's policy |
|
|
311
|
+
| `ZD-suid` | Analytics | 20 minutes |
|
|
312
|
+
| `ZD-buid` | Analytics | Forever |
|
|
313
|
+
| `ZD-widgetOpen`, `ZD-launcherLabelRemoved` | Functionality | Forever |
|
|
314
|
+
| `ZD-soundNotificationDisabledKey`, `ZD-campaigns`, `<integrationId>.conversationStartedAt` | Functionality | Subject to the browser's policy |
|
|
315
|
+
|
|
316
|
+
## Verify Zendesk Messaging
|
|
317
|
+
|
|
318
|
+
Filter Network by `zdassets.com` and your Zendesk subdomain. Before consent,
|
|
319
|
+
no Zendesk loader request appears and `window.zE` is undefined, as long as you
|
|
320
|
+
removed other Zendesk installations.
|
|
321
|
+
|
|
322
|
+
Grant functionality without measurement and check that the widget's analytics
|
|
323
|
+
storage stays off. Grant measurement while the widget is open, then withdraw
|
|
324
|
+
it, and check that the widget stays available with analytics off.
|
|
325
|
+
|
|
326
|
+
Revoke functionality and check that Zendesk hides the widget. After c15t
|
|
327
|
+
reloads, the loader stays absent. A successful response for `snippet.js` alone
|
|
328
|
+
doesn't prove your widget key or Messaging setup works. Open a conversation in
|
|
329
|
+
your widget to check that.
|
|
330
|
+
|
|
331
|
+
Sources: [install and show the Web Widget](https://developer.zendesk.com/documentation/zendesk-web-widget-sdks/sdks/web/messaging-show-web-widget/),
|
|
332
|
+
[Messaging core API](https://developer.zendesk.com/api-reference/widget-messaging/web/core/),
|
|
333
|
+
and [Zendesk privacy notice](https://www.zendesk.com/company/agreements-and-terms/privacy-notice/).
|
|
334
|
+
|
|
335
|
+
Test in a private window with an opt-in policy. Open DevTools Network, disable
|
|
336
|
+
the cache and filter by the vendor's domain:
|
|
337
|
+
|
|
338
|
+
1. Load the page. No request goes to the vendor before you choose.
|
|
339
|
+
2. Click Reject, then reload. There is still no vendor request.
|
|
340
|
+
3. Open Privacy settings and allow the helper's category. The vendor script
|
|
341
|
+
loads without a page reload.
|
|
342
|
+
4. Turn the category off again and save. c15t reloads the page, and the new
|
|
343
|
+
page makes no vendor request.
|
|
344
|
+
|
|
345
|
+
c15t reloads on revocation because removing a script element does not stop
|
|
346
|
+
code that already ran. The vendor's listeners, timers and queued events stay
|
|
347
|
+
alive until the page unloads. If you set `reloadOnConsentRevoked: false`, stop
|
|
348
|
+
the vendor yourself. Register a callback-only script whose `onConsentChange`
|
|
349
|
+
calls the vendor's opt-out API, as shown in
|
|
350
|
+
[custom integrations](./building-integrations.md), and check the
|
|
351
|
+
permission before each of your own event calls. The reload does not delete
|
|
352
|
+
cookies the vendor already set; see
|
|
353
|
+
[clear on revocation for your framework](./overview.md#vendor-switches-and-cookie-cleanup).
|
|
354
|
+
|
|
355
|
+
The helper lists its vendor by name in the preference dialog, so a visitor can
|
|
356
|
+
turn it off inside an allowed category. See
|
|
357
|
+
[vendor consent for your framework](./overview.md#vendor-switches-and-cookie-cleanup). The
|
|
358
|
+
[consent verification guide](../guides/verify-consent.md) covers navigation,
|
|
359
|
+
expiry and hosting checks.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@c15t/react",
|
|
3
|
-
"version": "3.2.0
|
|
3
|
+
"version": "3.2.0",
|
|
4
4
|
"description": "React cookie consent banner and React consent dialog for c15t, plus a React cookie banner, preference center and headless hooks.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"cmp",
|
|
@@ -247,16 +247,16 @@
|
|
|
247
247
|
"test:watch": "bun prebuild && vitest"
|
|
248
248
|
},
|
|
249
249
|
"dependencies": {
|
|
250
|
-
"@c15t/core": "3.2.0
|
|
251
|
-
"@c15t/dev-tools": "3.2.0
|
|
252
|
-
"@c15t/iab": "3.2.0
|
|
253
|
-
"@c15t/schema": "3.1.1
|
|
254
|
-
"@c15t/translations": "3.2.0
|
|
255
|
-
"@c15t/ui": "3.
|
|
250
|
+
"@c15t/core": "3.2.0",
|
|
251
|
+
"@c15t/dev-tools": "3.2.0",
|
|
252
|
+
"@c15t/iab": "3.2.0",
|
|
253
|
+
"@c15t/schema": "3.1.1",
|
|
254
|
+
"@c15t/translations": "3.2.0",
|
|
255
|
+
"@c15t/ui": "3.1.0",
|
|
256
256
|
"@types/google.maps": "3.65.3"
|
|
257
257
|
},
|
|
258
258
|
"devDependencies": {
|
|
259
|
-
"@c15t/backend": "3.2.0
|
|
259
|
+
"@c15t/backend": "3.2.0",
|
|
260
260
|
"@c15t/conformance": "0.0.1",
|
|
261
261
|
"@c15t/typescript-config": "0.0.1",
|
|
262
262
|
"@c15t/vitest-config": "1.0.0",
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Other ads and pixels
|
|
3
|
-
description: Consent-gated helpers for ad platforms and conversion pixels that
|
|
4
|
-
don't need a full guide.
|
|
5
|
-
icon: radar
|
|
6
|
-
group: integrations
|
|
7
|
-
---
|
|
8
|
-
|
|
9
|
-
Each helper below loads its vendor only after the visitor allows the listed consent category. For setup, see [Integrations overview](./overview.md).
|
|
10
|
-
|
|
11
|
-
## AdRoll
|
|
12
|
-
|
|
13
|
-
AdRoll retargets site visitors with ads and measures conversions. The helper sends the first `pageView` for you. Waits for `marketing` consent.
|
|
14
|
-
|
|
15
|
-
```ts title="src/consent-scripts.ts"
|
|
16
|
-
import { adrollPixel } from '@c15t/integrations/adroll';
|
|
17
|
-
|
|
18
|
-
export const scripts = [
|
|
19
|
-
adrollPixel({ advertiserId: 'ADVERTISER_ID', pixelId: 'PIXEL_ID' }),
|
|
20
|
-
];
|
|
21
|
-
```
|
|
22
|
-
|
|
23
|
-
| Option | Type | Required | Description |
|
|
24
|
-
| -------------- | -------- | -------- | ----------------------------------------------------------------------------- |
|
|
25
|
-
| `advertiserId` | `string` | Yes | Advertiser ID from Analytics > Insights > Website > View Pixel. |
|
|
26
|
-
| `pixelId` | `string` | Yes | Pixel ID from the same snippet. |
|
|
27
|
-
| `scriptUrl` | `string` | No | Loader URL. Defaults to `https://s.adroll.com/j/<advertiserId>/roundtrip.js`. |
|
|
28
|
-
|
|
29
|
-
**When consent is withdrawn:** AdRoll has no API to stop it, so the helper leaves it on the page. Keep c15t's default `reloadOnConsentRevoked` so the page reload removes it.
|
|
30
|
-
|
|
31
|
-
* In AdRoll, set Settings > Data Collection > Visitor Consent to **Use your existing Consent Banner**. Otherwise AdRoll can load its own banner.
|
|
32
|
-
|
|
33
|
-
## LiveIntent
|
|
34
|
-
|
|
35
|
-
LiveIntent's LiveConnect tag identifies visitors for people-based ad targeting and measurement. Waits for `marketing` consent.
|
|
36
|
-
|
|
37
|
-
```ts title="src/consent-scripts.ts"
|
|
38
|
-
import { liveIntentTag } from '@c15t/integrations/liveintent';
|
|
39
|
-
|
|
40
|
-
export const scripts = [liveIntentTag({ tagId: 'YOUR_TAG_ID' })];
|
|
41
|
-
```
|
|
42
|
-
|
|
43
|
-
| Option | Type | Required | Description |
|
|
44
|
-
| ----------- | ------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
45
|
-
| `tagId` | `string` | Yes | Tag filename from your LiveConnect base tag, without `.min.js`. |
|
|
46
|
-
| `events` | `LiveIntentEvent[]` | No | Event objects queued once on the first grant, such as `{ event: 'conversion', name: 'purchase' }`. Use the fields from your account's event tags. |
|
|
47
|
-
| `scriptUrl` | `string` | No | Loader URL. Defaults to `https://b-code.liadm.com/<tagId>.min.js`. |
|
|
48
|
-
|
|
49
|
-
**When consent is withdrawn:** LiveConnect has no API to stop it, so the helper leaves it on the page. Keep c15t's default `reloadOnConsentRevoked` so the page reload removes it.
|
|
50
|
-
|
|
51
|
-
* Don't test with the public `a-00xx` tag from LiveIntent's examples. It's live production code, not a sandbox.
|
|
52
|
-
* Where GDPR applies, LiveIntent also reads the TCF string. LiveIntent's guide lists purposes 1 to 4, but the served bundle asks for more. Confirm your account's requirements with LiveIntent.
|
|
53
|
-
|
|
54
|
-
## The Trade Desk
|
|
55
|
-
|
|
56
|
-
The Trade Desk Universal Pixel records conversions and builds ad audiences. Waits for `marketing` consent.
|
|
57
|
-
|
|
58
|
-
```ts title="src/consent-scripts.ts"
|
|
59
|
-
import { theTradeDeskPixel } from '@c15t/integrations/the-trade-desk';
|
|
60
|
-
|
|
61
|
-
export const scripts = [
|
|
62
|
-
theTradeDeskPixel({ advertiserId: 'ADVERTISER_ID', pixelIds: ['PIXEL_ID'] }),
|
|
63
|
-
];
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
| Option | Type | Required | Description |
|
|
67
|
-
| ---------------------- | ---------------------------------------- | -------- | ------------------------------------------------------------------------------------------------------- |
|
|
68
|
-
| `advertiserId` | `string` | Yes | Advertiser ID from your Universal Pixel snippet. |
|
|
69
|
-
| `pixelIds` | `string[]` | Yes | One or more Universal Pixel IDs. A blank entry skips the helper. |
|
|
70
|
-
| `enableCookieSyncing` | `boolean` | No | Set `false` to turn off cookie syncing. Unset uses the vendor default. |
|
|
71
|
-
| `dataProcessingOption` | `{ policies: string[]; region: string }` | No | Limited data use setting, such as `{ policies: ['LDU'], region: 'US-CO' }`. It doesn't replace consent. |
|
|
72
|
-
| `scriptUrl` | `string` | No | Loader URL. Defaults to `https://js.adsrvr.org/up_loader.3.0.0.js`. |
|
|
73
|
-
|
|
74
|
-
**When consent is withdrawn:** The Trade Desk has no API to stop its SDK, so the helper leaves it on the page. Keep c15t's default `reloadOnConsentRevoked` so the page reload removes it.
|
|
75
|
-
|
|
76
|
-
* Walmart DSP accounts use a different loader. Set `scriptUrl` to `https://azjs.adsrvr.org/thetradedesk-ads/up_loader.3.0.0.js`.
|
|
77
|
-
* `enableCookieSyncing: false` doesn't stop all cookies. The Trade Desk still sets its `TDID` cookie on `adsrvr.org`.
|
|
78
|
-
|
|
79
|
-
## Vector
|
|
80
|
-
|
|
81
|
-
Vector identifies the people and companies visiting your site and builds advertising audiences from their activity. Waits for `marketing` consent.
|
|
82
|
-
|
|
83
|
-
```ts title="src/consent-scripts.ts"
|
|
84
|
-
import { vector } from '@c15t/integrations/vector';
|
|
85
|
-
|
|
86
|
-
export const scripts = [vector({ pixelId: 'YOUR_PIXEL_ID' })];
|
|
87
|
-
```
|
|
88
|
-
|
|
89
|
-
| Option | Type | Required | Description |
|
|
90
|
-
| ----------- | -------- | -------- | ------------------------------------------------------------- |
|
|
91
|
-
| `pixelId` | `string` | Yes | Pixel ID from **Settings > Pixel** in Vector. |
|
|
92
|
-
| `scriptUrl` | `string` | No | Custom SDK URL. Defaults to `https://cdn.vector.co/pixel.js`. |
|
|
93
|
-
|
|
94
|
-
**When consent is withdrawn:** Vector has no stop API, so c15t reloads the page to stop it. Keep `reloadOnConsentRevoked` on.
|
|
@@ -1,108 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Other analytics tools
|
|
3
|
-
description: Consent-gated helpers for analytics tools that don't need a full guide.
|
|
4
|
-
icon: chart-line
|
|
5
|
-
group: integrations
|
|
6
|
-
---
|
|
7
|
-
|
|
8
|
-
Each helper below loads its vendor only after the visitor allows the listed consent category. For setup, see [Integrations overview](./overview.md).
|
|
9
|
-
|
|
10
|
-
## Lucky Orange
|
|
11
|
-
|
|
12
|
-
Lucky Orange records sessions and builds heatmaps. Waits for `measurement` consent by default.
|
|
13
|
-
|
|
14
|
-
```ts title="src/lucky-orange.ts"
|
|
15
|
-
import { luckyOrange } from '@c15t/integrations/lucky-orange';
|
|
16
|
-
|
|
17
|
-
export const scripts = [luckyOrange({ siteId: 'YOUR_SITE_ID' })];
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
| Option | Type | Required | Description |
|
|
21
|
-
| ----------- | ----------------- | -------- | ------------------------------------------------------------------------------------------------------ |
|
|
22
|
-
| `siteId` | `string` | Yes | Site ID from Lucky Orange. |
|
|
23
|
-
| `category` | Consent condition | No | Category or condition that must be allowed. Defaults to `'measurement'`. |
|
|
24
|
-
| `scriptUrl` | `string` | No | Custom or proxied loader URL. Defaults to `https://tools.luckyorange.com/core/lo.js?site-id=<siteId>`. |
|
|
25
|
-
|
|
26
|
-
**When consent is withdrawn:** the helper calls `LO.privacy.setConsentStatus(false)`. Recording code already on the page can't be unloaded, so keep c15t's default page reload.
|
|
27
|
-
|
|
28
|
-
* Turn on **Require Consent** in the Lucky Orange dashboard. The helper grants consent through Lucky Orange's privacy API after the visitor allows it.
|
|
29
|
-
* The helper doesn't call `optOut()`, because that writes an opt-out cookie that lasts two years and gets in the way if the visitor grants consent again.
|
|
30
|
-
* A proxy `scriptUrl` must keep `lo.js` in its path. Lucky Orange finds the site ID by looking for that file name.
|
|
31
|
-
|
|
32
|
-
## Pendo
|
|
33
|
-
|
|
34
|
-
Pendo records product usage and shows in-app guides. Waits for `measurement` consent by default.
|
|
35
|
-
|
|
36
|
-
```ts title="src/pendo.ts"
|
|
37
|
-
import { pendo } from '@c15t/integrations/pendo';
|
|
38
|
-
|
|
39
|
-
export const scripts = [pendo({ apiKey: 'YOUR_API_KEY' })];
|
|
40
|
-
```
|
|
41
|
-
|
|
42
|
-
| Option | Type | Required | Description |
|
|
43
|
-
| ------------------- | ------------------------- | -------- | ----------------------------------------------------------------------------------------------- |
|
|
44
|
-
| `apiKey` | `string` | Yes | Web agent API key from Pendo. |
|
|
45
|
-
| `visitor` | `Record<string, unknown>` | No | Visitor metadata passed to `pendo.initialize()`. |
|
|
46
|
-
| `account` | `Record<string, unknown>` | No | Account metadata passed to `pendo.initialize()`. |
|
|
47
|
-
| `initializeOptions` | `Record<string, unknown>` | No | Other `initialize()` options, such as `disableCookies` or `excludeAllText`. |
|
|
48
|
-
| `category` | Consent condition | No | Category or condition that must be allowed. Defaults to `'measurement'`. |
|
|
49
|
-
| `scriptUrl` | `string` | No | Custom or proxied agent URL. Defaults to `https://cdn.pendo.io/agent/static/<apiKey>/pendo.js`. |
|
|
50
|
-
|
|
51
|
-
**When consent is withdrawn:** the helper calls `pendo.stopSendingEvents()`. If consent comes back on the same page, it calls `startSendingEvents()` and keeps the same visitor identity. c15t still reloads the page by default; keep the reload if the next page must run without Pendo.
|
|
52
|
-
|
|
53
|
-
* The helper never calls `clearSession()`, because that starts a new anonymous visitor. If a visitor signs out while consent is granted, call `pendo.clearSession()` yourself before you identify the next visitor.
|
|
54
|
-
* Stopping events doesn't delete Pendo's cookies or local storage, and guides already on the page stay there.
|
|
55
|
-
|
|
56
|
-
## RB2B
|
|
57
|
-
|
|
58
|
-
RB2B identifies the companies and US visitors behind site traffic for sales outreach. Waits for `marketing` consent.
|
|
59
|
-
|
|
60
|
-
```ts title="src/consent-scripts.ts"
|
|
61
|
-
import { rb2b } from '@c15t/integrations/rb2b';
|
|
62
|
-
|
|
63
|
-
export const scripts = [rb2b({ accountKey: 'YOUR_RB2B_KEY' })];
|
|
64
|
-
```
|
|
65
|
-
|
|
66
|
-
| Option | Type | Required | Description |
|
|
67
|
-
| ------------ | -------- | -------- | ----------------------------------------------------------------------------------------------------------------------------- |
|
|
68
|
-
| `accountKey` | `string` | Yes | Account key from the `reb2b.load` call on RB2B's Script Setup page. |
|
|
69
|
-
| `scriptUrl` | `string` | No | Loader URL from your dashboard snippet. Defaults to `https://ddwl4m2hdecbv.cloudfront.net/b/<accountKey>/<accountKey>.js.gz`. |
|
|
70
|
-
|
|
71
|
-
**When consent is withdrawn:** RB2B has no stop API, so c15t reloads the page to stop it. Keep `reloadOnConsentRevoked` on.
|
|
72
|
-
|
|
73
|
-
* Authorize your domain first: in RB2B, open **Script**, choose **Add a Domain** and save it. RB2B's script doesn't run on domains you haven't added.
|
|
74
|
-
* `scriptUrl` must stay on RB2B's CloudFront or S3 hosts, under `/b/<accountKey>/`. RB2B checks the script's own URL, so a proxy fails, and the helper logs an error and skips loading for other URLs.
|
|
75
|
-
* RB2B runs once per page load, not on client-side route changes. To count a new page view, use full-page navigation, such as a plain `<a href>`.
|
|
76
|
-
|
|
77
|
-
## Statable
|
|
78
|
-
|
|
79
|
-
Statable is cookieless web analytics. Waits for `measurement` consent.
|
|
80
|
-
|
|
81
|
-
```ts title="src/consent-scripts.ts"
|
|
82
|
-
import { statableAnalytics } from '@c15t/integrations/statable-analytics';
|
|
83
|
-
|
|
84
|
-
export const scripts = [statableAnalytics({ siteId: '12345' })];
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
| Option | Type | Required | Description |
|
|
88
|
-
| ------------- | -------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------- |
|
|
89
|
-
| `siteId` | `string` or `number` | Yes | Numeric site ID from **Site settings > Tracking Code** in Statable. |
|
|
90
|
-
| `scriptUrl` | `string` | No | Loader URL for your own CDN. Each `{siteId}` is replaced with the ID. Defaults to `https://statable.com/js/{siteId}/s.js`. |
|
|
91
|
-
| `trackingApi` | `string` | No | Full ingestion endpoint. Defaults to the loader origin plus `/api/event`. |
|
|
92
|
-
|
|
93
|
-
**When consent is withdrawn:** Statable has no stop API, so c15t reloads the page to stop the tracker. Keep `reloadOnConsentRevoked` on.
|
|
94
|
-
|
|
95
|
-
* The `/js/<siteId>/s.js` loader is only on Statable's paid plans. The Hobby plan uses a widget with a different loader, which this helper doesn't support.
|
|
96
|
-
* If your CDN serves the loader but doesn't serve or proxy `/api/event`, set `trackingApi` to the full ingestion URL:
|
|
97
|
-
|
|
98
|
-
```ts title="src/consent-scripts.ts"
|
|
99
|
-
import { statableAnalytics } from '@c15t/integrations/statable-analytics';
|
|
100
|
-
|
|
101
|
-
export const scripts = [
|
|
102
|
-
statableAnalytics({
|
|
103
|
-
scriptUrl: 'https://cdn.example.com/js/{siteId}/s.js',
|
|
104
|
-
siteId: '12345',
|
|
105
|
-
trackingApi: 'https://analytics.example.com/api/event',
|
|
106
|
-
}),
|
|
107
|
-
];
|
|
108
|
-
```
|