Scripts

Fathom Analytics

Copy for LLMs
Last updated by Harlan Wilton in chore: lint.

Get started with Fathom Analytics

$10 credit

Sign Up

Fathom Analytics is a great privacy analytics solution for your Nuxt app. It doesn't gather personal data from your visitors, yet provides detailed insights into how visitors use your site.

Script Stats
Transfer
3.0 KB
Decoded
6.7 KB
Loading
CDN
First-Party
Supported
Bundling
No
Privacy
No data collected
Tracked Data
Page Views Events Conversions

View source

Nuxt Config Setup

The simplest way to load Fathom Analytics globally in your Nuxt App is to use Nuxt config. Alternatively you can directly use the useScriptFathomAnalytics composable. 

export default defineNuxtConfig({
  scripts: {
    registry: {
      fathomAnalytics: {
        site: 'ABCDE'
      }
    }
  }
})

useScriptFathomAnalytics()

The useScriptFathomAnalytics composable lets you have fine-grain control over when and how Fathom Analytics is loaded on your site. 

const { proxy } = useScriptFathomAnalytics()

proxy.trackGoal('GOAL_ID', 100)

Please follow the Registry Scripts guide to learn more about advanced usage.

First-Party Mode

This script supports First-Party Mode which routes all traffic through your domain for improved privacy and ad blocker bypass. 

export default defineNuxtConfig({
  scripts: {
    firstParty: true,
    registry: {
      fathomAnalytics: { site: 'ABCDE'}
    }
  }
})

Example

Using Fathom Analytics only in production while using the proxy to send events. 

<script setup lang="ts">
const { proxy } = useScriptFathomAnalytics()

// noop in development, ssr
// just works in production, client
function handleAction() {
  proxy.trackGoal('GOAL_ID', 100)
}
</script>

<template>
  <div>
    <button @click="handleAction">
      Send Event
    </button>
  </div>
</template>

Defaults

  • Trigger: Script will load when Nuxt is hydrated.
sitestring required

The Fathom Analytics site ID.

spa'auto' | 'history' | 'hash' = 'auto'

The Fathom Analytics tracking mode.

autoboolean = true

Automatically track page views.

canonicalboolean = true

Enable canonical URL tracking.

honorDntboolean = false

Honor Do Not Track requests.

You can access the fathom object as a proxy directly or await the $script promise to access the object. It's recommended to use the proxy for any void functions.

const { proxy } = useScriptFathomAnalytics()
function trackMyGoal() {
  proxy.trackGoal('MY_GOAL_ID', 100)
}

Example

Loading Fathom Analytics through the app.vue when Nuxt is ready.

app.vue
<script setup>
useScriptFathomAnalytics({
  site: 'YOUR_SITE_ID',
  scriptOptions: {
    trigger: 'onNuxtReady'
  }
})
</script>
Edit this page
Markdown For LLMs

Databuddy Analytics

Use Databuddy Analytics in your Nuxt app.

Google Adsense

Show Google Adsense ads in your Nuxt app.