Umami Analytics

Umami is an open-source, cookieless analytics product configured entirely through data-* attributes on its loader. The umamiAnalytics() helper serializes your website ID, host override, and tracking options into those attributes and hands the result to c15t's script loader.

Integrate with c15t

import { type ReactNode } from 'react';
import { ConsentManagerProvider } from '@c15t/react';
import { umamiAnalytics } from '@c15t/scripts/umami-analytics';

const scripts = [umamiAnalytics({ websiteId: 'site-abc-123' })];

export function ConsentProvider({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'hosted',
        backendURL: 'https://your-instance.c15t.dev',
        scripts,
      }}
    >
      {children}
    </ConsentManagerProvider>
  );
}

How c15t loads it

• Category: measurement (Analytics)
• Loads when: measurement consent is granted
• On revocation: unloaded — c15t removes the script element from the DOM. Umami is cookieless, so no client-side state needs clearing.

If you self-host Umami or need to restrict tracking to specific domains:

umamiAnalytics({
  websiteId: 'site-abc-123',
  hostUrl: 'https://analytics.example.com',
  domains: ['example.com', 'www.example.com'],
  autoTrack: false,
  tag: 'release-2025',
});

Each option is mapped to Umami's published data-* attribute (data-website-id, data-host-url, data-auto-track, data-domains, data-tag, data-before-send) and the script uses defer so it matches Umami's recommended embed pattern.

Tracking events in your app

c15t gates the Umami script from loading until measurement consent is granted. Your application code that calls Umami's runtime API (window.umami.track, window.umami.identify) is not automatically gated — window.umami does not exist until the script is loaded, so unguarded calls before consent throw.

Guard event calls by checking consent state. From React:

import { useConsentManager } from '@c15t/react';

function useTrackSignup() {
  const { has } = useConsentManager();

  return () => {
    if (has('measurement')) {
      window.umami?.track('signup');
    }
  };
}

From plain JavaScript:

import { getOrCreateConsentRuntime } from 'c15t';

const { consentStore } = getOrCreateConsentRuntime();

if (consentStore.getState().has('measurement')) {
  window.umami?.track('signup');
}

Types

UmamiAnalyticsOptions

Script