Nuxt Plausible module

Nuxt Plausible

功能

🌻 无需任何配置
📯 使用组合式函数手动跟踪事件和页面浏览量
📂 .env 文件支持
🧺 合理的默认选项
🦾 服务器端渲染就绪

设置

npx nuxi@latest module add plausible

基本用法

将 @nuxtjs/plausible 添加到 Nuxt 配置的 modules 部分

// `nuxt.config.ts`
export default defineNuxtConfig({
  modules: ['@nuxtjs/plausible'],
})

完成！Plausible 现在将在您的应用程序客户端中运行。

!TIP 默认情况下，@nuxtjs/plausible 将使用 window.location.hostname 作为 Plausible domain 配置键，这适用于大多数用例。如果您需要自定义域名，可以在模块选项中进行设置。

配置

所有支持的模块选项都可以通过 Nuxt 配置中的 plausible 键进行配置

export default defineNuxtConfig({
  modules: ['@nuxtjs/plausible'],

  plausible: {
    // Prevent tracking on localhost
    ignoredHostnames: ['localhost'],
  },
})

!TIP 要允许在本地主机上跟踪事件，请将 ignoredHostnames 选项设置为一个空数组。

运行时配置

或者，利用在运行时通过匹配环境变量自动替换公共运行时配置值，在项目的 .env 文件中设置所需的选项

# Sets the `plausible.domain` option to `example.com`
NUXT_PUBLIC_PLAUSIBLE_DOMAIN=example.com

使用此设置，您可以在 Nuxt 配置中省略 plausible 键。

模块选项

选项	类型	默认值	描述
`enabled`	`布尔值`	`true`	是否启用跟踪器。
`hashMode`	`布尔值`	`false`	当 URL 哈希发生变化时，是否应跟踪页面浏览量。如果您的 Nuxt 应用程序使用 `hashMode` 路由选项而不是默认的历史记录模式，请启用此选项。
`domain`	`字符串`	`'window.location.hostname'`	将跟踪事件绑定到的域名。
`ignoredHostnames`	`字符串数组`	`['localhost']`	跟踪事件时要忽略的主机名。
`ignoreSubDomains`	`布尔值`	`false`	如果主机名是 `ignoredHostnames` 的子域名，则忽略它。
`apiHost`	`字符串`	`https://127.0.0.1`	事件将发送到的 API 主机。
`autoPageviews`	`布尔值`	`true`	自动跟踪当前页面和所有后续页面。如果您想手动管理页面浏览量跟踪，请禁用此选项。
`autoOutboundTracking`	`布尔值`	`false`	自动跟踪所有外部链接点击。如果启用，MutationObserver 会自动检测整个应用程序中的链接节点，并将 `click` 事件绑定到它们。
`logIgnoredEvents`	`布尔值`	`false`	如果事件被忽略，则将其记录到控制台。

组合式函数

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

!NOTE 由于 Plausible 实例仅在客户端可用，因此在服务器上执行组合式函数将不会产生任何效果。

`useTrackEvent`

跟踪自定义事件。通过将目标的名称作为参数 eventName 传递来跟踪您定义的目标。

类型声明

function useTrackEvent(
  eventName: string,
  options?: EventOptions,
  eventData?: PlausibleOptions,
): void

示例

// Tracks the `signup` goal
useTrackEvent('signup')

// Tracks the `Download` goal passing a `method` property.
useTrackEvent('Download', { props: { method: 'HTTP' } })

`useTrackPageview`

手动跟踪页面浏览量。

传递可选的事件数据，以便与 eventData 参数一起发送。默认为当前页面的数据与 Plausible 初始化期间提供的默认选项合并。

类型声明

function useTrackPageview(
  eventData?: PlausibleOptions,
  options?: EventOptions,
): void

💻 开发

克隆此存储库
使用 corepack enable 启用 Corepack
使用 pnpm install 安装依赖项
运行 pnpm run dev:prepare
使用 pnpm run dev 启动开发服务器

致谢

@Barbapapazes 为他的 Plausible 跟踪器重写