# 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](https://spicandspan.net/en/), 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](https://usefathom.com/docs/integrations/inertiajs), the recommended approach is to add the following snippet to the script where Intertia is initialized:

```javascript
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](https://usefathom.com/docs/script/script-advanced#spa). From my experiments, the only thing you need to do is to add `data-spa="auto"` attribute to your Fathom Analytics tag, as in:

```xml
<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.