@c15t/react 3.1.0 → 3.2.0

package/docs/integrations/shopify.md

@@ -0,0 +1,323 @@
+---
+title: Shopify
+description: Send c15t consent to Shopify's Customer Privacy API from a Hydrogen
+  storefront, so Shopify analytics wait for the visitor's choice and follow each
+  later change.
+seoTitle: Shopify Hydrogen cookie consent with c15t
+seoDescription: Use your c15t banner as a custom consent banner in Shopify
+  Hydrogen. The c15t Shopify bridge passes each choice to Shopify's Customer
+  Privacy API.
+group: integrations
+---
+
+The c15t Shopify bridge sends each consent choice to Shopify's Customer
+Privacy API. Shopify's analytics, and the apps and pixels that read that API,
+then follow your c15t banner instead of Shopify's own. The bridge loads no
+script. Hydrogen's `ShopifyScripts` loads the Customer Privacy API, and the
+bridge's `setup` function holds Hydrogen's analytics events until Shopify has
+the visitor's choice.
+
+The [Shopify example](https://github.com/c15t/c15t/tree/v3/examples/shopify-nextjs)
+runs the code on this page in a Next.js app against mock.shop.
+
+## Add the bridge
+
+Set up c15t with the [Next.js quickstart](https://c15t.com/docs/frameworks/next/quickstart)
+first, then install the integrations package:
+
+| Package manager | Command                          |
+| :-------------- | :------------------------------- |
+| npm             | `npm install @c15t/integrations` |
+| pnpm            | `pnpm add @c15t/integrations`    |
+| yarn            | `yarn add @c15t/integrations`    |
+| bun             | `bun add @c15t/integrations`     |
+
+Create the bridge once per page and pass its `setup` to `ShopifyScripts` with
+`mode: 'custom-banner'`. A second component feeds the bridge each c15t
+snapshot:
+
+```tsx title="components/shopify-analytics.tsx"
+'use client';
+
+import { createShopifyCustomerPrivacy } from '@c15t/integrations/shopify';
+import type { ShopifyScriptsI18n, ShopifyScriptsShop } from '@shopify/hydrogen';
+import { ShopifyScripts } from '@shopify/hydrogen/react';
+import { useSnapshot } from 'c15t/next';
+import { useRouter } from 'next/navigation';
+import { useEffect } from 'react';
+
+// One bridge per page. It sends each c15t choice to Shopify's Customer
+// Privacy API, and its `setup` holds Hydrogen's analytics until Shopify has
+// the visitor's choice.
+const shopifyPrivacy = createShopifyCustomerPrivacy();
+
+/** Hydrogen's scripts and analytics bus. Render it in the document head. */
+export const ShopifyAnalytics = ({
+	i18n,
+	shop,
+}: {
+	i18n: ShopifyScriptsI18n;
+	shop: ShopifyScriptsShop;
+}) => {
+	const router = useRouter();
+	return (
+		<ShopifyScripts
+			analytics={{ channel: 'headless' }}
+			consent={{ mode: 'custom-banner', setup: shopifyPrivacy.setup }}
+			i18n={i18n}
+			// Shopify's scripts route storefront links through Next's router.
+			navigate={(url) => router.push(url)}
+			shop={shop}
+		/>
+	);
+};
+
+/** Feeds each c15t snapshot to the bridge. Render it inside `ConsentRoot`. */
+export const ShopifyConsentSync = () => {
+	const snapshot = useSnapshot();
+	useEffect(() => shopifyPrivacy.update(snapshot), [snapshot]);
+	return null;
+};
+```
+
+Render `ShopifyAnalytics` in the document head, as Hydrogen requires, with
+your shop's details. Render `ShopifyConsentSync` inside `ConsentRoot`:
+
+```tsx title="app/layout.tsx"
+import {
+	ConsentBanner,
+	ConsentDialog,
+	ConsentDialogLink,
+	ConsentRoot,
+} from 'c15t/next';
+import { resolveConsent } from 'c15t/next/server';
+import { connection } from 'next/server';
+import { Suspense } from 'react';
+import type { ReactNode } from 'react';
+
+import { PageViewTracker } from '@/components/page-view-tracker';
+import {
+	ShopifyAnalytics,
+	ShopifyConsentSync,
+} from '@/components/shopify-analytics';
+import { SiteHeader } from '@/components/site-header';
+import { StoreProviders } from '@/components/store-providers';
+import { currency, i18n, shop } from '@/lib/shop';
+import { getCart } from '@/lib/storefront';
+
+import './globals.css';
+
+const RootLayout = async ({ children }: { children: ReactNode }) => {
+	// The cart comes from the visitor's cookie, so every page renders per request.
+	await connection();
+
+	return (
+		<html lang="en">
+			<head>
+				{/* Hydrogen's scripts belong in the head, once per page. */}
+				<ShopifyAnalytics i18n={{ ...i18n, currency }} shop={shop} />
+			</head>
+			<body>
+				<ConsentRoot state={resolveConsent()}>
+					<ShopifyConsentSync />
+					<StoreProviders cart={getCart()}>
+						<SiteHeader />
+						<Suspense fallback={null}>
+							<PageViewTracker />
+						</Suspense>
+						{children}
+					</StoreProviders>
+					<ConsentBanner />
+					<ConsentDialog />
+					<footer className="site-footer">
+						<ConsentDialogLink>Privacy settings</ConsentDialogLink>
+					</footer>
+				</ConsentRoot>
+			</body>
+		</html>
+	);
+};
+
+export default RootLayout;
+```
+
+## Declare the categories
+
+c15t's dialog offers only the categories that something on the page uses.
+Shopify's scripts load through `ShopifyScripts`, not through c15t's `scripts`
+option, so c15t cannot find them. Declare the categories the bridge maps, or
+the dialog shows only Necessary and Shopify receives a denial for everything:
+
+```ts title="c15t.config.ts"
+import { defineConsentConfig } from 'c15t/next';
+
+export default defineConsentConfig({
+	options: {
+		// The categories the Shopify bridge maps. Shopify's scripts load through
+		// Hydrogen's `ShopifyScripts`, not `scripts`, so c15t can't discover them.
+		consentCategories: ['measurement', 'marketing', 'functionality'],
+	},
+});
+```
+
+The categories must also be in your policy's scope.
+
+## Serve the Storefront API route
+
+The Customer Privacy API saves each choice by posting to the storefront's own
+`/api/<version>/graphql.json`. Hydrogen's `handleShopifyRoutes` serves that
+route, forwards it to your shop and keeps the cookies Shopify sets. In
+Next.js, call it from `proxy.ts`:
+
+```ts title="proxy.ts"
+import {
+	createShopifyRequestContext,
+	createStorefrontClient,
+	handleShopifyRoutes,
+} from '@shopify/hydrogen';
+import { NextResponse } from 'next/server';
+import type { NextRequest } from 'next/server';
+
+import { cartHandlers } from '@/lib/cart-handlers';
+import { i18n, storeDomain } from '@/lib/shop';
+
+// This store has no customer accounts, so nothing keeps a session.
+const noSession = {
+	getSessionItem: () => undefined,
+	getSessionOrigin: () => '',
+	removeSessionItem: () => undefined,
+	setSessionItem: () => undefined,
+};
+
+/**
+ * Serves Hydrogen's routes: `/api/cart` for the cart, and the Storefront API
+ * at `/api/<version>/graphql.json`, where Shopify's Customer Privacy API
+ * saves each consent choice.
+ */
+export const proxy = (request: NextRequest) => {
+	const requestContext = createShopifyRequestContext({ i18n, request });
+	const storefrontClient = createStorefrontClient({
+		config: { publicStorefrontToken: undefined, storeDomain },
+		requestContext,
+		type: 'public',
+	});
+
+	const shopifyRoute = handleShopifyRoutes({
+		handlers: [cartHandlers],
+		request,
+		requestContext,
+		sessionManager: noSession,
+		storefrontClient,
+	});
+	if (shopifyRoute) {
+		return shopifyRoute;
+	}
+
+	const response = NextResponse.next({
+		request: { headers: requestContext.getForwardedRequestHeaders() },
+	});
+	requestContext.applyResponseHeaders(response.headers);
+	return response;
+};
+
+export const config = {
+	matcher: ['/((?!_next/static|_next/image|_next/data|favicon.ico).*)'],
+};
+```
+
+The consent route needs no handlers. The example adds Hydrogen's cart
+handlers for its cart, and its `lib/shop.ts` holds the store domain and
+market. It has no customer accounts, so it passes a session manager that
+stores nothing. Pass your own if your storefront signs customers in.
+
+## How categories map
+
+| Shopify consent | c15t category   |
+| --------------- | --------------- |
+| `analytics`     | `measurement`   |
+| `marketing`     | `marketing`     |
+| `preferences`   | `functionality` |
+| `sale_of_data`  | `marketing`     |
+
+Each Shopify value is `true` only while its c15t category is allowed in the
+effective permissions, which include policy restrictions. Pass `categories`
+to change the mapping:
+
+```ts
+const shopifyPrivacy = createShopifyCustomerPrivacy({
+	categories: { sale_of_data: 'measurement' },
+});
+```
+
+`toShopifyConsent(permissions, categories)` returns the same four values for
+your own code.
+
+## When the bridge sends
+
+Shopify records consent only when the visitor makes a choice, so the bridge
+sends nothing until then, or while the policy is pending.
+
+* **Opt-in or IAB policy:** `setup` waits until the visitor answers the
+  banner, including with Reject All, so Hydrogen holds events until then.
+* **Opt-out policy:** `setup` resolves without recording a choice, and
+  Shopify applies its region defaults, including Global Privacy Control,
+  until the visitor saves a choice in c15t. A stale grant is the exception,
+  below.
+
+After the first choice, the bridge sends each change once. When a visitor
+revokes a category, c15t reloads the page and the bridge sends the stored
+choice on load.
+
+While the visitor has no current choice, Shopify may still hold grants from
+an earlier one, for example after that choice expired or a policy change
+asks again. If c15t now denies any of them, the bridge sends `false` for
+those grants only, so Shopify keeps the other signals, including unset ones.
+It counts grants the bridge sent and each `yes` from Shopify's
+`currentVisitorConsent()`, and sends the revocation again if Shopify reports
+a dropped grant again, for example after another tab granted it. If that
+function isn't available, it assumes a choice c15t stored may have granted
+anything. Under an opt-in or IAB policy, Hydrogen keeps holding events until
+the visitor answers. Under opt-out, `setup` resolves once Shopify accepts the
+revocation.
+
+If the Customer Privacy API hasn't loaded yet, the bridge waits for
+Shopify's `consentTrackingApiLoaded` or `shopifyCustomerPrivacyApiLoaded`
+event.
+
+`setup` resolves once Shopify has accepted the visitor's latest choice, and
+Hydrogen then delivers the events that choice allows. If the visitor changes
+their mind while the first request is in flight, `setup` waits for the newer
+one. It never rejects, because Hydrogen stops calling `setup` after a
+rejection. When Shopify rejects a choice, the bridge keeps events blocked and
+sends it again after 1, 2 and 4 seconds, then on the next update. If the
+policy turns pending meanwhile, the bridge drops those retries.
+
+## Options
+
+| Option       | Default             | Behavior                                                                                                 |
+| ------------ | ------------------- | -------------------------------------------------------------------------------------------------------- |
+| `categories` | The table above     | Overrides the c15t category for any of the four Shopify values.                                          |
+| `onSync`     | None                | Called with what Shopify accepted: the four values for a choice, or the dropped grants for a revocation. |
+| `onError`    | Logs to the console | Called when Shopify rejects a choice or `onSync` throws.                                                 |
+
+The bridge returns `update(snapshot)`, `connect(source)` and `setup()`.
+`connect` follows anything with `getSnapshot` and `subscribe`, such as a c15t
+kernel, and returns a function that stops following it.
+
+## Limits
+
+* Checkout runs on Shopify's domain and doesn't render your storefront code.
+  Shopify reads the stored choice there.
+* Shopify's analytics need a real shop. mock.shop accepts the consent request
+  but sets no consent cookie, so `currentVisitorConsent()` stays empty.
+* The bridge maps categories only; it doesn't translate IAB TCF choices.
+
+## Verify the bridge
+
+1. In a private window with an opt-in policy, load the page. The network panel
+   shows no `graphql.json` request with `visitorConsent`.
+2. Click Reject All. One request goes out with every value `false`.
+3. Open the dialog, allow Marketing and save. One request goes out with
+   `marketing` and `saleOfData` set to `true`.
+4. On a real shop, run `window.Shopify.customerPrivacy.currentVisitorConsent()`
+   in the console and check it matches your choice.

package/docs/integrations/snapchat-pixel.md

@@ -163,7 +163,7 @@ pass them as a top-level prop:
 
 ```svelte title="src/App.svelte"
 <script lang="ts">
-  import { ConsentProvider, manifest } from '@c15t/svelte';
+  import { ConsentProvider, manifest } from 'c15t/svelte';
   import { scripts } from './consent-scripts';
 </script>
 
@@ -182,7 +182,7 @@ handle and the layout load from the [SvelteKit quickstart](https://c15t.com/docs
 
 ```svelte title="src/routes/+layout.svelte"
 <script lang="ts">
-  import { ConsentRoot } from '@c15t/svelte';
+  import { ConsentRoot } from 'c15t/svelte';
   import { scripts } from '../consent-scripts';
 
   let { children, data } = $props();

package/docs/integrations/statable-analytics.md

@@ -0,0 +1,345 @@
+---
+title: Statable
+description: Load Statable analytics after measurement consent with the c15t
+  statableAnalytics helper, configure its ingestion endpoint, and verify
+  requests and browser storage.
+seoTitle: Statable cookie consent with c15t
+seoDescription: Keep the Statable tracker off your page until measurement
+  consent. Configure the site ID, check browser storage, and stop tracking on
+  consent withdrawal.
+icon: chart-line
+group: integrations
+---
+
+Statable describes its web analytics as cookieless. The c15t
+`statableAnalytics` helper still waits until the `measurement` category is
+allowed before it loads Statable's tracker, so no request reaches Statable
+before then.
+
+Statable has no stop API. When the visitor withdraws, c15t reloads the page by
+default, and the reload stops the running tracker.
+
+## Configure Statable
+
+Copy the numeric site ID from **Site settings > Tracking Code** in Statable,
+and replace `12345` in the example with it. This helper uses the standalone
+`/js/<siteId>/s.js` tracker, which Statable offers on paid plans. The Hobby
+plan bundles tracking inside a widget with a different loader, which this
+helper doesn't support.
+
+Delete any existing Statable script tag or tag manager copy, so it can't load
+outside c15t.
+
+| 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/consent-scripts.ts"
+import { statableAnalytics } from '@c15t/integrations/statable-analytics';
+
+export const scripts = [statableAnalytics({ siteId: '12345' })];
+```
+
+## 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                                                                                                                                                                                    |
+| ------------- | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `siteId`      | Required                                | Positive integer as a string or number. Trimmed. If it's missing, blank, fractional, negative, non-decimal or above the safe integer limit, c15t logs an error and never loads the tracker. |
+| `scriptUrl`   | `https://statable.com/js/{siteId}/s.js` | Loader URL override. Each `{siteId}` is replaced with the site ID. A blank value uses the default.                                                                                          |
+| `trackingApi` | Loader origin plus `/api/event`         | Full ingestion endpoint, set as the `data-tracking-api` attribute. The tracker posts to this URL as you give it. A blank value leaves the attribute off, so Statable uses its default.      |
+
+If you serve the tracker from your own CDN, and that CDN doesn't serve or proxy
+`/api/event`, set `trackingApi` to the full ingestion URL too. Replace both
+example hosts with your own:
+
+```ts title="src/consent-scripts.ts"
+import { statableAnalytics } from '@c15t/integrations/statable-analytics';
+
+export const scripts = [
+	statableAnalytics({
+		scriptUrl: 'https://cdn.example.com/js/{siteId}/s.js',
+		siteId: '12345',
+		trackingApi: 'https://analytics.example.com/api/event',
+	}),
+];
+```
+
+A custom `scriptUrl` only changes where the browser fetches the tracker. It
+doesn't proxy event requests. Statable uses the visitor's connection to the
+ingestion server for its reports, so check Statable's guidance before you proxy
+collection.
+
+## Loading and revocation
+
+When `measurement` is allowed, the helper adds a deferred script with your
+site ID in its path and in the `data-id` attribute. It doesn't create
+`window.statable` or queue events. The tracker sets up `window.statable.t`
+after it loads, and it doesn't replay events sent before then. Check the
+measurement permission and wait for that function before you send an event.
+
+The helper calls no Statable consent or stop API. On withdrawal, c15t removes
+the loader element, but the tracker's listeners and timers keep running until
+the page unloads. Keep `reloadOnConsentRevoked` enabled. If you turn it off,
+tracking continues on the current page.
+
+## Cookies and storage
+
+Statable says it sets no cookies and stores no persistent visitor ID in the
+browser. Its tracker reads the `analytics_ignore` flag in local storage. It
+sends the full page URL to ingestion, including the query and fragment.
+Statable says it strips both when it processes URLs. Keep sensitive data out of
+URLs anyway.
+
+For CSP, allow `https://statable.com` in `script-src` and `connect-src`, or
+your custom loader and ingestion hosts.
+
+## Verify Statable
+
+With measurement denied, filter the DevTools Network panel by `statable.com`
+and check that no loader or event request appears. Check Cookies, Local Storage
+and Session Storage in the Application panel for Statable entries. Allowing
+only marketing must leave Statable blocked too.
+
+After you allow measurement, expect one `/js/<siteId>/s.js` script element, and
+`typeof window.statable?.t === 'function'`. With a configured site, events post
+to `/api/event` or to your `trackingApi` URL. Statable suppresses collection
+for automated browsers, Do Not Track, Global Privacy Control and the
+`analytics_ignore` flag. A ready API alone doesn't prove that an event reached
+your dashboard.
+
+Sources: [tracking script reference](https://statable.com/docs/developers/tracking-script/),
+[JavaScript API reference](https://statable.com/docs/developers/javascript-api/)
+and [privacy policy](https://statable.com/privacy).
+
+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.