fathom-analytics
nuxt-fathom

用于 Nuxt 的 Fathom analytics 集成
5.3K 下载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
honorDNTboolean当 true 时，遵守访问者浏览器中的 DNT 头。false
canonicalboolean当 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();

!注意 由于 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

鸣谢