Nuxt Fathom module

Nuxt Fathom

Nuxt モジュールでFathom Analytics を統合します。

機能

⚡ 自動または手動トラッキング
📯 自動インポートされたコンポーザブル
🏷️ 完全な型付きFathom API
🦾 SSR対応
📂 .envファイルのサポート

設定

# pnpm
pnpm add -D nuxt-fathom

# npm
npm i -D nuxt-fathom

# yarn
yarn add -D nuxt-fathom

基本的な使用方法

Nuxt設定のmodulesセクションにnuxt-fathomを追加し、FathomサイトIDを指定します。

// `nuxt.config.ts`
export default defineNuxtConfig({
  modules: ["nuxt-fathom"],

  fathom: {
    siteId: "FATHOM_SITE_ID",
  },
});

ヒント：fathomキーの代わりに.envファイルを使用することもできます。

完了！Fathom Analyticsがアプリケーションのクライアント側で実行されます。

設定

Nuxt設定のfathomキーを使用して、サポートされているすべてのモジュールオプションを設定できます。

export default defineNuxtConfig({
  modules: ['nuxt-fathom'],

  fathom: {
    // The Fathom Analytics site ID to use for tracking
    siteId: string,
    // Additional configuration
    config: {
      manual?: boolean
      auto?: boolean
      honorDNT?: boolean
      canonical?: boolean
      spa?: 'auto' | 'history' | 'hash'
    }
  }
})

ランタイム設定

Nuxt設定にFathom AnalyticsサイトIDをハードコーディングする代わりに、プロジェクトの.envファイルに必要なオプションを設定し、ランタイム時に環境変数に一致する自動的に置き換えられる公開ランタイム設定値を利用します。

# Overwrites the `fathom.siteId` module option
NUXT_PUBLIC_FATHOM_SITE_ID=YOUR_SITE_ID

この設定では、サイトIDのみを設定する場合は、Nuxt設定でfathomキーを省略できます。

モジュールオプション

プロパティ	型	説明	デフォルト
`manual`	`boolean`	ページビューのトラッキングを手動で制御する場合。	`false`
`auto`	`boolean`	`false`の場合、スクリプトの読み込み時にページビューの自動トラッキングをスキップします。	`true`
`honorDNT`	`boolean`	`true`の場合、訪問者のブラウザのDNTヘッダーを尊重します。	`false`
`canonical`	`boolean`	`false`の場合、存在する場合はcanonicalタグを無視します。	`true`
`spa`	`'auto', 'history', 'hash'`	次のいずれかの値を受け入れます：auto、history、またはhash（詳細ドキュメントを参照してください）。	`undefined`

コンポーザブル

Nuxt 3エコシステムの他のコンポーザブルと同様に、自動的にインポートされ、アプリケーションのコンポーネントで使用できます。

`useFathom`

SSRセーフなuseFathomコンポーザブルは、以下へのアクセスを提供します。

blockTrackingForMeメソッド。
enableTrackingForMeメソッド。
isTrackingEnabledメソッド。
setSiteメソッド。
trackEventメソッド。
trackPageviewメソッド。

次のように使用できます。

// Each method is destructurable from the composable
const {
  blockTrackingForMe,
  enableTrackingForMe,
  isTrackingEnabled,
  setSite,
  trackEvent, // The method most likely to be used.
  trackPageview,
} = useFathom();

！注意 fathomインスタンスはクライアントでのみ利用可能であるため、サーバーで実行されるuseFathomメソッド呼び出しは効果がありません。

開発

# Install dependencies
pnpm install

# Generate type stubs
pnpm run dev:prepare

# Develop with the playground
pnpm run dev

# Build the playground
pnpm run dev:build

# Run ESLint
pnpm run lint

# Run Vitest
pnpm run test
pnpm run test:watch

# Release new version
pnpm run release

クレジット

このプロジェクトにインスピレーションを与えてくれたjohannschopplichのnuxt-gtagプロジェクト。
fathom-clientを提供してくれたderrickreimer。