Skip to main content

Web analytics

Statable

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.

npm install @c15t/integrations
src/consent-scripts.ts
import { statableAnalytics } from '@c15t/integrations/statable-analytics';

export const scripts = [statableAnalytics({ siteId: '12345' })];

Register the scripts

Complete your framework quickstart 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.

Add the configuration to scripts in c15t.config.ts, next to next.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.

Options

OptionDefaultBehavior
siteIdRequiredPositive 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.
scriptUrlhttps://statable.com/js/&#123;siteId&#125;/s.jsLoader URL override. Each {siteId} is replaced with the site ID. A blank value uses the default.
trackingApiLoader origin plus /api/eventFull 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:

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, JavaScript API reference and privacy policy.

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, 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.

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. The consent verification guide covers navigation, expiry and hosting checks.