Support home / Integrations

Astro

Fathom Analytics works great with Astro. Since Astro generates static sites by default (with optional server-side rendering), adding Fathom is straightforward.

Adding the Fathom script

The simplest way to add Fathom to your Astro site is to include the script in your base layout. Open your layout file (commonly src/layouts/Layout.astro or src/layouts/BaseLayout.astro) and add the Fathom script just before the closing </head> tag:

<script src="https://cdn.usefathom.com/script.js" data-site="YOUR-SITE-ID" defer></script>

Note: Replace `YOUR-SITE-ID` with your actual Fathom site ID. You can find this in your Fathom site settings.

If you're using View Transitions

Astro's View Transitions feature enables smooth page transitions without full page reloads. If you're using this feature, you'll need to enable SPA mode on your Fathom script:

<script src="https://cdn.usefathom.com/script.js" data-site="YOUR-SITE-ID" data-spa="auto" defer></script>

Using the Astro Fathom integration

There's also a community-built Astro Fathom integration that makes setup even easier:

Install the integration:

npm install astro-fathom

Add it to your astro.config.mjs:

import { defineConfig } from 'astro/config';
import fathom from 'astro-fathom';
 
export default defineConfig({
  integrations: [
    fathom({
      siteId: 'YOUR-SITE-ID',
    }),
  ],
});

Note: This is a community plugin and is not maintained by Fathom.

Tracking events

To track custom events, you can use inline scripts on specific pages or components:

<button id="signup-button">Sign Up</button>
 
<script>
  document.getElementById('signup-button').addEventListener('click', () => {
    fathom.trackEvent('Signup Button Clicked');
  });
</script>

Further customization

To learn about all the options we offer, read our advanced documentation here.