@c15t/browser 3.0.0-alpha.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 +64 -0
- package/CHANGELOG.md +27 -0
- package/README.md +128 -0
- package/dist/861.js +1079 -0
- package/dist/925.js +649 -0
- package/dist/c15t.css +213 -0
- package/dist/c15t.devtools.js +1 -0
- package/dist/c15t.headless.js +1 -0
- package/dist/c15t.iab.css +190 -0
- package/dist/c15t.iab.js +221 -0
- package/dist/c15t.js +30 -0
- package/dist/devtools.js +11 -0
- package/dist/headless.js +17 -0
- package/dist/iab.js +784 -0
- package/dist/index.js +17 -0
- package/dist-types/auto-init.d.ts +42 -0
- package/dist-types/client.d.ts +51 -0
- package/dist-types/deferred.d.ts +13 -0
- package/dist-types/devtools.d.ts +32 -0
- package/dist-types/entries/cdn-devtools.d.ts +13 -0
- package/dist-types/entries/cdn-headless.d.ts +8 -0
- package/dist-types/entries/cdn-iab.d.ts +1 -0
- package/dist-types/entries/cdn.d.ts +8 -0
- package/dist-types/gated-scripts.d.ts +35 -0
- package/dist-types/generated/iab-styles.d.ts +144 -0
- package/dist-types/generated/styles.d.ts +137 -0
- package/dist-types/global.d.ts +112 -0
- package/dist-types/headless.d.ts +41 -0
- package/dist-types/iab/mount.d.ts +8 -0
- package/dist-types/iab/preferences.d.ts +9 -0
- package/dist-types/iab/styles.d.ts +2 -0
- package/dist-types/iab/surface.d.ts +4 -0
- package/dist-types/iab/vendor-disclosures.d.ts +14 -0
- package/dist-types/iab.d.ts +20 -0
- package/dist-types/index.d.ts +43 -0
- package/dist-types/transports/manifest.d.ts +62 -0
- package/dist-types/transports/offline.d.ts +18 -0
- package/dist-types/types.d.ts +290 -0
- package/dist-types/ui/actions.d.ts +29 -0
- package/dist-types/ui/banner.d.ts +13 -0
- package/dist-types/ui/branding.d.ts +25 -0
- package/dist-types/ui/copy.d.ts +28 -0
- package/dist-types/ui/dialog.d.ts +14 -0
- package/dist-types/ui/dom.d.ts +48 -0
- package/dist-types/ui/mount.d.ts +27 -0
- package/dist-types/ui/surface.d.ts +43 -0
- package/dist-types/ui/trigger.d.ts +14 -0
- package/dist-types/ui/widget.d.ts +27 -0
- package/dist-types/version.d.ts +1 -0
- package/docs/README.md +64 -0
- package/docs/frameworks/javascript/script-loader.md +47 -0
- package/docs/frameworks/javascript/script-tag.md +375 -0
- package/docs/integrations/adobe-analytics.md +294 -0
- package/docs/integrations/ahrefs-analytics.md +291 -0
- package/docs/integrations/amplitude.md +292 -0
- package/docs/integrations/building-integrations.md +47 -0
- package/docs/integrations/clearbit.md +291 -0
- package/docs/integrations/cloudflare-web-analytics.md +292 -0
- package/docs/integrations/crisp.md +294 -0
- package/docs/integrations/databuddy.md +311 -0
- package/docs/integrations/fathom-analytics.md +293 -0
- package/docs/integrations/google-maps.md +384 -0
- package/docs/integrations/google-tag-manager.md +306 -0
- package/docs/integrations/google-tag.md +305 -0
- package/docs/integrations/heap.md +292 -0
- package/docs/integrations/hightouch.md +293 -0
- package/docs/integrations/hotjar.md +292 -0
- package/docs/integrations/intercom.md +285 -0
- package/docs/integrations/linkedin-insights.md +291 -0
- package/docs/integrations/logrocket.md +293 -0
- package/docs/integrations/matomo-analytics.md +316 -0
- package/docs/integrations/meta-pixel.md +285 -0
- package/docs/integrations/microsoft-clarity.md +292 -0
- package/docs/integrations/microsoft-uet.md +291 -0
- package/docs/integrations/mixpanel-analytics.md +295 -0
- package/docs/integrations/openai-pixel.md +441 -0
- package/docs/integrations/overview.md +111 -0
- package/docs/integrations/pirsch.md +295 -0
- package/docs/integrations/plausible-analytics.md +295 -0
- package/docs/integrations/posthog.md +397 -0
- package/docs/integrations/promptwatch.md +291 -0
- package/docs/integrations/reddit-pixel.md +294 -0
- package/docs/integrations/rudderstack.md +328 -0
- package/docs/integrations/rybbit-analytics.md +296 -0
- package/docs/integrations/segment.md +292 -0
- package/docs/integrations/snapchat-pixel.md +293 -0
- package/docs/integrations/tiktok-pixel.md +291 -0
- package/docs/integrations/umami-analytics.md +295 -0
- package/docs/integrations/vercel-analytics.md +293 -0
- package/docs/integrations/x-pixel.md +291 -0
- package/docs/integrations/youtube.md +405 -0
- package/package.json +117 -0
- package/readme.json +44 -0
|
@@ -0,0 +1,397 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: PostHog
|
|
3
|
+
description: Choose PostHog loading and cookieless behavior, configure the
|
|
4
|
+
region, and synchronize v3 permissions.
|
|
5
|
+
group: integrations
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Configure PostHog
|
|
9
|
+
|
|
10
|
+
Use the browser project token beginning with `phc_`. Select the region matching
|
|
11
|
+
your PostHog project. This example waits for measurement permission before
|
|
12
|
+
requesting the SDK.
|
|
13
|
+
|
|
14
|
+
| Package manager | Command |
|
|
15
|
+
| :-------------- | :-------------------------- |
|
|
16
|
+
| npm | `npm install @c15t/scripts` |
|
|
17
|
+
| pnpm | `pnpm add @c15t/scripts` |
|
|
18
|
+
| yarn | `yarn add @c15t/scripts` |
|
|
19
|
+
| bun | `bun add @c15t/scripts` |
|
|
20
|
+
|
|
21
|
+
```ts title="src/consent-scripts.ts"
|
|
22
|
+
import { posthog } from '@c15t/scripts/posthog';
|
|
23
|
+
|
|
24
|
+
export const scripts = [
|
|
25
|
+
posthog({
|
|
26
|
+
id: 'phc_YOUR_PROJECT_TOKEN',
|
|
27
|
+
region: 'eu',
|
|
28
|
+
loadMode: 'after-consent',
|
|
29
|
+
initOptions: { cookieless_mode: 'never' },
|
|
30
|
+
}),
|
|
31
|
+
];
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
The helper initializes PostHog. Remove a separate `posthog-js` initializer,
|
|
35
|
+
framework plugin or array snippet before using this setup.
|
|
36
|
+
|
|
37
|
+
## Register the scripts
|
|
38
|
+
|
|
39
|
+
Complete your [framework quickstart](https://c15t.com/docs/frameworks) first. Keep its Inth
|
|
40
|
+
endpoint, policy, styles and consent UI. Remove the vendor's original script,
|
|
41
|
+
SDK initializer or tag-manager entry so c15t owns loading once.
|
|
42
|
+
|
|
43
|
+
The `scripts` export in `src/consent-scripts.ts` is a configuration, not an
|
|
44
|
+
initializer. Add it to your existing consent owner using the registration point
|
|
45
|
+
below. These are partial edits to that owner, not additional providers.
|
|
46
|
+
|
|
47
|
+
**Next.js**
|
|
48
|
+
|
|
49
|
+
Import the configuration into the client boundary from your router guide:
|
|
50
|
+
|
|
51
|
+
```ts
|
|
52
|
+
import { ConsentRoot } from 'c15t/next';
|
|
53
|
+
import { scripts } from './consent-scripts';
|
|
54
|
+
```
|
|
55
|
+
|
|
56
|
+
Keep the server-resolved `state` and shared `consentConfig` from your
|
|
57
|
+
router guide. Its manifest, init and save URLs stay in effect. Add
|
|
58
|
+
`scripts` as a top-level prop on the existing root:
|
|
59
|
+
|
|
60
|
+
```tsx
|
|
61
|
+
<ConsentRoot state={state} config={consentConfig} scripts={scripts}>
|
|
62
|
+
{children}
|
|
63
|
+
</ConsentRoot>
|
|
64
|
+
```
|
|
65
|
+
|
|
66
|
+
For a Pages Router or static-export setup using `ConsentProvider`, add
|
|
67
|
+
`scripts` to its existing `options` instead. Keep the router-specific setup
|
|
68
|
+
from [Next.js script loading](https://c15t.com/docs/frameworks/next/script-loader).
|
|
69
|
+
|
|
70
|
+
**TanStack Start**
|
|
71
|
+
|
|
72
|
+
In your existing root route component, import the scripts alongside
|
|
73
|
+
`ConsentRoot`. Keep the server loader from the [TanStack Start quickstart](https://c15t.com/docs/frameworks/tanstack-start/quickstart).
|
|
74
|
+
|
|
75
|
+
```tsx
|
|
76
|
+
import { Outlet } from '@tanstack/react-router';
|
|
77
|
+
import { ConsentRoot } from 'c15t/tanstack-start';
|
|
78
|
+
import { scripts } from '../consent-scripts';
|
|
79
|
+
|
|
80
|
+
function Root() {
|
|
81
|
+
const state = Route.useLoaderData();
|
|
82
|
+
return (
|
|
83
|
+
<ConsentRoot state={state} backendURL={backendURL} initRoute={false} scripts={scripts}>
|
|
84
|
+
<Outlet />
|
|
85
|
+
{/* Keep your consent banner, dialog and preferences link here. */}
|
|
86
|
+
</ConsentRoot>
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
This edits the existing route. `Route` and `backendURL` come from its setup;
|
|
92
|
+
keep the document shell and head components if they are part of your root.
|
|
93
|
+
`initRoute={false}` keeps the quickstart's direct-backend initialization.
|
|
94
|
+
If your app mounts a consent server route, retain its existing `initRoute`
|
|
95
|
+
instead. Do not return script callbacks from a server function or route loader.
|
|
96
|
+
|
|
97
|
+
**React**
|
|
98
|
+
|
|
99
|
+
Import the scripts into your existing provider component:
|
|
100
|
+
|
|
101
|
+
```ts
|
|
102
|
+
import { ConsentProvider } from 'c15t/react';
|
|
103
|
+
import { scripts } from './consent-scripts';
|
|
104
|
+
```
|
|
105
|
+
|
|
106
|
+
Keep the existing options and add `scripts`:
|
|
107
|
+
|
|
108
|
+
```tsx
|
|
109
|
+
<ConsentProvider options={{ ...consentOptions, scripts }}>
|
|
110
|
+
{children}
|
|
111
|
+
</ConsentProvider>
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
Here `consentOptions` is your existing configuration, including
|
|
115
|
+
`mode: hosted({ url: backendURL })`. Keep the banner, dialog and preferences
|
|
116
|
+
link inside the provider. See [React script loading](https://c15t.com/docs/frameworks/react/script-loader).
|
|
117
|
+
|
|
118
|
+
**Nuxt**
|
|
119
|
+
|
|
120
|
+
Attach one loader from the root `app.vue`, after the Nuxt module has
|
|
121
|
+
started its browser runtime. This keeps vendor callbacks in application code rather
|
|
122
|
+
than serialized `nuxt.config.ts` runtime configuration.
|
|
123
|
+
|
|
124
|
+
```vue title="app/app.vue"
|
|
125
|
+
<script setup lang="ts">
|
|
126
|
+
import { onUnmounted } from 'vue';
|
|
127
|
+
import { createScriptLoader } from 'c15t/modules/script-loader';
|
|
128
|
+
import { scripts } from '../src/consent-scripts';
|
|
129
|
+
|
|
130
|
+
const nuxtApp = useNuxtApp();
|
|
131
|
+
const kernel = useConsentKernel();
|
|
132
|
+
let loader: ReturnType<typeof createScriptLoader> | undefined;
|
|
133
|
+
|
|
134
|
+
const removeMountedHook = nuxtApp.hook('app:mounted', () => {
|
|
135
|
+
loader = createScriptLoader({ kernel, scripts });
|
|
136
|
+
});
|
|
137
|
+
onUnmounted(() => {
|
|
138
|
+
removeMountedHook();
|
|
139
|
+
loader?.dispose();
|
|
140
|
+
});
|
|
141
|
+
</script>
|
|
142
|
+
|
|
143
|
+
<template>
|
|
144
|
+
<ConsentRoot />
|
|
145
|
+
<NuxtPage />
|
|
146
|
+
</template>
|
|
147
|
+
```
|
|
148
|
+
|
|
149
|
+
Merge the setup code into your root and retain its footer and preferences
|
|
150
|
+
link. `useConsentKernel` is auto-imported by the c15t Nuxt module. Adjust the
|
|
151
|
+
relative script import if your `app.vue` is at the project root. This loader
|
|
152
|
+
waits until the module has applied browser persistence and privacy signals,
|
|
153
|
+
then reads the current snapshot and observes future changes. Do not also register these scripts
|
|
154
|
+
in another loader. See the [Nuxt quickstart](https://c15t.com/docs/frameworks/nuxt/quickstart).
|
|
155
|
+
|
|
156
|
+
**Vue**
|
|
157
|
+
|
|
158
|
+
Use the kernel already provided by the Vue plugin. Merge this setup into
|
|
159
|
+
`App.vue`, whose lifetime covers the application:
|
|
160
|
+
|
|
161
|
+
```vue title="src/App.vue"
|
|
162
|
+
<script setup lang="ts">
|
|
163
|
+
import { onMounted, onUnmounted } from 'vue';
|
|
164
|
+
import { createScriptLoader } from 'c15t/modules/script-loader';
|
|
165
|
+
import { useConsentKernel } from 'c15t/vue/vue-plugin';
|
|
166
|
+
import ConsentRoot from 'c15t/vue/consent-root';
|
|
167
|
+
import { scripts } from './consent-scripts';
|
|
168
|
+
|
|
169
|
+
const kernel = useConsentKernel();
|
|
170
|
+
let loader: ReturnType<typeof createScriptLoader> | undefined;
|
|
171
|
+
|
|
172
|
+
onMounted(() => {
|
|
173
|
+
loader = createScriptLoader({ kernel, scripts });
|
|
174
|
+
});
|
|
175
|
+
onUnmounted(() => loader?.dispose());
|
|
176
|
+
</script>
|
|
177
|
+
|
|
178
|
+
<template>
|
|
179
|
+
<ConsentRoot />
|
|
180
|
+
<main>Your application</main>
|
|
181
|
+
</template>
|
|
182
|
+
```
|
|
183
|
+
|
|
184
|
+
Keep your existing page content and preferences link. The plugin still owns
|
|
185
|
+
the kernel and persistence; this component owns only the vendor loader.
|
|
186
|
+
Do not register the same scripts in plugin configuration as well. See the
|
|
187
|
+
[Vue quickstart](https://c15t.com/docs/frameworks/vue/quickstart).
|
|
188
|
+
|
|
189
|
+
**Astro**
|
|
190
|
+
|
|
191
|
+
Point the existing Astro integration at a client module. Keep its `mode`,
|
|
192
|
+
`ui` and framework integration from the [Astro quickstart](https://c15t.com/docs/frameworks/astro/quickstart).
|
|
193
|
+
Import `fileURLToPath` in your Astro configuration:
|
|
194
|
+
|
|
195
|
+
```js title="astro.config.mjs"
|
|
196
|
+
import { fileURLToPath } from 'node:url';
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
Add this option to the existing `c15t({ ... })` call. Resolve the path from
|
|
200
|
+
the configuration file because Astro injects the import into a virtual module:
|
|
201
|
+
|
|
202
|
+
```js
|
|
203
|
+
clientEntrypoint: fileURLToPath(new URL('./src/c15t.client.ts', import.meta.url)),
|
|
204
|
+
```
|
|
205
|
+
|
|
206
|
+
Export the scripts from that module:
|
|
207
|
+
|
|
208
|
+
```ts title="src/c15t.client.ts"
|
|
209
|
+
import type { C15tClientOptionsExtension } from '@c15t/astro';
|
|
210
|
+
import { scripts } from './consent-scripts';
|
|
211
|
+
|
|
212
|
+
export default { scripts } satisfies C15tClientOptionsExtension;
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
The integration passes this extension to its shared browser runtime. Vendor
|
|
216
|
+
helpers contain callbacks, so do not put them in the serialized `scripts`
|
|
217
|
+
option in `astro.config.mjs`. Keep one runtime across consent islands and
|
|
218
|
+
`ClientRouter` navigation.
|
|
219
|
+
|
|
220
|
+
**Svelte**
|
|
221
|
+
|
|
222
|
+
Import the scripts in the component that owns your existing provider and
|
|
223
|
+
pass them as a top-level prop:
|
|
224
|
+
|
|
225
|
+
```svelte title="src/App.svelte"
|
|
226
|
+
<script lang="ts">
|
|
227
|
+
import { ConsentManagerProvider, hosted } from '@c15t/svelte';
|
|
228
|
+
import { scripts } from './consent-scripts';
|
|
229
|
+
|
|
230
|
+
const backendURL = import.meta.env.VITE_C15T_BACKEND_URL;
|
|
231
|
+
if (!backendURL) throw new Error('Set VITE_C15T_BACKEND_URL');
|
|
232
|
+
const mode = hosted({ url: backendURL });
|
|
233
|
+
</script>
|
|
234
|
+
|
|
235
|
+
<ConsentManagerProvider {mode} {scripts}>
|
|
236
|
+
<!-- Keep your application, consent UI and preferences link here. -->
|
|
237
|
+
</ConsentManagerProvider>
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
Retain the styles and consent UI from the [Svelte quickstart](https://c15t.com/docs/frameworks/svelte/quickstart).
|
|
241
|
+
The provider owns the loader and disposes it on unmount.
|
|
242
|
+
|
|
243
|
+
**SvelteKit**
|
|
244
|
+
|
|
245
|
+
Add the scripts to the existing root layout provider. Keep the server load
|
|
246
|
+
and its serializable prefetch data from the [SvelteKit quickstart](https://c15t.com/docs/frameworks/sveltekit/quickstart).
|
|
247
|
+
|
|
248
|
+
```svelte title="src/routes/+layout.svelte"
|
|
249
|
+
<script lang="ts">
|
|
250
|
+
import { ConsentManagerProvider, hosted } from '@c15t/svelte';
|
|
251
|
+
import { scripts } from '../consent-scripts';
|
|
252
|
+
|
|
253
|
+
let { children, data } = $props();
|
|
254
|
+
const mode = hosted({ url: data.backendURL });
|
|
255
|
+
</script>
|
|
256
|
+
|
|
257
|
+
<ConsentManagerProvider {mode} {scripts} prefetch={data.prefetch}>
|
|
258
|
+
{@render children()}
|
|
259
|
+
<!-- Keep your consent UI and preferences link here. -->
|
|
260
|
+
</ConsentManagerProvider>
|
|
261
|
+
```
|
|
262
|
+
|
|
263
|
+
Import vendor helpers in the layout component, not in `+layout.server.ts`.
|
|
264
|
+
For static hosting, keep your browser-only `mode` setup and omit request
|
|
265
|
+
prefetch; the `scripts` prop stays the same. If you pass an externally owned
|
|
266
|
+
`runtime` to the provider, register scripts when creating that runtime instead.
|
|
267
|
+
|
|
268
|
+
**JavaScript**
|
|
269
|
+
|
|
270
|
+
Attach the loader to your existing kernel before calling
|
|
271
|
+
`kernel.commands.init()`:
|
|
272
|
+
|
|
273
|
+
```ts
|
|
274
|
+
import { createScriptLoader } from 'c15t/modules/script-loader';
|
|
275
|
+
import { scripts } from './consent-scripts';
|
|
276
|
+
|
|
277
|
+
const loader = createScriptLoader({ kernel, scripts });
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
Call `loader.dispose()` when that application instance is destroyed.
|
|
281
|
+
`kernel` is the hosted kernel from your quickstart. A provider-owned kernel
|
|
282
|
+
already has a loader; do not attach a second one. See
|
|
283
|
+
[JavaScript script loading](../frameworks/javascript/script-loader.md).
|
|
284
|
+
|
|
285
|
+
## Choose loading and capture behavior separately
|
|
286
|
+
|
|
287
|
+
| `loadMode` | SDK loading | Consent handling |
|
|
288
|
+
| ------------------------------ | ------------------------------------- | --------------------------------------------------------------- |
|
|
289
|
+
| `'after-consent'` | Waits for measurement permission | Calls PostHog opt-in and opt-out APIs after load and on changes |
|
|
290
|
+
| `'always'`, the helper default | Loads even while permission is denied | Calls the same consent APIs |
|
|
291
|
+
| `'disabled'` | Does not load PostHog | Does not synchronize consent with an SDK loaded elsewhere |
|
|
292
|
+
|
|
293
|
+
The helper defaults `initOptions.cookieless_mode` to `'on_reject'`. In that
|
|
294
|
+
mode, PostHog can continue cookieless capture after denial. It requires the
|
|
295
|
+
project's cookieless server hash setting. See
|
|
296
|
+
[PostHog's cookieless guide](https://posthog.com/tutorials/cookieless-tracking).
|
|
297
|
+
|
|
298
|
+
The example overrides this with `'never'` so opting out is not a switch to
|
|
299
|
+
cookieless capture. Loading after consent only controls the initial request;
|
|
300
|
+
for later revocation, verify PostHog's opt-out behavior and stop application
|
|
301
|
+
capture calls too. SDK code that already executed cannot be undone by removing
|
|
302
|
+
its script element.
|
|
303
|
+
|
|
304
|
+
## Configure hosts and initialization
|
|
305
|
+
|
|
306
|
+
| Option | Behavior |
|
|
307
|
+
| ------------------------------ | ---------------------------------------------------------------------------------------- |
|
|
308
|
+
| `id` | Browser project token. |
|
|
309
|
+
| `region` | `'eu'` by default; use `'us'` for a US project. |
|
|
310
|
+
| `apiHost / uiHost / scriptUrl` | Explicit overrides for proxy or self-hosted PostHog deployments. Keep all hosts aligned. |
|
|
311
|
+
| `loadMode` | Defaults to `'always'`; choose deliberately. |
|
|
312
|
+
| `initOptions` | Additional serializable SDK options, including the cookieless override. |
|
|
313
|
+
|
|
314
|
+
The helper applies the resolved API and UI hosts after `initOptions`; use the
|
|
315
|
+
top-level host fields to change them. A global `posthog` queue may exist before
|
|
316
|
+
the SDK is ready. Neither API presence nor SDK readiness is a consent grant.
|
|
317
|
+
|
|
318
|
+
## Keep application events behind permission
|
|
319
|
+
|
|
320
|
+
With the script helper registered, a React client component can guard an event
|
|
321
|
+
using the current effective permission:
|
|
322
|
+
|
|
323
|
+
```tsx title="src/signup-event.tsx"
|
|
324
|
+
'use client';
|
|
325
|
+
|
|
326
|
+
import { useConsent } from 'c15t/react';
|
|
327
|
+
|
|
328
|
+
export function SignupEvent() {
|
|
329
|
+
const allowed = useConsent('measurement');
|
|
330
|
+
|
|
331
|
+
return (
|
|
332
|
+
<button
|
|
333
|
+
type="button"
|
|
334
|
+
onClick={() => {
|
|
335
|
+
if (allowed) window.posthog?.capture('signup_started');
|
|
336
|
+
}}
|
|
337
|
+
>
|
|
338
|
+
Start signup
|
|
339
|
+
</button>
|
|
340
|
+
);
|
|
341
|
+
}
|
|
342
|
+
```
|
|
343
|
+
|
|
344
|
+
This is an event-call example, not a signup implementation. Next.js client
|
|
345
|
+
components can import `useConsent` from `c15t/next`.
|
|
346
|
+
|
|
347
|
+
## Use an existing PostHog SDK
|
|
348
|
+
|
|
349
|
+
If your app already initializes `posthog-js`, keep that SDK owner and attach a
|
|
350
|
+
callback-only script instead of the loading helper. Initialize your SDK with
|
|
351
|
+
`opt_out_capturing_by_default: true` and `cookieless_mode: 'never'` before
|
|
352
|
+
mounting c15t when denied permission must stop capture.
|
|
353
|
+
|
|
354
|
+
```ts title="src/posthog-consent.ts"
|
|
355
|
+
import type { Script, ScriptCallbackInfo } from 'c15t/modules/script-loader';
|
|
356
|
+
|
|
357
|
+
type PostHogConsentApi = {
|
|
358
|
+
opt_in_capturing: () => unknown;
|
|
359
|
+
opt_out_capturing: () => unknown;
|
|
360
|
+
};
|
|
361
|
+
|
|
362
|
+
export function posthogConsent(instance: PostHogConsentApi): Script {
|
|
363
|
+
const sync = ({ hasConsent }: ScriptCallbackInfo) => {
|
|
364
|
+
if (hasConsent) instance.opt_in_capturing();
|
|
365
|
+
else instance.opt_out_capturing();
|
|
366
|
+
};
|
|
367
|
+
|
|
368
|
+
return {
|
|
369
|
+
id: 'posthog-sdk-consent',
|
|
370
|
+
category: 'measurement',
|
|
371
|
+
callbackOnly: true,
|
|
372
|
+
alwaysLoad: true,
|
|
373
|
+
onBeforeLoad: sync,
|
|
374
|
+
onConsentChange: sync,
|
|
375
|
+
};
|
|
376
|
+
}
|
|
377
|
+
```
|
|
378
|
+
|
|
379
|
+
Pass `posthogConsent(posthog)` in the existing provider's `scripts` array, using
|
|
380
|
+
your initialized SDK instance. The callback-only entry synchronizes initial
|
|
381
|
+
and changed effective permissions without loading a second SDK. It does not
|
|
382
|
+
block the SDK import or its initial request. `loadMode: 'disabled'` on the
|
|
383
|
+
loading helper is not a substitute, because it performs no synchronization.
|
|
384
|
+
|
|
385
|
+
Keep c15t as the source of truth for the banner and saved choices. Effective
|
|
386
|
+
permission can come from policy defaults; a synchronization callback is not
|
|
387
|
+
proof that the visitor explicitly accepted. Do not reuse v2
|
|
388
|
+
`getOrCreateConsentRuntime` or `onBannerFetched` examples with v3.
|
|
389
|
+
|
|
390
|
+
## Verify the integration
|
|
391
|
+
|
|
392
|
+
With the example above, a fresh opt-in session should make no PostHog SDK
|
|
393
|
+
request until measurement is allowed. Grant, capture one test event, revoke,
|
|
394
|
+
and confirm later application calls stop. Repeat with persisted consent and
|
|
395
|
+
client navigation. If you choose cookieless capture, verify that behavior
|
|
396
|
+
explicitly in the project rather than expecting silence after denial. See
|
|
397
|
+
[consent verification](https://c15t.com/docs/guides/verify-consent).
|
|
@@ -0,0 +1,291 @@
|
|
|
1
|
+
---
|
|
2
|
+
title: Promptwatch
|
|
3
|
+
description: Configure Promptwatch with c15t v3, understand measurement
|
|
4
|
+
permission and verify loading and revocation.
|
|
5
|
+
group: integrations
|
|
6
|
+
---
|
|
7
|
+
|
|
8
|
+
## Configure Promptwatch
|
|
9
|
+
|
|
10
|
+
Use the project ID from your Promptwatch dashboard. The helper installs the browser attribution client with `data-project-id`.
|
|
11
|
+
|
|
12
|
+
| Package manager | Command |
|
|
13
|
+
| :-------------- | :-------------------------- |
|
|
14
|
+
| npm | `npm install @c15t/scripts` |
|
|
15
|
+
| pnpm | `pnpm add @c15t/scripts` |
|
|
16
|
+
| yarn | `yarn add @c15t/scripts` |
|
|
17
|
+
| bun | `bun add @c15t/scripts` |
|
|
18
|
+
|
|
19
|
+
```ts title="src/consent-scripts.ts"
|
|
20
|
+
import { promptwatch } from '@c15t/scripts/promptwatch';
|
|
21
|
+
|
|
22
|
+
export const scripts = [promptwatch({ projectId: 'YOUR_PROJECT_ID' })];
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Register the scripts
|
|
26
|
+
|
|
27
|
+
Complete your [framework quickstart](https://c15t.com/docs/frameworks) first. Keep its Inth
|
|
28
|
+
endpoint, policy, styles and consent UI. Remove the vendor's original script,
|
|
29
|
+
SDK initializer or tag-manager entry so c15t owns loading once.
|
|
30
|
+
|
|
31
|
+
The `scripts` export in `src/consent-scripts.ts` is a configuration, not an
|
|
32
|
+
initializer. Add it to your existing consent owner using the registration point
|
|
33
|
+
below. These are partial edits to that owner, not additional providers.
|
|
34
|
+
|
|
35
|
+
**Next.js**
|
|
36
|
+
|
|
37
|
+
Import the configuration into the client boundary from your router guide:
|
|
38
|
+
|
|
39
|
+
```ts
|
|
40
|
+
import { ConsentRoot } from 'c15t/next';
|
|
41
|
+
import { scripts } from './consent-scripts';
|
|
42
|
+
```
|
|
43
|
+
|
|
44
|
+
Keep the server-resolved `state` and shared `consentConfig` from your
|
|
45
|
+
router guide. Its manifest, init and save URLs stay in effect. Add
|
|
46
|
+
`scripts` as a top-level prop on the existing root:
|
|
47
|
+
|
|
48
|
+
```tsx
|
|
49
|
+
<ConsentRoot state={state} config={consentConfig} scripts={scripts}>
|
|
50
|
+
{children}
|
|
51
|
+
</ConsentRoot>
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
For a Pages Router or static-export setup using `ConsentProvider`, add
|
|
55
|
+
`scripts` to its existing `options` instead. Keep the router-specific setup
|
|
56
|
+
from [Next.js script loading](https://c15t.com/docs/frameworks/next/script-loader).
|
|
57
|
+
|
|
58
|
+
**TanStack Start**
|
|
59
|
+
|
|
60
|
+
In your existing root route component, import the scripts alongside
|
|
61
|
+
`ConsentRoot`. Keep the server loader from the [TanStack Start quickstart](https://c15t.com/docs/frameworks/tanstack-start/quickstart).
|
|
62
|
+
|
|
63
|
+
```tsx
|
|
64
|
+
import { Outlet } from '@tanstack/react-router';
|
|
65
|
+
import { ConsentRoot } from 'c15t/tanstack-start';
|
|
66
|
+
import { scripts } from '../consent-scripts';
|
|
67
|
+
|
|
68
|
+
function Root() {
|
|
69
|
+
const state = Route.useLoaderData();
|
|
70
|
+
return (
|
|
71
|
+
<ConsentRoot state={state} backendURL={backendURL} initRoute={false} scripts={scripts}>
|
|
72
|
+
<Outlet />
|
|
73
|
+
{/* Keep your consent banner, dialog and preferences link here. */}
|
|
74
|
+
</ConsentRoot>
|
|
75
|
+
);
|
|
76
|
+
}
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
This edits the existing route. `Route` and `backendURL` come from its setup;
|
|
80
|
+
keep the document shell and head components if they are part of your root.
|
|
81
|
+
`initRoute={false}` keeps the quickstart's direct-backend initialization.
|
|
82
|
+
If your app mounts a consent server route, retain its existing `initRoute`
|
|
83
|
+
instead. Do not return script callbacks from a server function or route loader.
|
|
84
|
+
|
|
85
|
+
**React**
|
|
86
|
+
|
|
87
|
+
Import the scripts into your existing provider component:
|
|
88
|
+
|
|
89
|
+
```ts
|
|
90
|
+
import { ConsentProvider } from 'c15t/react';
|
|
91
|
+
import { scripts } from './consent-scripts';
|
|
92
|
+
```
|
|
93
|
+
|
|
94
|
+
Keep the existing options and add `scripts`:
|
|
95
|
+
|
|
96
|
+
```tsx
|
|
97
|
+
<ConsentProvider options={{ ...consentOptions, scripts }}>
|
|
98
|
+
{children}
|
|
99
|
+
</ConsentProvider>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
Here `consentOptions` is your existing configuration, including
|
|
103
|
+
`mode: hosted({ url: backendURL })`. Keep the banner, dialog and preferences
|
|
104
|
+
link inside the provider. See [React script loading](https://c15t.com/docs/frameworks/react/script-loader).
|
|
105
|
+
|
|
106
|
+
**Nuxt**
|
|
107
|
+
|
|
108
|
+
Attach one loader from the root `app.vue`, after the Nuxt module has
|
|
109
|
+
started its browser runtime. This keeps vendor callbacks in application code rather
|
|
110
|
+
than serialized `nuxt.config.ts` runtime configuration.
|
|
111
|
+
|
|
112
|
+
```vue title="app/app.vue"
|
|
113
|
+
<script setup lang="ts">
|
|
114
|
+
import { onUnmounted } from 'vue';
|
|
115
|
+
import { createScriptLoader } from 'c15t/modules/script-loader';
|
|
116
|
+
import { scripts } from '../src/consent-scripts';
|
|
117
|
+
|
|
118
|
+
const nuxtApp = useNuxtApp();
|
|
119
|
+
const kernel = useConsentKernel();
|
|
120
|
+
let loader: ReturnType<typeof createScriptLoader> | undefined;
|
|
121
|
+
|
|
122
|
+
const removeMountedHook = nuxtApp.hook('app:mounted', () => {
|
|
123
|
+
loader = createScriptLoader({ kernel, scripts });
|
|
124
|
+
});
|
|
125
|
+
onUnmounted(() => {
|
|
126
|
+
removeMountedHook();
|
|
127
|
+
loader?.dispose();
|
|
128
|
+
});
|
|
129
|
+
</script>
|
|
130
|
+
|
|
131
|
+
<template>
|
|
132
|
+
<ConsentRoot />
|
|
133
|
+
<NuxtPage />
|
|
134
|
+
</template>
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
Merge the setup code into your root and retain its footer and preferences
|
|
138
|
+
link. `useConsentKernel` is auto-imported by the c15t Nuxt module. Adjust the
|
|
139
|
+
relative script import if your `app.vue` is at the project root. This loader
|
|
140
|
+
waits until the module has applied browser persistence and privacy signals,
|
|
141
|
+
then reads the current snapshot and observes future changes. Do not also register these scripts
|
|
142
|
+
in another loader. See the [Nuxt quickstart](https://c15t.com/docs/frameworks/nuxt/quickstart).
|
|
143
|
+
|
|
144
|
+
**Vue**
|
|
145
|
+
|
|
146
|
+
Use the kernel already provided by the Vue plugin. Merge this setup into
|
|
147
|
+
`App.vue`, whose lifetime covers the application:
|
|
148
|
+
|
|
149
|
+
```vue title="src/App.vue"
|
|
150
|
+
<script setup lang="ts">
|
|
151
|
+
import { onMounted, onUnmounted } from 'vue';
|
|
152
|
+
import { createScriptLoader } from 'c15t/modules/script-loader';
|
|
153
|
+
import { useConsentKernel } from 'c15t/vue/vue-plugin';
|
|
154
|
+
import ConsentRoot from 'c15t/vue/consent-root';
|
|
155
|
+
import { scripts } from './consent-scripts';
|
|
156
|
+
|
|
157
|
+
const kernel = useConsentKernel();
|
|
158
|
+
let loader: ReturnType<typeof createScriptLoader> | undefined;
|
|
159
|
+
|
|
160
|
+
onMounted(() => {
|
|
161
|
+
loader = createScriptLoader({ kernel, scripts });
|
|
162
|
+
});
|
|
163
|
+
onUnmounted(() => loader?.dispose());
|
|
164
|
+
</script>
|
|
165
|
+
|
|
166
|
+
<template>
|
|
167
|
+
<ConsentRoot />
|
|
168
|
+
<main>Your application</main>
|
|
169
|
+
</template>
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
Keep your existing page content and preferences link. The plugin still owns
|
|
173
|
+
the kernel and persistence; this component owns only the vendor loader.
|
|
174
|
+
Do not register the same scripts in plugin configuration as well. See the
|
|
175
|
+
[Vue quickstart](https://c15t.com/docs/frameworks/vue/quickstart).
|
|
176
|
+
|
|
177
|
+
**Astro**
|
|
178
|
+
|
|
179
|
+
Point the existing Astro integration at a client module. Keep its `mode`,
|
|
180
|
+
`ui` and framework integration from the [Astro quickstart](https://c15t.com/docs/frameworks/astro/quickstart).
|
|
181
|
+
Import `fileURLToPath` in your Astro configuration:
|
|
182
|
+
|
|
183
|
+
```js title="astro.config.mjs"
|
|
184
|
+
import { fileURLToPath } from 'node:url';
|
|
185
|
+
```
|
|
186
|
+
|
|
187
|
+
Add this option to the existing `c15t({ ... })` call. Resolve the path from
|
|
188
|
+
the configuration file because Astro injects the import into a virtual module:
|
|
189
|
+
|
|
190
|
+
```js
|
|
191
|
+
clientEntrypoint: fileURLToPath(new URL('./src/c15t.client.ts', import.meta.url)),
|
|
192
|
+
```
|
|
193
|
+
|
|
194
|
+
Export the scripts from that module:
|
|
195
|
+
|
|
196
|
+
```ts title="src/c15t.client.ts"
|
|
197
|
+
import type { C15tClientOptionsExtension } from '@c15t/astro';
|
|
198
|
+
import { scripts } from './consent-scripts';
|
|
199
|
+
|
|
200
|
+
export default { scripts } satisfies C15tClientOptionsExtension;
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
The integration passes this extension to its shared browser runtime. Vendor
|
|
204
|
+
helpers contain callbacks, so do not put them in the serialized `scripts`
|
|
205
|
+
option in `astro.config.mjs`. Keep one runtime across consent islands and
|
|
206
|
+
`ClientRouter` navigation.
|
|
207
|
+
|
|
208
|
+
**Svelte**
|
|
209
|
+
|
|
210
|
+
Import the scripts in the component that owns your existing provider and
|
|
211
|
+
pass them as a top-level prop:
|
|
212
|
+
|
|
213
|
+
```svelte title="src/App.svelte"
|
|
214
|
+
<script lang="ts">
|
|
215
|
+
import { ConsentManagerProvider, hosted } from '@c15t/svelte';
|
|
216
|
+
import { scripts } from './consent-scripts';
|
|
217
|
+
|
|
218
|
+
const backendURL = import.meta.env.VITE_C15T_BACKEND_URL;
|
|
219
|
+
if (!backendURL) throw new Error('Set VITE_C15T_BACKEND_URL');
|
|
220
|
+
const mode = hosted({ url: backendURL });
|
|
221
|
+
</script>
|
|
222
|
+
|
|
223
|
+
<ConsentManagerProvider {mode} {scripts}>
|
|
224
|
+
<!-- Keep your application, consent UI and preferences link here. -->
|
|
225
|
+
</ConsentManagerProvider>
|
|
226
|
+
```
|
|
227
|
+
|
|
228
|
+
Retain the styles and consent UI from the [Svelte quickstart](https://c15t.com/docs/frameworks/svelte/quickstart).
|
|
229
|
+
The provider owns the loader and disposes it on unmount.
|
|
230
|
+
|
|
231
|
+
**SvelteKit**
|
|
232
|
+
|
|
233
|
+
Add the scripts to the existing root layout provider. Keep the server load
|
|
234
|
+
and its serializable prefetch data from the [SvelteKit quickstart](https://c15t.com/docs/frameworks/sveltekit/quickstart).
|
|
235
|
+
|
|
236
|
+
```svelte title="src/routes/+layout.svelte"
|
|
237
|
+
<script lang="ts">
|
|
238
|
+
import { ConsentManagerProvider, hosted } from '@c15t/svelte';
|
|
239
|
+
import { scripts } from '../consent-scripts';
|
|
240
|
+
|
|
241
|
+
let { children, data } = $props();
|
|
242
|
+
const mode = hosted({ url: data.backendURL });
|
|
243
|
+
</script>
|
|
244
|
+
|
|
245
|
+
<ConsentManagerProvider {mode} {scripts} prefetch={data.prefetch}>
|
|
246
|
+
{@render children()}
|
|
247
|
+
<!-- Keep your consent UI and preferences link here. -->
|
|
248
|
+
</ConsentManagerProvider>
|
|
249
|
+
```
|
|
250
|
+
|
|
251
|
+
Import vendor helpers in the layout component, not in `+layout.server.ts`.
|
|
252
|
+
For static hosting, keep your browser-only `mode` setup and omit request
|
|
253
|
+
prefetch; the `scripts` prop stays the same. If you pass an externally owned
|
|
254
|
+
`runtime` to the provider, register scripts when creating that runtime instead.
|
|
255
|
+
|
|
256
|
+
**JavaScript**
|
|
257
|
+
|
|
258
|
+
Attach the loader to your existing kernel before calling
|
|
259
|
+
`kernel.commands.init()`:
|
|
260
|
+
|
|
261
|
+
```ts
|
|
262
|
+
import { createScriptLoader } from 'c15t/modules/script-loader';
|
|
263
|
+
import { scripts } from './consent-scripts';
|
|
264
|
+
|
|
265
|
+
const loader = createScriptLoader({ kernel, scripts });
|
|
266
|
+
```
|
|
267
|
+
|
|
268
|
+
Call `loader.dispose()` when that application instance is destroyed.
|
|
269
|
+
`kernel` is the hosted kernel from your quickstart. A provider-owned kernel
|
|
270
|
+
already has a loader; do not attach a second one. See
|
|
271
|
+
[JavaScript script loading](../frameworks/javascript/script-loader.md).
|
|
272
|
+
|
|
273
|
+
## Options
|
|
274
|
+
|
|
275
|
+
| Option | Behavior |
|
|
276
|
+
| ----------- | -------------------------------------------------------------- |
|
|
277
|
+
| `projectId` | Required non-empty project ID. |
|
|
278
|
+
| `scriptUrl` | Defaults to `https://ingest.promptwatch.com/js/client.min.js`. |
|
|
279
|
+
|
|
280
|
+
## Consent behavior
|
|
281
|
+
|
|
282
|
+
The client waits for measurement permission. This browser helper does not govern a separate server-side Promptwatch integration and has no vendor shutdown callback.
|
|
283
|
+
|
|
284
|
+
## Verify the integration
|
|
285
|
+
|
|
286
|
+
Confirm the project attribute and browser attribution requests. Verify a later denial separately from any server-side event collection your application performs.
|
|
287
|
+
|
|
288
|
+
Use a fresh session with an opt-in policy to check initial denial. Then grant
|
|
289
|
+
`measurement`, revoke it, and reload. Inspect both network requests and future
|
|
290
|
+
application events. Removing a script cannot undo code or requests that already
|
|
291
|
+
ran. Follow the [consent verification guide](https://c15t.com/docs/guides/verify-consent).
|