透過 100+ 個技巧學習 Nuxt！
56.4K

fathom-analytics
nuxt-fathom

Nuxt 的 Fathom 分析整合
8 千次下載
6 個星級
v0.0.2
valgeirbvalgeirb

Nuxt Fathom module

Nuxt Fathom

npm versionnpm downloadsLicenseNuxt

Nuxt 模組，用於整合 Fathom Analytics。

功能特色

設定

# pnpm
pnpm add -D nuxt-fathom

# npm
npm i -D nuxt-fathom

# yarn
yarn add -D nuxt-fathom

基本用法

將 nuxt-fathom 新增至 Nuxt 設定檔的 modules 區段，並提供您的 Fathom 網站 ID。

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

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

提示：您也可以使用 .env 檔案，而不是 fathom 鍵。

完成！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'
    }
  }
})

執行階段設定

您可以將所需的選項設定在專案的 .env 檔案中，而不是將 Fathom Analytics 網站 ID 硬編碼在 Nuxt 設定檔中，透過在執行階段比對環境變數，來利用 自動替換的公開執行階段設定值。

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

透過此設定，如果您只想設定網站 ID，則可以省略 Nuxt 設定檔中的 fathom 鍵。

模組選項

屬性類型描述預設值
manualboolean如果您想要手動控制頁面瀏覽追蹤。false
autoboolean當 false 時，跳過在腳本載入時自動追蹤頁面瀏覽。true
honorDNTboolean當 true 時，會尊重訪客瀏覽器中的 DNT 標頭。false
canonicalboolean當 false 時，如果存在 canonical 標籤則忽略。true
spa'auto', 'history', 'hash'接受以下其中一個值：auto、history 或 hash（請參閱進階文件）。undefined

Composables

與 Nuxt 3 生態系統中的其他 composables 一樣，它們會自動導入，並且可以在您的應用程式元件中使用。

useFathom

支援 SSR 的 useFathom composable 提供存取

  • 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

貢獻者