Analytics

Fathom Analytics

Fathom Analytics is a lightweight, cookieless analytics product configured entirely through data-* attributes on its loader. The fathomAnalytics() helper serializes your site ID 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 { fathomAnalytics } from '@c15t/scripts/fathom-analytics';

const scripts = [fathomAnalytics({ site: 'SITE123' })];

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. Fathom is cookieless, so no client-side state needs clearing.

If you need to tune SPA tracking, canonical URL tracking, or Do Not Track handling:

fathomAnalytics({
  site: 'SITE123',
  spa: 'history',
  canonical: true,
  honorDnt: true,
})

Each option is mapped to Fathom's published data-* attribute (data-site, data-spa, data-auto, data-canonical, data-honor-dnt) and the script uses defer so it matches Fathom's recommended embed pattern.

Tracking events in your app

c15t gates the Fathom script from loading until measurement consent is granted. Your application code that calls Fathom's runtime API (window.fathom.trackEvent, trackPageview, trackGoal) is not automatically gated — window.fathom does not exist until the script is loaded, so unguarded calls before consent will throw errors.

Guard event calls by checking consent state. From React:

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

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

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

function SignupButton() {
  const trackSignup = useTrackSignup();

  return <button onClick={trackSignup}>Sign up</button>;
}

From plain JavaScript:

import { getOrCreateConsentRuntime } from 'c15t';

const { consentStore } = getOrCreateConsentRuntime();

if (consentStore.getState().has('measurement')) {
  window.fathom?.trackEvent('signup');
}

Types

FathomAnalyticsOptions

Warning: ExtractedTypeTable: Could not extract "FathomAnalyticsOptions" from "./packages/scripts/src/vendors/analytics/fathom-analytics.ts" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.

Loading…

Script

Warning: ExtractedTypeTable: Could not extract "Script" from "./packages/core/src/libs/script-loader/types.ts" using base path "/vercel/path0/apps/c15t-docs/.leadtype/c15t". Verify the path/name and that the file is included by your tsconfig.

Loading…