Nuxt Nation 大会即将到来。加入我们，时间为 11 月 12-13 日。
54.8K

fathom-analytics
nuxt-fathom

用于 Nuxt 的 Fathom 分析集成
6K 下载量
6 星
v0.0.2
valgeirbvalgeirb

Nuxt Fathom module

Nuxt Fathom

npm versionnpm downloadsLicenseNuxt

用于集成 Fathom Analytics 的 Nuxt 模块。

功能

设置

# 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 文件中设置所需的选项，而不是在 Nuxt 配置中硬编码 Fathom Analytics 站点 ID，利用 在运行时匹配环境变量来自动替换公共运行时配置值。

# 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（请参阅 高级文档）。undefined

组合式函数

与 Nuxt 3 生态系统中的其他组合式函数一样，它们会自动导入，并可用于应用程序的组件中。

useFathom

服务器端渲染安全的 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

鸣谢