@c15t/react 3.1.0 → 3.2.0

package/docs/integrations/fullstory.md

@@ -0,0 +1,298 @@
+---
+title: FullStory
+description: Load FullStory after measurement consent, configure its tracking
+  settings, and verify loading and withdrawal with c15t.
+seoTitle: FullStory cookie consent with c15t
+seoDescription: Gate FullStory on measurement consent with c15t. Configure the
+  loader, understand withdrawal limits, and verify vendor requests and storage.
+icon: chart-line
+group: integrations
+---
+
+`fullStory` waits for `measurement` consent before creating vendor globals or downloading FullStory.
+
+## Configure FullStory
+
+Copy your organization ID from FullStory setup and remove the original snippet. For regional IDs such as `o-ABC123-eu1`, c15t selects the regional FullStory host and SDK download before loading. That ID uses `eu1.fullstory.com` and `edge.eu1.fullstory.com/s/fs.js`. Legacy IDs and the `na1` region use the US defaults.
+
+| Package manager | Command                          |
+| :-------------- | :------------------------------- |
+| npm             | `npm install @c15t/integrations` |
+| pnpm            | `pnpm add @c15t/integrations`    |
+| yarn            | `yarn add @c15t/integrations`    |
+| bun             | `bun add @c15t/integrations`     |
+
+```ts title="src/fullstory.ts"
+import { fullStory } from '@c15t/integrations/fullstory';
+
+export const scripts = [fullStory({ orgId: 'YOUR_ORG_ID' })];
+```
+
+## Register the scripts
+
+Complete your [framework quickstart](https://c15t.com/docs/frameworks) first. Keep its Inth
+endpoint, policy, styles and consent UI. Remove the vendor's original script,
+SDK initializer or tag-manager entry, so the vendor loads only through c15t.
+
+The vendor pages put the helper in `src/consent-scripts.ts`. If your framework
+quickstart already has a `scripts` array, such as the one in `c15t.config.ts`
+in the Next.js guide, add the helper to that array instead of creating a
+second file.
+The `scripts` export is a configuration, not an initializer. Add it to the c15t provider you already have, at the registration
+point for your framework below. These are edits to that provider, not a second
+provider.
+
+**Next.js**
+
+Add the configuration to `scripts` in `c15t.config.ts`, next to
+`next.config.ts`:
+
+```ts title="c15t.config.ts"
+import { defineConsentConfig } from 'c15t/next';
+import { scripts } from './src/consent-scripts';
+
+export default defineConsentConfig({ scripts });
+```
+
+Keep the rest of your config, such as `mode` and `routePrefix`, in the
+same call. `ConsentRoot` reads the config in the browser, so the layout
+keeps passing only `state`. App Router, Pages Router and static export all
+read the same file. See
+[Next.js scripts and embeds](https://c15t.com/docs/frameworks/next/scripts).
+
+**TanStack Start**
+
+Import the configuration into your root route and pass it to the existing
+`ConsentRoot` as a top-level prop. Keep the loader from the
+[TanStack Start quickstart](https://c15t.com/docs/frameworks/tanstack-start/quickstart):
+
+```tsx title="src/routes/__root.tsx"
+import { scripts } from '../consent-scripts';
+
+<ConsentRoot state={consent} scripts={scripts}>
+```
+
+Import vendor helpers in the root route module, not in a server function.
+A server function's return value must be serializable, and script
+configurations carry callbacks. See
+[TanStack Start scripts](https://c15t.com/docs/frameworks/tanstack-start/scripts).
+
+**React**
+
+Add the configuration to the existing `ConsentProvider` options, next to
+`mode`:
+
+```tsx title="src/consent.tsx"
+import { scripts } from './consent-scripts';
+
+<ConsentProvider options={{ mode, scripts }}>
+```
+
+`mode` is the `manifest()` value from the
+[React quickstart](../frameworks/react/quickstart.md). Keep the banner,
+dialog and preferences link inside the provider. See
+[React scripts and embeds](../frameworks/react/scripts.md).
+
+**Nuxt**
+
+Register the scripts under the `c15t` key in `app/app.config.ts`. Adjust the
+relative import to where you created `consent-scripts.ts`:
+
+```ts title="app/app.config.ts"
+import { scripts } from '../src/consent-scripts';
+
+export default defineAppConfig({
+  c15t: { scripts },
+});
+```
+
+The Nuxt module merges this over its options in `nuxt.config.ts` and starts
+one script loader in the browser after hydration, once it has applied the
+visitor's stored choice and privacy signals. Keep `scripts` out of
+`nuxt.config.ts`, which reaches the browser as JSON and drops the vendor
+callbacks. Write the vendor IDs into `consent-scripts.ts`. See
+[Nuxt scripts and embeds](https://c15t.com/docs/frameworks/nuxt/scripts).
+
+**Vue**
+
+Pass the scripts to the existing `c15tVue` plugin call in `src/main.ts`:
+
+```ts title="src/main.ts"
+import { c15tVue, manifest } from 'c15t/vue/vue-plugin';
+import { scripts } from './consent-scripts';
+
+app.use(c15tVue, {
+  mode: manifest(),
+  scripts,
+});
+```
+
+Keep your existing `mode` and other options. The plugin starts one
+script loader when the app mounts, after it has applied the visitor's stored
+choice. Do not also call `createScriptLoader` from a component. See
+[Vue scripts and embeds](https://c15t.com/docs/frameworks/vue/scripts).
+
+**Astro**
+
+Add the scripts to the client entrypoint from the
+[Astro quickstart](https://c15t.com/docs/frameworks/astro/quickstart), `src/c15t.client.ts`,
+which the integration finds on its own. Keep `astro.config.mjs` as it is.
+If the module already exports scripts, combine the two arrays.
+
+```ts title="src/c15t.client.ts"
+import type { C15tClientOptionsExtension } from 'c15t/astro';
+import { scripts } from './consent-scripts';
+
+export default { scripts } satisfies C15tClientOptionsExtension;
+```
+
+Vendor helpers contain callbacks, and the integration options in
+`astro.config.mjs` are serialized into the page, so do not put helpers in
+the integration's `scripts` option. The integration passes the client
+entrypoint to the one runtime every page shares, including across
+`ClientRouter` navigation.
+
+**Svelte**
+
+Import the scripts in the component that owns your existing provider and
+pass them as a top-level prop:
+
+```svelte title="src/App.svelte"
+<script lang="ts">
+  import { ConsentProvider, manifest } from 'c15t/svelte';
+  import { scripts } from './consent-scripts';
+</script>
+
+<ConsentProvider mode={manifest()} {scripts}>
+  <!-- Keep your application, consent UI and preferences link here. -->
+</ConsentProvider>
+```
+
+Retain the styles and consent UI from the [Svelte quickstart](https://c15t.com/docs/frameworks/svelte/quickstart).
+The provider owns the loader and disposes it on unmount.
+
+**SvelteKit**
+
+Add the scripts to the existing `ConsentRoot` in the root layout. Keep the
+handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs/frameworks/sveltekit/quickstart).
+
+```svelte title="src/routes/+layout.svelte"
+<script lang="ts">
+  import { ConsentRoot } from 'c15t/svelte';
+  import { scripts } from '../consent-scripts';
+
+  let { children, data } = $props();
+</script>
+
+<ConsentRoot state={data.consent} {scripts}>
+  {@render children()}
+  <!-- Keep your consent UI and preferences link here. -->
+</ConsentRoot>
+```
+
+Import vendor helpers in the layout component, not in `+layout.server.ts`:
+a server load cannot send functions to the browser. Prerendered, static and
+SPA-mode pages use the same `scripts` prop. If you pass an externally owned
+`runtime` to the provider, register scripts when creating that runtime instead.
+
+**HTML**
+
+The helpers in `@c15t/integrations` are ES modules that need a bundler. On a
+page that loads the c15t script tag, paste the vendor's own snippet instead
+and keep it inert until its category is allowed:
+
+```html
+<script type="text/plain" data-c15t-category="measurement">
+  // The vendor's snippet, unchanged
+</script>
+```
+
+Use the category this guide names for the vendor. c15t runs the snippet
+once that category is allowed, and reloads the page when the visitor
+withdraws it. Helper options on this page, such as `loadMode`, do not apply
+to a pasted snippet. See [HTML scripts](https://c15t.com/docs/frameworks/html/scripts).
+
+**JavaScript**
+
+Pass the scripts to `init()` from `@c15t/browser`, next to your mode:
+
+```ts
+import { init, manifest } from '@c15t/browser';
+import { scripts } from './consent-scripts';
+
+const consent = init({
+  mode: manifest(),
+  scripts,
+});
+```
+
+Keep the mode from your quickstart. With
+`createConsentRuntime` from `c15t/runtime`, pass `scripts` to it instead.
+A kernel you create yourself needs a loader from
+`c15t/modules/script-loader`. Attach one loader per kernel. See
+[JavaScript scripts](https://c15t.com/docs/frameworks/javascript/scripts).
+
+## Options
+
+| Option           | Default                             | Behavior                                                                                                                               |
+| ---------------- | ----------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
+| `orgId`          | Required                            | FullStory organization ID.                                                                                                             |
+| `host`           | Regional FullStory host             | `fullstory.com` for US and legacy IDs; `eu1.fullstory.com` for EU IDs.                                                                 |
+| `script`         | Regional FullStory edge             | Script host and path without a scheme, such as `edge.eu1.fullstory.com/s/fs.js`.                                                       |
+| `elementConsent` | `false`                             | Also set consent for elements marked capture with consent.                                                                             |
+| `category`       | `measurement`                       | Consent condition for the whole loader.                                                                                                |
+| `scriptUrl`      | HTTPS URL from `script`, with `org` | Exact download URL override. Nonblank values are trimmed, kept unchanged and receive no added `org`. Blank values use the derived URL. |
+
+The helper trims organization and endpoint values and treats blank overrides as missing. FullStory-owned `host` and `script` values receive the organization's region, replacing an existing region label when needed. Custom proxy or Relay hosts and script paths stay unchanged. The host and script resolve independently: a custom `host` alone does not change the default `script`. `scriptUrl` never changes the SDK's `script` environment value.
+
+Missing or blank required values log an error and never load.
+
+## Loading and revocation
+
+After consent, the helper creates FullStory's v2 callable queue with six-field command records. Async commands such as `FS('getSessionAsync')` return promises while the SDK loads and after its dispatcher is ready. It configures `captureOnStartup: false` and downloads the SDK. An uninterrupted first allowed load calls `start`. A load that completes while consent is denied, or after the last owner is removed, calls `shutdown`. After any helper-issued `shutdown`, regrant or remount calls `restart`, even if the helper never called `start`. Optional element consent follows the mapped permission through `setIdentity`.
+
+Equivalent registrations share one download and recorder. Each registration must grant the mapped consent before capture can start or resume, including registrations that have never loaded. Removing a denying registration reapplies the remaining registrations' consent, including when they use different `elementConsent` settings. Initial denial creates no FullStory globals or requests. Removing the last registration shuts down capture. Mounting the same configuration again resumes the retained recorder with `restart` without downloading the SDK again.
+
+Keep `orgId`, `host`, `script` and `scriptUrl` fixed for the page. c15t compares their effective values, so omitted regional defaults and explicit equivalent endpoints share the recorder. After bootstrap begins, c15t requires a page reload to change these effective settings and rejects incompatible configurations explicitly.
+
+Removing an async script does not guarantee that its pending download cannot execute, so c15t retains the pending bootstrap too. Remounting the same configuration waits for that download instead of inserting another script. If a script update interrupts setup before insertion, the next mount inserts the SDK without initializing FullStory twice.
+
+Without `MutationObserver`, c15t prevents a second download, but setup interrupted before insertion can require a reload. A nested synchronous mount can leave an outer registration on a source-less placeholder; it still shares the retained recorder and consent state.
+
+FullStory documents `init` before capture starts; c15t does not support replacing an initialized recorder in place. `scriptUrl` chooses the downloaded file, while `script` configures the SDK's environment. An existing `FS` from another installer must be removed from the site's setup before using this helper.
+
+Shutdown stops capture, but does not erase cookies or unload the SDK. Keep `reloadOnConsentRevoked` enabled when your policy also requires a fresh page without loaded vendor code. Capture state is reapplied on every page.
+
+FullStory can set `fs_uid` and `fs_cid` cookies for one year, `fs_lua` for 30 minutes, and `_fs_tab_id` in sessionStorage. Inspect your account configuration for additional storage.
+
+## Verify FullStory
+
+Check for no FullStory request, `FS`, FullStory configuration globals, cookies or browser storage before consent and after unrelated consent. Grant measurement and verify the real v2 dispatcher installed. With your own account, verify capture starts, shutdown stops it, and regrant restarts it once.
+
+Sources: [getting started](https://developer.fullstory.com/browser/getting-started/), [asynchronous methods](https://developer.fullstory.com/browser/asynchronous-methods/), [configuration](https://developer.fullstory.com/browser/fullcapture/configure-capture/), [capture controls](https://developer.fullstory.com/browser/fullcapture/capture-data/), [element consent](https://developer.fullstory.com/browser/fullcapture/user-consent/), and [cookie consent](https://help.fullstory.com/hc/en-us/articles/35988237543191-Cookie-Consent-Management-with-Fullstory).
+
+Test in a private window with an opt-in policy. Open DevTools Network, disable
+the cache and filter by the vendor's domain:
+
+1. Load the page. No request goes to the vendor before you choose.
+2. Click Reject, then reload. There is still no vendor request.
+3. Open Privacy settings and allow the helper's category. The vendor script
+   loads without a page reload.
+4. Turn the category off again and save. c15t reloads the page, and the new
+   page makes no vendor request.
+
+c15t reloads on revocation because removing a script element does not stop
+code that already ran. The vendor's listeners, timers and queued events stay
+alive until the page unloads. If you set `reloadOnConsentRevoked: false`, stop
+the vendor yourself. Register a callback-only script whose `onConsentChange`
+calls the vendor's opt-out API, as shown in
+[custom integrations](./building-integrations.md), and check the
+permission before each of your own event calls. The reload does not delete
+cookies the vendor already set; see
+[clear on revocation for your framework](./overview.md#vendor-switches-and-cookie-cleanup).
+
+The helper lists its vendor by name in the preference dialog, so a visitor can
+turn it off inside an allowed category. See
+[vendor consent for your framework](./overview.md#vendor-switches-and-cookie-cleanup). The
+[consent verification guide](../guides/verify-consent.md) covers navigation,
+expiry and hosting checks.