Gatsby plugin to add Fathom tracking to your site.
npm install gatsby-plugin-fathom
Gatsby plugin to add Fathom tracking to your site.
- Install
- Usage
- Options
- Example
- Example using environment variables
- Goal Tracking
- License
``
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 | Default |
| ----------------- | -------------------------------------------- | ----------------- |
| trackingUrl | Your Fathom custom domain (optional) | cdn.usefathom.com |siteId
| | Fathom site ID | |honorDnt
| | Honor do not track | false |ignoreCanonical
| | Ignore canonical and use current URL | false |includedDomains
| | Only include provided domains in tracking | [] |excludedDomains
| | Track every domain, except the ones provided | [] |
For more information on each option check https://usefathom.com/support/tracking-advanced.
`JavaScriptcdn.usefathom.com
// gatsby-config.js
module.exports = {
plugins: [
{
resolve: 'gatsby-plugin-fathom',
options: {
// Your custom domain, defaults to
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.
`bash`.env.production
FATHOM_SITE_ID=ABCDEF
`JavaScript.env.${process.env.NODE_ENV}
// gatsby-config.js
require('dotenv').config({
path:
})
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:
`javascript
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
}
`
The function returned by useGoal also excepts a value to be sent with the id. If not set it defaults to 0.
`javascript
import { useGoal } from 'gatsby-plugin-fathom'
export default function Foo() {
const handleGoal = useGoal('GOAL-ID')
return
}
``