plausible
@nuxtjs/plausible

用於原生整合 Plausible analytics 的 Nuxt 模組
33.3K 下載117 星v2.0.1
johannschopplichjohannschopplich

Nuxt Plausible module

Nuxt Plausible

npm version

為 Nuxt 原生整合 Plausible Analytics。

功能

  • 🌻 無需配置
  • 📯 使用 可組合項 手動跟蹤事件和頁面瀏覽
  • 🔀 可選的 API 代理以避免廣告攔截器
  • 📂 .env 檔案支援
  • 🧺 合理的預設選項
  • 🦾 SSR-ready

設定

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 要允許在 localhost 上跟蹤事件，請將 ignoredHostnames 選項設定為空陣列。

執行時配置

或者，透過匹配執行時的環境變數來利用 自動替換的公共執行時配置值，在專案中的 .env 檔案中設定所需的選項

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

透過此設定，你可以省略 Nuxt 配置中的 plausible 鍵。

代理配置

該模組提供了一個代理 API 功能，允許你透過你的 Nitro 伺服器路由 Plausible 事件，而不是直接將它們傳送到 Plausible 的伺服器。如果你想阻止廣告攔截器阻止對 Plausible 域的請求，這會很有用。啟用代理後，跟蹤器將自動通過當前來源路由請求。

要啟用代理 API，請將 proxy 選項設定為 true

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

  plausible: {
    proxy: true,
  },
})

!NOTE 啟用後，所有 Plausible 事件將首先發送到你的伺服器，然後伺服器將其轉發到 Plausible 的 API。預設的代理端點是 /_plausible，但你可以使用 proxyBaseEndpoint 模組選項自定義路徑。

模組選項

選項型別預設描述
enabledbooleantrue是否啟用跟蹤器。
hashModebooleanfalse當 URL 雜湊改變時是否跟蹤頁面瀏覽。如果你的 Nuxt 應用使用 hashMode 路由器選項而不是預設的歷史模式，請啟用此項。
domainstring'window.location.hostname'繫結跟蹤事件的域。
ignoredHostnamesstring[]['localhost']跟蹤事件時要忽略的主機名。
ignoreSubDomainsbooleanfalse如果主機名是 ignoredHostnames 的子域，則忽略該主機名。
apiHoststringhttps://#事件將傳送到的 API 主機。
autoPageviewsbooleantrue自動跟蹤當前頁面和所有後續頁面。如果你想手動管理頁面瀏覽跟蹤，請停用此項。
autoOutboundTrackingbooleanfalse自動跟蹤所有出站連結點選。如果啟用，MutationObserver 將自動檢測應用程式中的連結節點併為其繫結 click 事件。
logIgnoredEventsbooleanfalse如果事件被忽略，則將其記錄到控制檯。
proxybooleanfalse是否通過當前來源代理事件端點。
proxyBaseEndpointstring'/_plausible'代理 Plausible 事件端點的基本端點。

可組合項

與 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

💻 開發

  1. 克隆此倉庫
  2. 使用 corepack enable 啟用 Corepack
  3. 使用 pnpm install 安裝依賴
  4. 執行 pnpm run dev:prepare
  5. 使用 pnpm run dev 啟動開發伺服器

鳴謝

許可證

MIT 許可證 © 2022-PRESENT Johann Schopplich