Gatsby plugin to add Fathom tracking to your site.
npm install gatsby-plugin-fathom
By default, this plugin only generates output when run in production mode. To test your tracking code, run gatsby build && gatsby serve
.
Option | Explanation |
---|---|
trackingUrl |
Your Fathom custom domain (optional) |
siteId |
Fathom site ID |
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-fathom',
options: {
// Your custom domain, defaults to `cdn.usefathom.com`
trackingUrl: 'your-fathom-instance.com',
// Unique site id
siteId: 'FATHOM_SITE_ID'
}
}
]
}
You may want to use different site ids across different deployments. This is best achieved by defining config in environment variables. The value will be read on build-time, e.g. during CI.
# .env.production
FATHOM_SITE_ID=ABCDEF
// gatsby-config.js
require('dotenv').config({
path: `.env.${process.env.NODE_ENV}`
})
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-fathom',
options: {
siteId: process.env.FATHOM_SITE_ID
}
}
]
}
For more details, see https://www.gatsbyjs.org/docs/environment-variables/
You can import a hook for tracking goals in any component like so:
import { useGoal } from 'gatsby-plugin-fathom'
export default function Foo() {
// can pass true as the 2nd param in order to console log the tracked goal's ID
// useful for debugging in development
const handleGoal = useGoal('GOAL-ID')
return <button onClick={handleGoal}>Click me</button>
}