@c15t/react 3.2.0-canary.0 → 3.2.1
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 +33 -10
- package/README.md +5 -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 +33 -10
- package/docs/concepts/choose-your-setup.md +8 -9
- 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 +3 -3
- 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 +139 -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,327 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: LiveIntent
|
|
3
|
+
description: Load LiveIntent with c15t after marketing consent and verify its
|
|
4
|
+
loader, storage and revocation behavior.
|
|
5
|
+
seoTitle: LiveIntent consent with c15t
|
|
6
|
+
seoDescription: Load LiveIntent's LiveConnect tag only after marketing consent.
|
|
7
|
+
Learn what liveIntentTag queues, which storage it sets and how to verify it.
|
|
8
|
+
icon: radar
|
|
9
|
+
group: integrations
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
LiveIntent's LiveConnect tag identifies visitors for people-based ad targeting
|
|
13
|
+
and measurement. The c15t `liveIntentTag` helper waits until the `marketing`
|
|
14
|
+
category is allowed before it creates the `liQ` queue and adds your account's
|
|
15
|
+
tag.
|
|
16
|
+
|
|
17
|
+
LiveConnect has no API to stop it. When the visitor withdraws, the helper
|
|
18
|
+
leaves the tag on the page, and c15t's default page reload removes it.
|
|
19
|
+
|
|
20
|
+
## Configure LiveIntent
|
|
21
|
+
|
|
22
|
+
Copy the tag ID from your account's LiveConnect base tag. Use the filename
|
|
23
|
+
without `.min.js`. Don't test with the public `a-00xx` tag from LiveIntent's
|
|
24
|
+
examples. It's live production code, not a sandbox or a default for your
|
|
25
|
+
account. Then delete the direct base tag and any tag manager copy, so they
|
|
26
|
+
can't load LiveConnect without consent.
|
|
27
|
+
|
|
28
|
+
| Package manager | Command |
|
|
29
|
+
| :-------------- | :------------------------------- |
|
|
30
|
+
| npm | `npm install @c15t/integrations` |
|
|
31
|
+
| pnpm | `pnpm add @c15t/integrations` |
|
|
32
|
+
| yarn | `yarn add @c15t/integrations` |
|
|
33
|
+
| bun | `bun add @c15t/integrations` |
|
|
34
|
+
|
|
35
|
+
```ts title="src/consent-scripts.ts"
|
|
36
|
+
import { liveIntentTag } from '@c15t/integrations/liveintent';
|
|
37
|
+
|
|
38
|
+
export const scripts = [liveIntentTag({ tagId: 'YOUR_TAG_ID' })];
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
## Register the scripts
|
|
42
|
+
|
|
43
|
+
Complete your [framework quickstart](https://c15t.com/docs/frameworks) first. Keep its Inth
|
|
44
|
+
endpoint, policy, styles and consent UI. Remove the vendor's original script,
|
|
45
|
+
SDK initializer or tag-manager entry, so the vendor loads only through c15t.
|
|
46
|
+
|
|
47
|
+
The vendor pages put the helper in `src/consent-scripts.ts`. If your framework
|
|
48
|
+
quickstart already has a `scripts` array, such as the one in `c15t.config.ts`
|
|
49
|
+
in the Next.js guide, add the helper to that array instead of creating a
|
|
50
|
+
second file.
|
|
51
|
+
The `scripts` export is a configuration, not an initializer. Add it to the c15t provider you already have, at the registration
|
|
52
|
+
point for your framework below. These are edits to that provider, not a second
|
|
53
|
+
provider.
|
|
54
|
+
|
|
55
|
+
**Next.js**
|
|
56
|
+
|
|
57
|
+
Add the configuration to `scripts` in `c15t.config.ts`, next to
|
|
58
|
+
`next.config.ts`:
|
|
59
|
+
|
|
60
|
+
```ts title="c15t.config.ts"
|
|
61
|
+
import { defineConsentConfig } from 'c15t/next';
|
|
62
|
+
import { scripts } from './src/consent-scripts';
|
|
63
|
+
|
|
64
|
+
export default defineConsentConfig({ scripts });
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
Keep the rest of your config, such as `mode` and `routePrefix`, in the
|
|
68
|
+
same call. `ConsentRoot` reads the config in the browser, so the layout
|
|
69
|
+
keeps passing only `state`. App Router, Pages Router and static export all
|
|
70
|
+
read the same file. See
|
|
71
|
+
[Next.js scripts and embeds](https://c15t.com/docs/frameworks/next/scripts).
|
|
72
|
+
|
|
73
|
+
**TanStack Start**
|
|
74
|
+
|
|
75
|
+
Import the configuration into your root route and pass it to the existing
|
|
76
|
+
`ConsentRoot` as a top-level prop. Keep the loader from the
|
|
77
|
+
[TanStack Start quickstart](https://c15t.com/docs/frameworks/tanstack-start/quickstart):
|
|
78
|
+
|
|
79
|
+
```tsx title="src/routes/__root.tsx"
|
|
80
|
+
import { scripts } from '../consent-scripts';
|
|
81
|
+
|
|
82
|
+
<ConsentRoot state={consent} scripts={scripts}>
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
Import vendor helpers in the root route module, not in a server function.
|
|
86
|
+
A server function's return value must be serializable, and script
|
|
87
|
+
configurations carry callbacks. See
|
|
88
|
+
[TanStack Start scripts](https://c15t.com/docs/frameworks/tanstack-start/scripts).
|
|
89
|
+
|
|
90
|
+
**React**
|
|
91
|
+
|
|
92
|
+
Add the configuration to the existing `ConsentProvider` options, next to
|
|
93
|
+
`mode`:
|
|
94
|
+
|
|
95
|
+
```tsx title="src/consent.tsx"
|
|
96
|
+
import { scripts } from './consent-scripts';
|
|
97
|
+
|
|
98
|
+
<ConsentProvider options={{ mode, scripts }}>
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
`mode` is the `manifest()` value from the
|
|
102
|
+
[React quickstart](../frameworks/react/quickstart.md). Keep the banner,
|
|
103
|
+
dialog and preferences link inside the provider. See
|
|
104
|
+
[React scripts and embeds](../frameworks/react/scripts.md).
|
|
105
|
+
|
|
106
|
+
**Nuxt**
|
|
107
|
+
|
|
108
|
+
Register the scripts under the `c15t` key in `app/app.config.ts`. Adjust the
|
|
109
|
+
relative import to where you created `consent-scripts.ts`:
|
|
110
|
+
|
|
111
|
+
```ts title="app/app.config.ts"
|
|
112
|
+
import { scripts } from '../src/consent-scripts';
|
|
113
|
+
|
|
114
|
+
export default defineAppConfig({
|
|
115
|
+
c15t: { scripts },
|
|
116
|
+
});
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
The Nuxt module merges this over its options in `nuxt.config.ts` and starts
|
|
120
|
+
one script loader in the browser after hydration, once it has applied the
|
|
121
|
+
visitor's stored choice and privacy signals. Keep `scripts` out of
|
|
122
|
+
`nuxt.config.ts`, which reaches the browser as JSON and drops the vendor
|
|
123
|
+
callbacks. Write the vendor IDs into `consent-scripts.ts`. See
|
|
124
|
+
[Nuxt scripts and embeds](https://c15t.com/docs/frameworks/nuxt/scripts).
|
|
125
|
+
|
|
126
|
+
**Vue**
|
|
127
|
+
|
|
128
|
+
Pass the scripts to the existing `c15tVue` plugin call in `src/main.ts`:
|
|
129
|
+
|
|
130
|
+
```ts title="src/main.ts"
|
|
131
|
+
import { c15tVue, manifest } from 'c15t/vue/vue-plugin';
|
|
132
|
+
import { scripts } from './consent-scripts';
|
|
133
|
+
|
|
134
|
+
app.use(c15tVue, {
|
|
135
|
+
mode: manifest(),
|
|
136
|
+
scripts,
|
|
137
|
+
});
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
Keep your existing `mode` and other options. The plugin starts one
|
|
141
|
+
script loader when the app mounts, after it has applied the visitor's stored
|
|
142
|
+
choice. Do not also call `createScriptLoader` from a component. See
|
|
143
|
+
[Vue scripts and embeds](https://c15t.com/docs/frameworks/vue/scripts).
|
|
144
|
+
|
|
145
|
+
**Astro**
|
|
146
|
+
|
|
147
|
+
Add the scripts to the client entrypoint from the
|
|
148
|
+
[Astro quickstart](https://c15t.com/docs/frameworks/astro/quickstart), `src/c15t.client.ts`,
|
|
149
|
+
which the integration finds on its own. Keep `astro.config.mjs` as it is.
|
|
150
|
+
If the module already exports scripts, combine the two arrays.
|
|
151
|
+
|
|
152
|
+
```ts title="src/c15t.client.ts"
|
|
153
|
+
import type { C15tClientOptionsExtension } from 'c15t/astro';
|
|
154
|
+
import { scripts } from './consent-scripts';
|
|
155
|
+
|
|
156
|
+
export default { scripts } satisfies C15tClientOptionsExtension;
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
Vendor helpers contain callbacks, and the integration options in
|
|
160
|
+
`astro.config.mjs` are serialized into the page, so do not put helpers in
|
|
161
|
+
the integration's `scripts` option. The integration passes the client
|
|
162
|
+
entrypoint to the one runtime every page shares, including across
|
|
163
|
+
`ClientRouter` navigation.
|
|
164
|
+
|
|
165
|
+
**Svelte**
|
|
166
|
+
|
|
167
|
+
Import the scripts in the component that owns your existing provider and
|
|
168
|
+
pass them as a top-level prop:
|
|
169
|
+
|
|
170
|
+
```svelte title="src/App.svelte"
|
|
171
|
+
<script lang="ts">
|
|
172
|
+
import { ConsentProvider, manifest } from 'c15t/svelte';
|
|
173
|
+
import { scripts } from './consent-scripts';
|
|
174
|
+
</script>
|
|
175
|
+
|
|
176
|
+
<ConsentProvider mode={manifest()} {scripts}>
|
|
177
|
+
<!-- Keep your application, consent UI and preferences link here. -->
|
|
178
|
+
</ConsentProvider>
|
|
179
|
+
```
|
|
180
|
+
|
|
181
|
+
Retain the styles and consent UI from the [Svelte quickstart](https://c15t.com/docs/frameworks/svelte/quickstart).
|
|
182
|
+
The provider owns the loader and disposes it on unmount.
|
|
183
|
+
|
|
184
|
+
**SvelteKit**
|
|
185
|
+
|
|
186
|
+
Add the scripts to the existing `ConsentRoot` in the root layout. Keep the
|
|
187
|
+
handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs/frameworks/sveltekit/quickstart).
|
|
188
|
+
|
|
189
|
+
```svelte title="src/routes/+layout.svelte"
|
|
190
|
+
<script lang="ts">
|
|
191
|
+
import { ConsentRoot } from 'c15t/svelte';
|
|
192
|
+
import { scripts } from '../consent-scripts';
|
|
193
|
+
|
|
194
|
+
let { children, data } = $props();
|
|
195
|
+
</script>
|
|
196
|
+
|
|
197
|
+
<ConsentRoot state={data.consent} {scripts}>
|
|
198
|
+
{@render children()}
|
|
199
|
+
<!-- Keep your consent UI and preferences link here. -->
|
|
200
|
+
</ConsentRoot>
|
|
201
|
+
```
|
|
202
|
+
|
|
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
|
|
206
|
+
`runtime` to the provider, register scripts when creating that runtime instead.
|
|
207
|
+
|
|
208
|
+
**HTML**
|
|
209
|
+
|
|
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:
|
|
213
|
+
|
|
214
|
+
```html
|
|
215
|
+
<script type="text/plain" data-c15t-category="measurement">
|
|
216
|
+
// The vendor's snippet, unchanged
|
|
217
|
+
</script>
|
|
218
|
+
```
|
|
219
|
+
|
|
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](https://c15t.com/docs/frameworks/html/scripts).
|
|
224
|
+
|
|
225
|
+
**JavaScript**
|
|
226
|
+
|
|
227
|
+
Pass the scripts to `init()` from `@c15t/browser`, next to your mode:
|
|
228
|
+
|
|
229
|
+
```ts
|
|
230
|
+
import { init, manifest } from '@c15t/browser';
|
|
231
|
+
import { scripts } from './consent-scripts';
|
|
232
|
+
|
|
233
|
+
const consent = init({
|
|
234
|
+
mode: manifest(),
|
|
235
|
+
scripts,
|
|
236
|
+
});
|
|
237
|
+
```
|
|
238
|
+
|
|
239
|
+
Keep the mode from your quickstart. With
|
|
240
|
+
`createConsentRuntime` from `c15t/runtime`, pass `scripts` to it instead.
|
|
241
|
+
A kernel you create yourself needs a loader from
|
|
242
|
+
`c15t/modules/script-loader`. Attach one loader per kernel. See
|
|
243
|
+
[JavaScript scripts](https://c15t.com/docs/frameworks/javascript/scripts).
|
|
244
|
+
|
|
245
|
+
## Options
|
|
246
|
+
|
|
247
|
+
| Option | Default | Behavior |
|
|
248
|
+
| ----------- | ----------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
249
|
+
| `tagId` | Required | Public tag ID, trimmed and URL-encoded into the filename. If it's missing or blank, c15t logs an error and never loads the tag. |
|
|
250
|
+
| `events` | None | Plain event objects, such as `{ event: 'conversion', name: 'purchase' }`, queued once on the first grant. Use the fields from your account's event tags. Strings, including `{{...}}`, stay literal event data. |
|
|
251
|
+
| `scriptUrl` | `https://b-code.liadm.com/<tagId>.min.js` | Loader URL override. A blank value uses the default. |
|
|
252
|
+
|
|
253
|
+
## Loading and revocation
|
|
254
|
+
|
|
255
|
+
When `marketing` is allowed, the helper sets `window.liQ` to an empty array,
|
|
256
|
+
pushes any `events` onto it in order, then adds one async loader. If your page
|
|
257
|
+
already defines `liQ`, the helper keeps it and pushes the events onto it. Once
|
|
258
|
+
it loads, LiveConnect replaces the array with its own client.
|
|
259
|
+
|
|
260
|
+
For later events, call `window.liQ.push` with a plain event object, and only
|
|
261
|
+
while marketing and any vendor consent stay granted. A function queue or
|
|
262
|
+
method-and-arguments tuples don't match LiveConnect's event format.
|
|
263
|
+
|
|
264
|
+
Where GDPR applies, LiveIntent documents further TCF requirements, along with
|
|
265
|
+
GPP and legacy US privacy signals. c15t's marketing category doesn't replace a
|
|
266
|
+
TC string. Zeta's guide names purposes 1 to 4, but the public example bundle
|
|
267
|
+
served during testing required more purposes and special features. Confirm
|
|
268
|
+
your account's production tag and requirements with LiveIntent. Don't request
|
|
269
|
+
extra purposes just to satisfy the public example.
|
|
270
|
+
|
|
271
|
+
LiveIntent documents no stop or withdrawal command for the full runtime. On
|
|
272
|
+
withdrawal, the helper keeps the loader element and sends no withdrawal event.
|
|
273
|
+
Keep c15t's default `reloadOnConsentRevoked` enabled. With reload disabled,
|
|
274
|
+
existing clients, listeners and sync frames can keep running until the visitor
|
|
275
|
+
navigates. If the visitor grants consent again on the same page, the helper
|
|
276
|
+
reuses the loader and doesn't push `events` a second time.
|
|
277
|
+
|
|
278
|
+
## Cookies and storage
|
|
279
|
+
|
|
280
|
+
The served code writes the `_lc2_fpi`, `_lc2_fpi_js`, `_li_dcdm_c`, `_li_ss`
|
|
281
|
+
and `lidids.*` cookies, and `_li_duid` and `_li_ss` in local storage. Some
|
|
282
|
+
cookies request lifetimes up to 730 days, which browsers can shorten. Partner
|
|
283
|
+
and account settings can add storage.
|
|
284
|
+
|
|
285
|
+
For CSP, the main hosts are `b-code.liadm.com`, `idx.liadm.com`,
|
|
286
|
+
`rp.liadm.com`, `rpr.liadm.com` and `i.liadm.com`.
|
|
287
|
+
|
|
288
|
+
## Verify LiveIntent
|
|
289
|
+
|
|
290
|
+
In a fresh browser profile, deny consent and allow only an unrelated category.
|
|
291
|
+
Filter Network by `liadm.com` and confirm that no requests, globals, cookies,
|
|
292
|
+
local storage or session storage appear. Grant `marketing` and check the loader
|
|
293
|
+
URL against your account's base tag. Withdraw consent and confirm the page
|
|
294
|
+
reloads. LiveIntent must stay blocked on the new page. Check storage in
|
|
295
|
+
DevTools as well as Network.
|
|
296
|
+
|
|
297
|
+
Sources: [base tag guide](https://support.liveintent.com/liveconnect-implementation-guide/),
|
|
298
|
+
[Shopify tag example](https://support.liveintent.com/shopify-liveconnect-implementation/),
|
|
299
|
+
[event tags](https://support.liveintent.com/liveconnect-event-tags/),
|
|
300
|
+
[privacy requirements](https://knowledgebase.zetaglobal.com/gswz/privacy-with-liveintent)
|
|
301
|
+
and [services privacy policy](https://www.liveintent.com/privacy-policy/).
|
|
302
|
+
|
|
303
|
+
Test in a private window with an opt-in policy. Open DevTools Network, disable
|
|
304
|
+
the cache and filter by the vendor's domain:
|
|
305
|
+
|
|
306
|
+
1. Load the page. No request goes to the vendor before you choose.
|
|
307
|
+
2. Click Reject, then reload. There is still no vendor request.
|
|
308
|
+
3. Open Privacy settings and allow the helper's category. The vendor script
|
|
309
|
+
loads without a page reload.
|
|
310
|
+
4. Turn the category off again and save. c15t reloads the page, and the new
|
|
311
|
+
page makes no vendor request.
|
|
312
|
+
|
|
313
|
+
c15t reloads on revocation because removing a script element does not stop
|
|
314
|
+
code that already ran. The vendor's listeners, timers and queued events stay
|
|
315
|
+
alive until the page unloads. If you set `reloadOnConsentRevoked: false`, stop
|
|
316
|
+
the vendor yourself. Register a callback-only script whose `onConsentChange`
|
|
317
|
+
calls the vendor's opt-out API, as shown in
|
|
318
|
+
[custom integrations](./building-integrations.md), and check the
|
|
319
|
+
permission before each of your own event calls. The reload does not delete
|
|
320
|
+
cookies the vendor already set; see
|
|
321
|
+
[clear on revocation for your framework](./overview.md#vendor-switches-and-cookie-cleanup).
|
|
322
|
+
|
|
323
|
+
The helper lists its vendor by name in the preference dialog, so a visitor can
|
|
324
|
+
turn it off inside an allowed category. See
|
|
325
|
+
[vendor consent for your framework](./overview.md#vendor-switches-and-cookie-cleanup). The
|
|
326
|
+
[consent verification guide](../guides/verify-consent.md) covers navigation,
|
|
327
|
+
expiry and hosting checks.
|
|
@@ -0,0 +1,336 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Lucky Orange
|
|
3
|
+
description: Load Lucky Orange after measurement consent, configure its tracking
|
|
4
|
+
settings, and verify loading and withdrawal with c15t.
|
|
5
|
+
seoTitle: Lucky Orange cookie consent with c15t
|
|
6
|
+
seoDescription: Load Lucky Orange only after measurement consent. The c15t
|
|
7
|
+
luckyOrange helper sets its privacy consent status and turns it off on
|
|
8
|
+
withdrawal.
|
|
9
|
+
icon: chart-line
|
|
10
|
+
group: integrations
|
|
11
|
+
---
|
|
12
|
+
|
|
13
|
+
Lucky Orange records sessions and builds heatmaps. The c15t `luckyOrange`
|
|
14
|
+
helper waits until the `measurement` category is allowed before it creates the
|
|
15
|
+
`LOQ` queue and loads Lucky Orange. Once Lucky Orange's privacy module is
|
|
16
|
+
ready, the helper grants consent through `LO.privacy.setConsentStatus(true)`.
|
|
17
|
+
|
|
18
|
+
When the visitor withdraws, the helper calls `setConsentStatus(false)`.
|
|
19
|
+
Recording code already on the page can't be unloaded, so keep c15t's default
|
|
20
|
+
page reload.
|
|
21
|
+
|
|
22
|
+
## Configure Lucky Orange
|
|
23
|
+
|
|
24
|
+
In the Lucky Orange dashboard, turn on **Require Consent**. With it on, Lucky
|
|
25
|
+
Orange waits for the consent the helper grants through its privacy API. Copy
|
|
26
|
+
your site ID, then delete the original Lucky Orange snippet and any tag manager
|
|
27
|
+
copy, so Lucky Orange can't load outside c15t.
|
|
28
|
+
|
|
29
|
+
| Package manager | Command |
|
|
30
|
+
| :-------------- | :------------------------------- |
|
|
31
|
+
| npm | `npm install @c15t/integrations` |
|
|
32
|
+
| pnpm | `pnpm add @c15t/integrations` |
|
|
33
|
+
| yarn | `yarn add @c15t/integrations` |
|
|
34
|
+
| bun | `bun add @c15t/integrations` |
|
|
35
|
+
|
|
36
|
+
```ts title="src/consent-scripts.ts"
|
|
37
|
+
import { luckyOrange } from '@c15t/integrations/lucky-orange';
|
|
38
|
+
|
|
39
|
+
export const scripts = [luckyOrange({ siteId: 'YOUR_SITE_ID' })];
|
|
40
|
+
```
|
|
41
|
+
|
|
42
|
+
## Register the scripts
|
|
43
|
+
|
|
44
|
+
Complete your [framework quickstart](https://c15t.com/docs/frameworks) first. Keep its Inth
|
|
45
|
+
endpoint, policy, styles and consent UI. Remove the vendor's original script,
|
|
46
|
+
SDK initializer or tag-manager entry, so the vendor loads only through c15t.
|
|
47
|
+
|
|
48
|
+
The vendor pages put the helper in `src/consent-scripts.ts`. If your framework
|
|
49
|
+
quickstart already has a `scripts` array, such as the one in `c15t.config.ts`
|
|
50
|
+
in the Next.js guide, add the helper to that array instead of creating a
|
|
51
|
+
second file.
|
|
52
|
+
The `scripts` export is a configuration, not an initializer. Add it to the c15t provider you already have, at the registration
|
|
53
|
+
point for your framework below. These are edits to that provider, not a second
|
|
54
|
+
provider.
|
|
55
|
+
|
|
56
|
+
**Next.js**
|
|
57
|
+
|
|
58
|
+
Add the configuration to `scripts` in `c15t.config.ts`, next to
|
|
59
|
+
`next.config.ts`:
|
|
60
|
+
|
|
61
|
+
```ts title="c15t.config.ts"
|
|
62
|
+
import { defineConsentConfig } from 'c15t/next';
|
|
63
|
+
import { scripts } from './src/consent-scripts';
|
|
64
|
+
|
|
65
|
+
export default defineConsentConfig({ scripts });
|
|
66
|
+
```
|
|
67
|
+
|
|
68
|
+
Keep the rest of your config, such as `mode` and `routePrefix`, in the
|
|
69
|
+
same call. `ConsentRoot` reads the config in the browser, so the layout
|
|
70
|
+
keeps passing only `state`. App Router, Pages Router and static export all
|
|
71
|
+
read the same file. See
|
|
72
|
+
[Next.js scripts and embeds](https://c15t.com/docs/frameworks/next/scripts).
|
|
73
|
+
|
|
74
|
+
**TanStack Start**
|
|
75
|
+
|
|
76
|
+
Import the configuration into your root route and pass it to the existing
|
|
77
|
+
`ConsentRoot` as a top-level prop. Keep the loader from the
|
|
78
|
+
[TanStack Start quickstart](https://c15t.com/docs/frameworks/tanstack-start/quickstart):
|
|
79
|
+
|
|
80
|
+
```tsx title="src/routes/__root.tsx"
|
|
81
|
+
import { scripts } from '../consent-scripts';
|
|
82
|
+
|
|
83
|
+
<ConsentRoot state={consent} scripts={scripts}>
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
Import vendor helpers in the root route module, not in a server function.
|
|
87
|
+
A server function's return value must be serializable, and script
|
|
88
|
+
configurations carry callbacks. See
|
|
89
|
+
[TanStack Start scripts](https://c15t.com/docs/frameworks/tanstack-start/scripts).
|
|
90
|
+
|
|
91
|
+
**React**
|
|
92
|
+
|
|
93
|
+
Add the configuration to the existing `ConsentProvider` options, next to
|
|
94
|
+
`mode`:
|
|
95
|
+
|
|
96
|
+
```tsx title="src/consent.tsx"
|
|
97
|
+
import { scripts } from './consent-scripts';
|
|
98
|
+
|
|
99
|
+
<ConsentProvider options={{ mode, scripts }}>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
`mode` is the `manifest()` value from the
|
|
103
|
+
[React quickstart](../frameworks/react/quickstart.md). Keep the banner,
|
|
104
|
+
dialog and preferences link inside the provider. See
|
|
105
|
+
[React scripts and embeds](../frameworks/react/scripts.md).
|
|
106
|
+
|
|
107
|
+
**Nuxt**
|
|
108
|
+
|
|
109
|
+
Register the scripts under the `c15t` key in `app/app.config.ts`. Adjust the
|
|
110
|
+
relative import to where you created `consent-scripts.ts`:
|
|
111
|
+
|
|
112
|
+
```ts title="app/app.config.ts"
|
|
113
|
+
import { scripts } from '../src/consent-scripts';
|
|
114
|
+
|
|
115
|
+
export default defineAppConfig({
|
|
116
|
+
c15t: { scripts },
|
|
117
|
+
});
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
The Nuxt module merges this over its options in `nuxt.config.ts` and starts
|
|
121
|
+
one script loader in the browser after hydration, once it has applied the
|
|
122
|
+
visitor's stored choice and privacy signals. Keep `scripts` out of
|
|
123
|
+
`nuxt.config.ts`, which reaches the browser as JSON and drops the vendor
|
|
124
|
+
callbacks. Write the vendor IDs into `consent-scripts.ts`. See
|
|
125
|
+
[Nuxt scripts and embeds](https://c15t.com/docs/frameworks/nuxt/scripts).
|
|
126
|
+
|
|
127
|
+
**Vue**
|
|
128
|
+
|
|
129
|
+
Pass the scripts to the existing `c15tVue` plugin call in `src/main.ts`:
|
|
130
|
+
|
|
131
|
+
```ts title="src/main.ts"
|
|
132
|
+
import { c15tVue, manifest } from 'c15t/vue/vue-plugin';
|
|
133
|
+
import { scripts } from './consent-scripts';
|
|
134
|
+
|
|
135
|
+
app.use(c15tVue, {
|
|
136
|
+
mode: manifest(),
|
|
137
|
+
scripts,
|
|
138
|
+
});
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
Keep your existing `mode` and other options. The plugin starts one
|
|
142
|
+
script loader when the app mounts, after it has applied the visitor's stored
|
|
143
|
+
choice. Do not also call `createScriptLoader` from a component. See
|
|
144
|
+
[Vue scripts and embeds](https://c15t.com/docs/frameworks/vue/scripts).
|
|
145
|
+
|
|
146
|
+
**Astro**
|
|
147
|
+
|
|
148
|
+
Add the scripts to the client entrypoint from the
|
|
149
|
+
[Astro quickstart](https://c15t.com/docs/frameworks/astro/quickstart), `src/c15t.client.ts`,
|
|
150
|
+
which the integration finds on its own. Keep `astro.config.mjs` as it is.
|
|
151
|
+
If the module already exports scripts, combine the two arrays.
|
|
152
|
+
|
|
153
|
+
```ts title="src/c15t.client.ts"
|
|
154
|
+
import type { C15tClientOptionsExtension } from 'c15t/astro';
|
|
155
|
+
import { scripts } from './consent-scripts';
|
|
156
|
+
|
|
157
|
+
export default { scripts } satisfies C15tClientOptionsExtension;
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
Vendor helpers contain callbacks, and the integration options in
|
|
161
|
+
`astro.config.mjs` are serialized into the page, so do not put helpers in
|
|
162
|
+
the integration's `scripts` option. The integration passes the client
|
|
163
|
+
entrypoint to the one runtime every page shares, including across
|
|
164
|
+
`ClientRouter` navigation.
|
|
165
|
+
|
|
166
|
+
**Svelte**
|
|
167
|
+
|
|
168
|
+
Import the scripts in the component that owns your existing provider and
|
|
169
|
+
pass them as a top-level prop:
|
|
170
|
+
|
|
171
|
+
```svelte title="src/App.svelte"
|
|
172
|
+
<script lang="ts">
|
|
173
|
+
import { ConsentProvider, manifest } from 'c15t/svelte';
|
|
174
|
+
import { scripts } from './consent-scripts';
|
|
175
|
+
</script>
|
|
176
|
+
|
|
177
|
+
<ConsentProvider mode={manifest()} {scripts}>
|
|
178
|
+
<!-- Keep your application, consent UI and preferences link here. -->
|
|
179
|
+
</ConsentProvider>
|
|
180
|
+
```
|
|
181
|
+
|
|
182
|
+
Retain the styles and consent UI from the [Svelte quickstart](https://c15t.com/docs/frameworks/svelte/quickstart).
|
|
183
|
+
The provider owns the loader and disposes it on unmount.
|
|
184
|
+
|
|
185
|
+
**SvelteKit**
|
|
186
|
+
|
|
187
|
+
Add the scripts to the existing `ConsentRoot` in the root layout. Keep the
|
|
188
|
+
handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs/frameworks/sveltekit/quickstart).
|
|
189
|
+
|
|
190
|
+
```svelte title="src/routes/+layout.svelte"
|
|
191
|
+
<script lang="ts">
|
|
192
|
+
import { ConsentRoot } from 'c15t/svelte';
|
|
193
|
+
import { scripts } from '../consent-scripts';
|
|
194
|
+
|
|
195
|
+
let { children, data } = $props();
|
|
196
|
+
</script>
|
|
197
|
+
|
|
198
|
+
<ConsentRoot state={data.consent} {scripts}>
|
|
199
|
+
{@render children()}
|
|
200
|
+
<!-- Keep your consent UI and preferences link here. -->
|
|
201
|
+
</ConsentRoot>
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
Import vendor helpers in the layout component, not in `+layout.server.ts`:
|
|
205
|
+
a server load cannot send functions to the browser. Prerendered, static and
|
|
206
|
+
SPA-mode pages use the same `scripts` prop. If you pass an externally owned
|
|
207
|
+
`runtime` to the provider, register scripts when creating that runtime instead.
|
|
208
|
+
|
|
209
|
+
**HTML**
|
|
210
|
+
|
|
211
|
+
The helpers in `@c15t/integrations` are ES modules that need a bundler. On a
|
|
212
|
+
page that loads the c15t script tag, paste the vendor's own snippet instead
|
|
213
|
+
and keep it inert until its category is allowed:
|
|
214
|
+
|
|
215
|
+
```html
|
|
216
|
+
<script type="text/plain" data-c15t-category="measurement">
|
|
217
|
+
// The vendor's snippet, unchanged
|
|
218
|
+
</script>
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
Use the category this guide names for the vendor. c15t runs the snippet
|
|
222
|
+
once that category is allowed, and reloads the page when the visitor
|
|
223
|
+
withdraws it. Helper options on this page, such as `loadMode`, do not apply
|
|
224
|
+
to a pasted snippet. See [HTML scripts](https://c15t.com/docs/frameworks/html/scripts).
|
|
225
|
+
|
|
226
|
+
**JavaScript**
|
|
227
|
+
|
|
228
|
+
Pass the scripts to `init()` from `@c15t/browser`, next to your mode:
|
|
229
|
+
|
|
230
|
+
```ts
|
|
231
|
+
import { init, manifest } from '@c15t/browser';
|
|
232
|
+
import { scripts } from './consent-scripts';
|
|
233
|
+
|
|
234
|
+
const consent = init({
|
|
235
|
+
mode: manifest(),
|
|
236
|
+
scripts,
|
|
237
|
+
});
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
Keep the mode 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](https://c15t.com/docs/frameworks/javascript/scripts).
|
|
245
|
+
|
|
246
|
+
## Options
|
|
247
|
+
|
|
248
|
+
| Option | Default | Behavior |
|
|
249
|
+
| ----------- | ----------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
250
|
+
| `siteId` | Required | Lucky Orange site ID. Trimmed and URL-encoded into the default loader URL. If it's missing or blank, c15t logs an error and never loads Lucky Orange. |
|
|
251
|
+
| `category` | `measurement` | Consent category or condition that must be allowed before the loader runs. |
|
|
252
|
+
| `scriptUrl` | `https://tools.luckyorange.com/core/lo.js?site-id=<siteId>` | Custom or proxied loader URL. A blank value uses the default. |
|
|
253
|
+
|
|
254
|
+
A proxy `scriptUrl` must keep `lo.js` in its path. Lucky Orange finds the site
|
|
255
|
+
ID by looking for script URLs that contain that file name. A renamed proxy path
|
|
256
|
+
hasn't been tested.
|
|
257
|
+
|
|
258
|
+
## Loading and revocation
|
|
259
|
+
|
|
260
|
+
When the category is allowed, the helper creates `window.LOQ` as an array, or
|
|
261
|
+
uses the one your page already defines. It pushes a `ready` callback onto the
|
|
262
|
+
queue, then adds the loader. When Lucky Orange calls back, the helper waits for
|
|
263
|
+
its privacy module and then sets the consent status to the visitor's current
|
|
264
|
+
choice. If the visitor withdrew in the meantime, the helper sets it to `false`,
|
|
265
|
+
so a late callback can't grant consent.
|
|
266
|
+
|
|
267
|
+
If the privacy module fails to start, the helper logs
|
|
268
|
+
`luckyOrange: privacy initialization failed.` with the error and never calls
|
|
269
|
+
`setConsentStatus`. This holds even if c15t disposed the helper while it was
|
|
270
|
+
waiting.
|
|
271
|
+
|
|
272
|
+
On withdrawal, the helper keeps the loader on the page and calls
|
|
273
|
+
`setConsentStatus(false)`. If the visitor grants consent again on the same
|
|
274
|
+
page, it calls `setConsentStatus(true)` without loading Lucky Orange a second
|
|
275
|
+
time. Calling `luckyOrange()` again with equal options, such as on a rerender,
|
|
276
|
+
returns the same script.
|
|
277
|
+
|
|
278
|
+
The helper doesn't call `optOut()`. That writes an opt-out cookie that lasts
|
|
279
|
+
two years and gets in the way if the visitor grants consent again. c15t hasn't
|
|
280
|
+
confirmed that `setConsentStatus(false)` stops every active recording, and
|
|
281
|
+
removing a script can't unload recording code. Keep `reloadOnConsentRevoked`
|
|
282
|
+
enabled. The next page, with consent denied, doesn't load Lucky Orange.
|
|
283
|
+
|
|
284
|
+
## Cookies and storage
|
|
285
|
+
|
|
286
|
+
Lucky Orange can set the `lo-domain-check`, `lo-opt-out`, `lo-uid` and
|
|
287
|
+
`lo-visits` cookies, and `lo-session`, `lo-messenger` and `lo-visitor` in local
|
|
288
|
+
storage. Some cookies last two years. Lucky Orange documents Do Not Track
|
|
289
|
+
support. c15t hasn't tested how Do Not Track or an existing Lucky Orange
|
|
290
|
+
opt-out interacts with the helper, so check both with your own account.
|
|
291
|
+
|
|
292
|
+
## Verify Lucky Orange
|
|
293
|
+
|
|
294
|
+
Filter the DevTools Network panel by `luckyorange.com`. Before consent, and
|
|
295
|
+
with only an unrelated category allowed, check that no loader, `LOQ`, `LO`,
|
|
296
|
+
cookie or storage entry appears. Allow measurement, wait for the privacy module
|
|
297
|
+
and check that `LO.privacy.getConsentStatus()` returns `true`. Withdraw consent
|
|
298
|
+
and confirm the page reloads with Lucky Orange blocked.
|
|
299
|
+
|
|
300
|
+
If you set `reloadOnConsentRevoked: false`, withdraw consent while the loader is
|
|
301
|
+
still downloading, and confirm that no late callback grants consent. With your
|
|
302
|
+
own account, check recording state after withdrawal and a new grant. Keep
|
|
303
|
+
Require Consent turned on.
|
|
304
|
+
|
|
305
|
+
If the console shows `luckyOrange: privacy initialization failed.`, Lucky
|
|
306
|
+
Orange never received a consent status.
|
|
307
|
+
|
|
308
|
+
Sources: [browser library](https://developers.luckyorange.com/libraries/browser),
|
|
309
|
+
[privacy tools](https://developers.luckyorange.com/libraries/browser/privacy-tools)
|
|
310
|
+
and [cookies and storage](https://developers.luckyorange.com/libraries/browser/cookies-storage).
|
|
311
|
+
|
|
312
|
+
Test in a private window with an opt-in policy. Open DevTools Network, disable
|
|
313
|
+
the cache and filter by the vendor's domain:
|
|
314
|
+
|
|
315
|
+
1. Load the page. No request goes to the vendor before you choose.
|
|
316
|
+
2. Click Reject, then reload. There is still no vendor request.
|
|
317
|
+
3. Open Privacy settings and allow the helper's category. The vendor script
|
|
318
|
+
loads without a page reload.
|
|
319
|
+
4. Turn the category off again and save. c15t reloads the page, and the new
|
|
320
|
+
page makes no vendor request.
|
|
321
|
+
|
|
322
|
+
c15t reloads on revocation because removing a script element does not stop
|
|
323
|
+
code that already ran. The vendor's listeners, timers and queued events stay
|
|
324
|
+
alive until the page unloads. If you set `reloadOnConsentRevoked: false`, stop
|
|
325
|
+
the vendor yourself. Register a callback-only script whose `onConsentChange`
|
|
326
|
+
calls the vendor's opt-out API, as shown in
|
|
327
|
+
[custom integrations](./building-integrations.md), and check the
|
|
328
|
+
permission before each of your own event calls. The reload does not delete
|
|
329
|
+
cookies the vendor already set; see
|
|
330
|
+
[clear on revocation for your framework](./overview.md#vendor-switches-and-cookie-cleanup).
|
|
331
|
+
|
|
332
|
+
The helper lists its vendor by name in the preference dialog, so a visitor can
|
|
333
|
+
turn it off inside an allowed category. See
|
|
334
|
+
[vendor consent for your framework](./overview.md#vendor-switches-and-cookie-cleanup). The
|
|
335
|
+
[consent verification guide](../guides/verify-consent.md) covers navigation,
|
|
336
|
+
expiry and hosting checks.
|