Docusaurus

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.