---
title: Fathom Analytics
description: Privacy-friendly cookieless analytics with a prebuilt helper that maps Fathom's data attributes into a c15t-managed script.
lastModified: 2026-05-10
icon: 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

**React**

```tsx
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>
  );
}
```

**Next.js**

```tsx
'use client';

import { type ReactNode } from 'react';
import { ConsentManagerProvider } from '@c15t/nextjs';
import { fathomAnalytics } from '@c15t/scripts/fathom-analytics';

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

export function ConsentProvider({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'hosted',
        backendURL: '/api/c15t',
        scripts,
      }}
    >
      {children}
    </ConsentManagerProvider>
  );
}
```

**JavaScript**

```ts
import { getOrCreateConsentRuntime } from 'c15t';
import { fathomAnalytics } from '@c15t/scripts/fathom-analytics';

getOrCreateConsentRuntime({
  mode: 'hosted',
  backendURL: 'https://your-instance.c15t.dev',
  scripts: [fathomAnalytics({ site: 'SITE123' })],
});
```

## 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:

```ts
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:

```tsx
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:

```ts
import { getOrCreateConsentRuntime } from 'c15t';

const { consentStore } = getOrCreateConsentRuntime();

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

## Types

### FathomAnalyticsOptions

| Property    | Value                                                            |
| :---------- | :--------------------------------------------------------------- |
| Type Name   | \`FathomAnalyticsOptions\`                                       |
| Source Path | \`./packages/scripts/src/vendors/analytics/fathom-analytics.ts\` |

\*AutoTypeTable: Could not extract \`FathomAnalyticsOptions\` from \`./packages/scripts/src/vendors/analytics/fathom-analytics.ts\`. Verify the path/name and that the file is included by your tsconfig.\*

### Script

| Property    | Value                                               |
| :---------- | :-------------------------------------------------- |
| Type Name   | \`Script\`                                          |
| Source Path | \`./packages/core/src/libs/script-loader/types.ts\` |

\*AutoTypeTable: Could not extract \`Script\` from \`./packages/core/src/libs/script-loader/types.ts\`. Verify the path/name and that the file is included by your tsconfig.\*