Fathom Analytics Integrations | Blue Frog Docs

Fathom Analytics Integrations

Integration options and implementation guides for Fathom Analytics across platforms

Fathom Analytics Integrations

Overview

Fathom Analytics is designed to integrate seamlessly with popular platforms and tools while maintaining its privacy-first philosophy. Unlike complex analytics platforms that require extensive setup, Fathom keeps integrations simple: a lightweight script and optional API access for custom workflows.

This guide covers native integrations, custom implementations, and best practices for connecting Fathom Analytics to your tech stack.

CMS & Website Builder Integrations

WordPress

Official Plugin:

  1. Install the Fathom Analytics plugin from WordPress.org
  2. Navigate to Settings > Fathom Analytics
  3. Enter your Site ID (found in Fathom dashboard)
  4. Save settings

Manual Installation:

<!-- Add to header.php before </head> -->
<?php if (!is_user_logged_in()) : ?>
<script src="https://cdn.usefathom.com/script.js" data-site="ABCDEFGH" defer></script>
<?php endif; ?>

WooCommerce Integration:

// Track purchases in functions.php
add_action('woocommerce_thankyou', 'fathom_track_purchase');

function fathom_track_purchase($order_id) {
    $order = wc_get_order($order_id);
    $total = $order->get_total();
    $cents = round($total * 100);
    ?>
    <script>
    if (window.fathom) {
        fathom.trackGoal('PURCHASE', <?php echo $cents; ?>);
    }
    </script>
    <?php
}

Ghost

Native Integration:

  1. Go to Settings > Code Injection
  2. Add to Site Header:
<script src="https://cdn.usefathom.com/script.js" data-site="ABCDEFGH" defer></script>

Member Signups:

<!-- Add to members signup page -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    // Listen for successful signup
    const signupForm = document.querySelector('.gh-signup-form');
    if (signupForm) {
        signupForm.addEventListener('submit', function() {
            fathom.trackGoal('SIGNUP01', 0);
        });
    }
});
</script>

Webflow

Setup:

  1. Go to Project Settings > Custom Code
  2. Add to Head Code:
<script src="https://cdn.usefathom.com/script.js" data-site="ABCDEFGH" defer></script>

Form Tracking:

<!-- Add to page with form -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('form');
    if (form) {
        form.addEventListener('submit', function() {
            fathom.trackGoal('FORMSUBM', 0);
        });
    }
});
</script>

Squarespace

Installation:

  1. Go to Settings > Advanced > Code Injection
  2. Add to Header:
<script src="https://cdn.usefathom.com/script.js" data-site="ABCDEFGH" defer></script>

Button Click Tracking:

<!-- Settings > Advanced > Code Injection > Footer -->
<script>
document.addEventListener('DOMContentLoaded', function() {
    const buttons = document.querySelectorAll('.sqs-block-button-element');
    buttons.forEach(function(button) {
        button.addEventListener('click', function() {
            fathom.trackGoal('BTNCLICK', 0);
        });
    });
});
</script>

Shopify

Theme Installation:

  1. Go to Online Store > Themes > Edit Code
  2. Open theme.liquid
  3. Add before </head>:
<script src="https://cdn.usefathom.com/script.js" data-site="ABCDEFGH" defer></script>

Purchase Tracking: Create a new file: Snippets > fathom-purchase.liquid

{% if first_time_accessed %}
<script>
if (window.fathom) {
    var total = {{ checkout.total_price | divided_by: 100.0 }};
    var cents = Math.round(total * 100);
    fathom.trackGoal('PURCHASE', cents);
}
</script>
{% endif %}

Add to Settings > Checkout > Order Status Page:

{% render 'fathom-purchase' %}

Wix

Installation:

  1. Go to Settings > Custom Code
  2. Add to Head:
<script src="https://cdn.usefathom.com/script.js" data-site="ABCDEFGH" defer></script>

Wix Stores Purchase Tracking:

// Add to page code
$w.onReady(function () {
    $w('#thankYouPage').onReady(() => {
        if (window.fathom) {
            fathom.trackGoal('PURCHASE', 0);
        }
    });
});

Framework Integrations

React

Installation:

npm install fathom-client

Setup with React Router:

// App.js
import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import * as Fathom from 'fathom-client';

function App() {
  const location = useLocation();

  useEffect(() => {
    Fathom.load('ABCDEFGH', {
      includedDomains: ['yourdomain.com'],
    });
  }, []);

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

  return <div>...</div>;
}

Tracking Goals:

import * as Fathom from 'fathom-client';

function SignupButton() {
  const handleSignup = () => {
    // Perform signup...

    // Track goal
    Fathom.trackGoal('SIGNUP01', 0);
  };

  return <button onClick={handleSignup}>Sign Up</button>;
}

Next.js

Installation:

npm install fathom-client

Setup in _app.js:

// pages/_app.js
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import * as Fathom from 'fathom-client';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    // Initialize Fathom
    Fathom.load('ABCDEFGH', {
      includedDomains: ['yourdomain.com'],
    });

    // Track pageviews on route change
    function onRouteChangeComplete() {
      Fathom.trackPageview();
    }

    router.events.on('routeChangeComplete', onRouteChangeComplete);

    return () => {
      router.events.off('routeChangeComplete', onRouteChangeComplete);
    };
  }, [router.events]);

  return <Component {...pageProps} />;
}

export default MyApp;

App Directory (Next.js 13+):

// app/layout.js
'use client';

import { useEffect } from 'react';
import { usePathname } from 'next/navigation';
import * as Fathom from 'fathom-client';

export default function RootLayout({ children }) {
  const pathname = usePathname();

  useEffect(() => {
    Fathom.load('ABCDEFGH');
  }, []);

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

  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Vue.js

Installation:

npm install fathom-client

Vue 3 Setup:

// main.js
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import * as Fathom from 'fathom-client';

// Initialize Fathom
Fathom.load('ABCDEFGH', {
  includedDomains: ['yourdomain.com'],
});

// Track pageviews on route change
router.afterEach(() => {
  Fathom.trackPageview();
});

createApp(App).use(router).mount('#app');

Tracking in Components:

<template>
  <button @click="handleClick">Track Event</button>
</template>

<script>
import * as Fathom from 'fathom-client';

export default {
  methods: {
    handleClick() {
      Fathom.trackGoal('BTNCLICK', 0);
    }
  }
}
</script>

Angular

Installation:

npm install fathom-client

Setup in app.component.ts:

import { Component, OnInit } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';
import { filter } from 'rxjs/operators';
import * as Fathom from 'fathom-client';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  constructor(private router: Router) {}

  ngOnInit() {
    // Initialize Fathom
    Fathom.load('ABCDEFGH', {
      includedDomains: ['yourdomain.com']
    });

    // Track pageviews on navigation
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      Fathom.trackPageview();
    });
  }
}

Gatsby

Installation:

npm install gatsby-plugin-fathom

gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-plugin-fathom',
      options: {
        siteId: 'ABCDEFGH',
        // Optional settings
        includedDomains: ['yourdomain.com'],
      },
    },
  ],
};

Tracking Goals:

import { trackGoal } from 'fathom-client';

function NewsletterSignup() {
  const handleSubmit = () => {
    trackGoal('SIGNUP01', 0);
  };

  return <form onSubmit={handleSubmit}>...</form>;
}

Tag Manager Integrations

Google Tag Manager

Base Fathom Script Tag:

  1. Create new Custom HTML tag
  2. Name: "Fathom Analytics - Base Script"
  3. HTML:
<script>
(function() {
  var script = document.createElement('script');
  script.src = 'https://cdn.usefathom.com/script.js';
  script.setAttribute('data-site', 'ABCDEFGH');
  script.defer = true;
  document.head.appendChild(script);
})();
</script>
  1. Trigger: All Pages

Goal Tracking Tag:

  1. Create new Custom HTML tag
  2. Name: "Fathom - Track Goal"
  3. HTML:
<script>
window.fathom = window.fathom || function() {
  (window.fathom.q = window.fathom.q || []).push(arguments)
};

fathom('trackGoal', '{{Goal ID Variable}}', {{Revenue Variable}});
</script>
  1. Set up variables for Goal ID and Revenue
  2. Create trigger for specific events

Example: Form Submission Tracking:

  1. Create form submit trigger
  2. Create variables:
    • Goal ID: FORMSUBM
    • Revenue: 0
  3. Apply trigger to goal tracking tag

Segment

JavaScript Source Integration:

analytics.ready(function() {
  // Initialize Fathom when Segment loads
  var script = document.createElement('script');
  script.src = 'https://cdn.usefathom.com/script.js';
  script.setAttribute('data-site', 'ABCDEFGH');
  script.defer = true;
  document.head.appendChild(script);
});

// Track Segment events as Fathom goals
analytics.track('Signup', {}, function() {
  if (window.fathom) {
    fathom.trackGoal('SIGNUP01', 0);
  }
});

Server-Side Integration: Use Fathom's Events API to send server-side Segment events.

API Integration

Events API

Endpoint:

POST https://cdn.usefathom.com/api/event

Authentication: No authentication required for event tracking (uses Site ID).

Request Format:

curl -X POST https://cdn.usefathom.com/api/event \
  -H 'Content-Type: application/json' \
  -d '{
    "site": "ABCDEFGH",
    "name": "pageview",
    "url": "https://yourdomain.com/page"
  }'

Track Goal via API:

curl -X POST https://cdn.usefathom.com/api/event \
  -H 'Content-Type: application/json' \
  -d '{
    "site": "ABCDEFGH",
    "name": "goal",
    "goal": "SIGNUP01",
    "value": 0
  }'

Node.js API Integration

const fetch = require('node-fetch');

async function trackFathomGoal(siteId, goalId, value = 0) {
  try {
    const response = await fetch('https://cdn.usefathom.com/api/event', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        site: siteId,
        name: 'goal',
        goal: goalId,
        value: value,
      }),
    });

    return response.ok;
  } catch (error) {
    console.error('Fathom tracking failed:', error);
    return false;
  }
}

// Usage
await trackFathomGoal('ABCDEFGH', 'PURCHASE', 9999);

Python API Integration

import requests

def track_fathom_goal(site_id, goal_id, value=0):
    try:
        response = requests.post(
            'https://cdn.usefathom.com/api/event',
            json={
                'site': site_id,
                'name': 'goal',
                'goal': goal_id,
                'value': value
            }
        )
        return response.status_code == 200
    except Exception as e:
        print(f'Fathom tracking failed: {e}')
        return False

# Usage
track_fathom_goal('ABCDEFGH', 'PURCHASE', 9999)

Email & Marketing Integrations

Email Campaigns

Track Email Link Clicks:

<!-- Add UTM parameters to links -->
<a href="https://yourdomain.com/landing?utm_source=email&utm_medium=newsletter&utm_campaign=launch">
  View Offer
</a>

Fathom automatically tracks referrer sources including UTM parameters.

ConvertKit

Track form signups:

// Add to thank you page or success callback
if (window.fathom) {
  fathom.trackGoal('EMAILSUB', 0);
}

Mailchimp

Embed tracking on landing pages:

<!-- Mailchimp hosted landing page -->
<script src="https://cdn.usefathom.com/script.js" data-site="ABCDEFGH" defer></script>

<script>
// Track successful signup
document.querySelector('#mc-embedded-subscribe-form').addEventListener('submit', function() {
  if (window.fathom) {
    fathom.trackGoal('MAILSUB1', 0);
  }
});
</script>

Payment & Ecommerce Integrations

Stripe

Track Successful Payments:

// Client-side after Stripe redirect
const urlParams = new URLSearchParams(window.location.search);
const sessionId = urlParams.get('session_id');

if (sessionId && window.fathom) {
  // Fetch session details from your backend
  fetch(`/api/checkout-session?session_id=${sessionId}`)
    .then(res => res.json())
    .then(data => {
      const cents = Math.round(data.amount_total / 100);
      fathom.trackGoal('PURCHASE', cents);
    });
}

Server-Side Webhook:

// Node.js - Stripe webhook handler
app.post('/webhook', express.raw({type: 'application/json'}), (req, res) => {
  const event = req.body;

  if (event.type === 'checkout.session.completed') {
    const session = event.data.object;

    // Track via Fathom API
    trackFathomGoal('ABCDEFGH', 'PURCHASE', session.amount_total);
  }

  res.json({received: true});
});

Gumroad

Product Purchase Tracking:

<!-- Add to product thank you page -->
<script src="https://cdn.usefathom.com/script.js" data-site="ABCDEFGH" defer></script>

<script>
// Gumroad provides sale data in URL
const urlParams = new URLSearchParams(window.location.search);
if (urlParams.has('sale_id') && window.fathom) {
  fathom.trackGoal('PURCHASE', 0);
}
</script>

Custom Integrations

Zapier

Setup:

  1. Use Webhooks by Zapier
  2. Configure POST to Fathom Events API
  3. Map data to Fathom event structure

Zap Configuration:

  • Trigger: Your app event (e.g., new form submission)
  • Action: Webhooks POST
  • URL: https://cdn.usefathom.com/api/event
  • Payload:
{
  "site": "ABCDEFGH",
  "name": "goal",
  "goal": "ZAPGOAL1",
  "value": 0
}

Make (Integromat)

HTTP Module:

  1. Add HTTP module
  2. Method: POST
  3. URL: https://cdn.usefathom.com/api/event
  4. Body:
{
  "site": "{{site_id}}",
  "name": "goal",
  "goal": "{{goal_id}}",
  "value": {{value}}
}

Best Practices

Performance Optimization

Use defer attribute:

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

Custom domain for speed and reliability:

<script src="https://stats.yourdomain.com/script.js" data-site="ABCDEFGH" defer></script>

Privacy Compliance

Exclude internal traffic:

<script src="https://cdn.usefathom.com/script.js"
        data-site="ABCDEFGH"
        data-excluded-domains="localhost,staging.yourdomain.com"
        defer></script>

Honor Do Not Track (optional):

<script src="https://cdn.usefathom.com/script.js"
        data-site="ABCDEFGH"
        data-honor-dnt="true"
        defer></script>

Error Handling

Graceful degradation:

function trackGoal(goalId, value = 0) {
  if (typeof window !== 'undefined' && window.fathom) {
    try {
      window.fathom.trackGoal(goalId, value);
    } catch (error) {
      console.error('Goal tracking failed:', error);
    }
  }
}

Testing Integrations

  1. Use excluded domains for development
  2. Create separate test site for staging
  3. Monitor network requests in DevTools
  4. Verify goals in Fathom dashboard
  5. Test on multiple devices and browsers

Additional Resources:

↑ Back to top
// SYS.FOOTER