Setting up Fathom Analytics on Inertia.js App

Navigation between pages within Inertia.js is not tracked by default

I recently set up Fathom Analytics for SPIC AND SPAN. Home & Office Cleaning, a marketplace for English-speaking cleaning services that I'm running. On the backend side it's a Laravel app, and in the customer- and cleaner-facing parts of the app we're using Vue.js + Inertia.js.

I quickly realized that we were tracking only the entrance to the app and not the navigation within the app. This is not the case in Google Analytics 4 properties, where navigation between pages within the Inertia.js app is tracked without any additional setup.

In the Fathom Analytics docs, the recommended approach is to add the following snippet to the script where Intertia is initialized:

Inertia.on('navigate', (event) => {
  window.fathom.trackPageview();
});

However, using this approach, each visit to page, and each page refresh is counted as 2 pageviews. We get one pageview from Fathom tag being loaded, and one pageview being triggered manually with window.fathom.trackPageview(). I could probably come up with some workaround to check if Inertia's navigation event was triggered by regular HTTP request and filter these out, but I saw an easier solution.

Use data-spa="auto" attribute

In "Advanced embed code settings" of Fathom Analytics Docs, there's a section on customizing embed code for SPAs. From my experiments, the only thing you need to do is to add data-spa="auto" attribute to your Fathom Analytics tag, as in:

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

With that setting adjusted, you do not need to manually trigger the trackPageview event, and still get pageviews sent to Fathom Analytics.