Docusaurus

Before you begin: Create your Fathom account and add your website to get its site ID. Already have one? You’re ready to follow the steps below.

Fathom Analytics works great with Docusaurus, the popular documentation framework by Meta.

Using the Fathom plugin

The easiest way to add Fathom to Docusaurus is using the community plugin:

1. Install the plugin:

npm install docusaurus-plugin-fathom

2. Add it to your docusaurus.config.js:

module.exports = {
  // ... your other config
  plugins: [
    [
      'docusaurus-plugin-fathom',
      {
        siteId: 'YOUR-SITE-ID',
      },
    ],
  ],
};

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

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

Manual setup

Alternatively, you can add the Fathom script manually using Docusaurus’s script injection:

1. Edit your docusaurus.config.js:

module.exports = {
  // ... your other config
  scripts: [
    {
      src: 'https://cdn.usefathom.com/script.js',
      'data-site': 'YOUR-SITE-ID',
      'data-spa': 'auto',
      defer: true,
    },
  ],
};

The data-spa: 'auto' attribute ensures Fathom tracks page views correctly as users navigate through your documentation.

Using a custom component

For more control, you can create a custom component using Docusaurus’s client module:

1. Create a file at src/components/Fathom.js:

import { useEffect } from 'react';
import { useLocation } from '@docusaurus/router';
import * as Fathom from 'fathom-client';

export default function FathomAnalytics() {
  const location = useLocation();

  useEffect(() => {
    Fathom.load('YOUR-SITE-ID', {
      auto: false,
    });
  }, []);

  useEffect(() => {
    Fathom.trackPageview();
  }, [location.pathname]);

  return null;
}

2. Install fathom-client:

npm install fathom-client

3. Swizzle the Root component to include Fathom:

npm run swizzle @docusaurus/theme-classic Root -- --wrap

4. Edit src/theme/Root.js to include your Fathom component:

import React from 'react';
import FathomAnalytics from '@site/src/components/Fathom';

export default function Root({ children }) {
  return (
    <>
      <FathomAnalytics />
      {children}
    </>
  );
}

Tracking events

To track custom events in your documentation:

import { trackEvent } from 'fathom-client';

// Track when someone copies a code block
trackEvent('Code Block Copied');

// Track when someone clicks a CTA
trackEvent('CTA Clicked');

Further customization

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

Ready to check your setup? Visit your published website, then open its Fathom dashboard to check for your first pageview. If it doesn’t appear, our installation troubleshooting guide will help.