Eleventy (11ty)

Fathom Analytics works great with Eleventy (11ty), the popular static site generator.

Adding the Fathom script

The simplest way to add Fathom to your Eleventy site is to include it in your base layout. Here's how:

1. Open your base layout file (commonly _includes/base.njk, _includes/layout.njk, or similar)

2. 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.

Using environment variables

For better flexibility across environments, you can use environment variables:

1. Add your site ID to a .env file (make sure this is in your .gitignore):

FATHOM_SITE_ID=YOUR-SITE-ID

2. Install dotenv if you haven't already:

npm install dotenv

3. Configure Eleventy to load environment variables. In your .eleventy.js:

require('dotenv').config();
 
module.exports = function(eleventyConfig) {
  // Make environment variables available in templates
  eleventyConfig.addGlobalData('env', {
    fathomSiteId: process.env.FATHOM_SITE_ID,
    isProd: process.env.NODE_ENV === 'production'
  });
 
  // ... rest of your config
};

4. Update your layout to use the environment variable (Nunjucks example):

{% if env.isProd and env.fathomSiteId %}
<script src="https://cdn.usefathom.com/script.js" data-site="{{ env.fathomSiteId }}" defer></script>
{% endif %}

For Liquid templates

If you're using Liquid templates instead of Nunjucks:

{% if env.isProd and env.fathomSiteId %}
<script src="https://cdn.usefathom.com/script.js" data-site="{{ env.fathomSiteId }}" defer></script>
{% endif %}

Tracking events

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

<button onclick="fathom.trackEvent('Newsletter Signup')">
  Subscribe to Newsletter
</button>

Or for more complex tracking:

<script>
  document.querySelector('.contact-form').addEventListener('submit', function() {
    fathom.trackEvent('Contact Form Submitted');
  });
</script>

Further customization

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