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

鸣谢