Neutral Political Machine

    gatsby-plugin-fathom

    2.1.1 • Public • Published

    gatsby-plugin-fathom

    npm package

    Gatsby plugin to add Fathom tracking to your site.

    Install

    npm install gatsby-plugin-fathom
    

    Usage

    By default, this plugin only generates output when run in production mode. To test your tracking code, run gatsby build && gatsby serve.

    Options

    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.

    Example

    // 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'
          }
        }
      ]
    }

    Example using environment variables

    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/

    Goal Tracking

    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>
    }

    The function returned by useGoal also excepts a value to be sent with the id. If not set it defaults to 0.

    import { useGoal } from 'gatsby-plugin-fathom'
    
    export default function Foo() {
      const handleGoal = useGoal('GOAL-ID')
    
      return <button onClick={() => handleGoal(100)}>Buy</button>
    }

    License

    MIT © Lars Graubner

    Install

    npm i gatsby-plugin-fathom

    DownloadsWeekly Downloads

    831

    Version

    2.1.1

    License

    MIT

    Unpacked Size

    10.5 kB

    Total Files

    7

    Last publish

    Collaborators

    • graubnla