fathom-analytics
nuxt-fathom

用於 Nuxt 的 Fathom Analytics 整合
4.9K 下載7 顆星v0.0.3
valgeirbvalgeirb

Nuxt Fathom module

Nuxt Fathom

npm versionnpm downloadsLicenseNuxt

Nuxt 模組，用於整合 Fathom Analytics。

功能

安裝

執行以下命令將

  • 使用包管理器將模組安裝為依賴項。
  • 將其新增到您的 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",
  },
});

提示：您也可以使用 .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'
    }
  }
})

執行時配置

無需在 Nuxt 配置中硬編碼您的 Fathom Analytics 站點 ID，您可以將所需的選項設定在專案的 .env 檔案中，透過在執行時匹配環境變數，利用 自動替換的公共執行時配置值。

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

透過此設定，如果您只打算設定站點 ID，則可以省略 Nuxt 配置中的 fathom 鍵。

模組選項

屬性型別描述預設
手動boolean如果您想手動控制頁面瀏覽追蹤。false
自動boolean當 false 時，跳過在指令碼載入時自動追蹤頁面瀏覽。true
尊重 DNTboolean當 true 時，尊重訪問者瀏覽器中的 DNT 標頭。false
規範boolean當 false 時，如果存在規範標籤則忽略它。true
單頁應用'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();

！注意 由於 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

鳴謝