astro-fathom
TypeScript icon, indicating that this package has built-in type declarations

2.0.0 • Public • Published

Fathom Analytics for Astro

Use this package to add Fathom's tracking script to your Astro site.

Astro Fathom exposes all the advanced tracking options as component properties and stubs in a console logger when analytics are disabled for easy debugging.

Fathom Analytics

Fathom is a simple, light-weight, privacy-first alternative to Google Analytics. So, stop scrolling through pages of reports and collecting gobs of personal data about your visitors, both of which you probably don’t need. Our website stats show up on a single, blazingly fast dashboard so you can make business decisions quickly.

From the Fathom website.

Installation

npm install astro-fathom

or

pnpm install astro-fathom

or if you really have to,

yarn add astro-fathom

Usage

This package includes a <Fathom> component that can be used right in your layout's <head>.

---
import { Fathom } from "astro-fathom"
---

<html>
  <head>
    <!-- head stuff -->
    <Fathom site="<your fathom site id>" />
  </head>
</html>

Just looking for a basic script installation? That's it, you're all set!

The Fathom script will be included in all production builds. When running with astro dev, window.fathom will be shimmed with a logger that outputs all tracking events to the browser's console instead.

Environment variables

It's common to keep analytics events separate for different deployment environments - for example test, staging, and production. We recommend using the environment variable listed below to configure the correct site, keeping your analytics configuration in the same place as your other environment configuration variables.

Available options

Support for custom domains via the trackingUrl option was removed in version 2.0. See Fathom's docs for more details.

See the Fathom docs for more information on these advanced tracking options.

Name Type Default Description
enabled Boolean import.meta.env.PROD When disabled, events are logged to the console
site String import.meta.env.FATHOM_SITE Your Fathom site id (required)
honorDnt Boolean false Honor Do Not Track?
auto Boolean true Automatically track page views?
canonical Boolean true Use the canonical URL, instead of the current URL?
excludedDomains String[] [] Excludes tracking for these domains
includedDomains String[] [] Include tracking for these domains
spa "auto", "history" or "hash" "auto" Tracking mode
loadType "defer" or "async" "defer" Tracking mode

Example

---
import { Fathom } from "astro-fathom"
---

<html>
  <head>
    <!-- with FATHOM environment variables -->
    <Fathom />

    <!-- or if you prefer to inline configuration variables -->
    <Fathom site="ABCDEFGH" />
  </head>
</html>

How to contribute

Questions, feedback, and suggestions

If you have any questions, feedback, or suggestions head over to the discussions page.

Bugs

If you find a bug please open an issue. Community pull requests to fix the issue are always appreciated!

Package Sidebar

Install

npm i astro-fathom

Weekly Downloads

27

Version

2.0.0

License

MIT

Unpacked Size

7.63 kB

Total Files

4

Last publish

Collaborators

  • tony-sull