Skip to content

This package is a nuxt 2 wrapper around derrickreimer/fathom-client to be able to use usefathom.com in all its glory. Thanks to @derrickreimer for this framework agnostic library ❀️‍πŸ”₯.

License

Notifications You must be signed in to change notification settings

lostdesign/nuxt-fathom

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

9 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

repo banner

This package is a nuxt 2 wrapper around derrickreimer/fathom-client to be able to use usefathom.com in all its glory. Thanks to @derrickreimer for this framework agnostic library ❀️‍πŸ”₯.

πŸ”§ Installation

1. Install the following packages:

npm i fathom-client
npm i @lostdesign/nuxt-fathom

2. Register the module inside nuxt.config.js

export default {
  ...
  modules: ['@lostdesign/nuxt-fathom']
  ...
}

3. Configure the module inside nuxt.config.js

export default {
  ...
  fathom: {
    namespace: 'fathom', // optional
    spa: 'history', // recommended
    siteId: 'YOUR-SITE-ID-FROM-FATHOM',
    url: 'https://custom.fathom.domain.com/script.js'
    honorDNT: false,
    includedDomains: [
      'replace-with-your-domain.com',
      'localhost:3000',
      'uselinked.com'
    ],
    excludedDomains: [
      'google.com'
    ],
    canonical: true,
  },
  ...
}
Property Type Required Description
siteId string mandatory The site id as given by fathom, find yours in your usefathom settings.
spa string mandatory Accepts one of the following values: auto, history, or hash (see advanced docs).
includedDomains array optional Only tracks when on one of these domains.
excludedDomains array optional Only tracks when NOT on one of these domains.
url string optional The URL of the tracking script (defaults to https://cdn.usefathom.com/script.js). If you're using a custom domain then you should change this parameter to use it (example https://parrot.yourwebsite.com/script.js).
honorDNT boolean optional When true, honors the DNT header in the visitor's browser
canonical boolean optional When false, ignores the canonical tag if present (defaults to true).
namespace string optional Optional value to overwrite the default namespace of fathom. Default is fathom which means you will be able to use this.$fathom.trackPageview().

4. Optional: Register global trackPageview middleware inside nuxt.config.js

Every pageview will be automatically tracked if you register this middleware. Without you are required to call this.$fathom.trackPageview() yourself, most likely inside a custom page middleware.

export default {
  ...
  router: {
    middleware: ['fathom']
  }
  ...
}

πŸ“š Usage

this.$fathom.trackPageview(opts?: object)

Tracks a pageview.

Arguments
  • opts - An Object of options:
    • url - When set, overrides window.location.
    • referrer - When set, overrides document.referrer.

this.$fathom.trackGoal(code: string, cents: number)

Tracks a goal.

Arguments
  • code - the code provided in the Fathom UI.
  • cents - the value of the goal conversion.

this.$fathom.enableTrackingForMe()

Enables tracking for the current visitor.

See https://usefathom.com/docs/features/exclude.

this.$fathom.blockTrackingForMe()

Blocks tracking for the current visitor.

See https://usefathom.com/docs/features/exclude.

this.$fathom.setSite(id: string)

Sets the site ID for tracking (overrides the ID used when loading Fathom).

Arguments
  • id - The site ID provided in the Fathom UI.

See advanced options for tracking.

πŸ’– Sponsor

If you enjoy the this package, please consider becoming a sponsor or leave a tip or use my referral link for https://usefathom.com/ref/MQYHPK when signing up for fathom ❀️‍πŸ”₯.

About

This package is a nuxt 2 wrapper around derrickreimer/fathom-client to be able to use usefathom.com in all its glory. Thanks to @derrickreimer for this framework agnostic library ❀️‍πŸ”₯.

Topics

Resources

License

Code of conduct

Stars

Watchers

Forks

Sponsor this project