nuxt-fathom

Nuxt 用 Fathom アナリティクス統合

4.9K ダウンロード•7 スター•v0.0.3

valgeirb

Nuxt Fathom module

Nuxt Fathom

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

機能

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

インストール

以下のコマンドを実行すると、

パッケージマネージャーを使用してモジュールを依存関係としてインストールします。
package.json ファイルに追加します。
nuxt.config ファイルを更新します。

npx nuxi@latest module add fathom-analytics

基本的な使い方

nuxt.config ファイルに 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'
    }
  }
})

ランタイム設定

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

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

この設定により、サイト ID のみを設定するつもりであれば、Nuxt 設定の fathom キーを省略できます。

モジュールオプション

プロパティ	タイプ	説明	デフォルト
`manual`	`ブール値`	ページビューのトラッキングを手動で制御したい場合。	`false`
`auto`	`ブール値`	`false` の場合、スクリプト読み込み時のページビューの自動トラッキングをスキップします。	`true`
`honorDNT`	`ブール値`	`true` の場合、訪問者のブラウザの DNT ヘッダーを尊重します。	`false`
`canonical`	`ブール値`	`false` の場合、正規タグが存在しても無視します。	`true`
`spa`	`'auto', 'history', 'hash'`	以下のいずれかの値を受け入れます: auto、history、または hash (詳細ドキュメントを参照)。	`未定義`

コンポーザブル

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

`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();

!NOTE 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

クレジット

彼の nuxt-gtag プロジェクトがこれをインスパイアした johannschopplich に感謝します。
彼の fathom-client に derrickreimer に感謝します。