Hugo

Fathom Analytics works great with Hugo, one of the most popular static site generators.

Adding the Fathom script

The best way to add Fathom to your Hugo site is by including it in a partial template. Here's how:

Create a new partial file at layouts/partials/fathom.html:

{{ if not .Site.IsServer }}
<script src="https://cdn.usefathom.com/script.js" data-site="YOUR-SITE-ID" defer></script>
{{ end }}

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

The {{ if not .Site.IsServer }} condition ensures the script only loads in production, not during local development with hugo server.

Include this partial in your base template. Edit your layouts/_default/baseof.html (or the equivalent in your theme) and add the following just before the closing </head> tag:

{{ partial "fathom.html" . }}

Using Hugo's config file

For easier management, you can store your Fathom site ID in Hugo's config file and reference it in your template:

Add to your hugo.toml (or config.toml):

[params]
  fathomSiteID = "YOUR-SITE-ID"

Update your layouts/partials/fathom.html:

{{ if and (not .Site.IsServer) .Site.Params.fathomSiteID }}
<script src="https://cdn.usefathom.com/script.js" data-site="{{ .Site.Params.fathomSiteID }}" defer></script>
{{ end }}

Tracking events

To track custom events on specific pages, you can add inline scripts:

<button id="newsletter-signup" onclick="fathom.trackEvent('Newsletter Signup')">
  Subscribe
</button>

Further customization

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