@nuxtjs/plausible

Plausible Analytics をネイティブに統合する Nuxt モジュール

33.3K ダウンロード•117 スター•v2.0.1

johannschopplich

Nuxt Plausible module

Nuxt Plausible

Nuxt 用の Plausible Analytics のネイティブ統合。

機能

🌻 設定不要
📯 コンポーザブルでイベントとページビューを手動でトラッキング
🔀 広告ブロッカーを回避するためのオプションの API プロキシ
📂 .env ファイルのサポート
🧺 妥当なデフォルトオプション
🦾 SSR対応

セットアップ

npx nuxi@latest module add plausible

基本的な使い方

@nuxtjs/plausible を Nuxt 設定の modules セクションに追加します。

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

完了！Plausible はアプリケーションのクライアントで実行されます。

!TIP デフォルトでは、@nuxtjs/plausible は Plausible の domain 設定キーに window.location.hostname を使用します。これはほとんどのユースケースに適しています。ドメインをカスタマイズする必要がある場合は、モジュールオプションで行うことができます。

このモジュールは、Plausible のサーバーに直接送信する代わりに、Plausible イベントを Nitro サーバー経由でルーティングできるプロキシ API 機能を提供します。これは、広告ブロッカーが Plausible のドメインへのリクエストをブロックするのを防ぎたい場合に便利です。プロキシが有効になっている場合、トラッカーはリクエストを自動的に現在のオリジン経由でルーティングします。

プロキシ API を有効にするには、proxy オプションを true に設定します。

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

  plausible: {
    proxy: true,
  },
})

!NOTE 有効にすると、すべての Plausible イベントはまずサーバーに送信され、そこから Plausible の API に転送されます。デフォルトのプロキシエンドポイントは /_plausible ですが、proxyBaseEndpoint モジュールオプションを使用してパスをカスタマイズできます。

モジュールオプション

オプション	タイプ	デフォルト	説明
`有効`	`ブール値`	`true`	トラッカーを有効にするかどうか。
`ハッシュモード`	`ブール値`	`false`	URL ハッシュが変更されたときにページビューを追跡するかどうか。Nuxt アプリがデフォルトの履歴モードではなく `hashMode` ルーターオプションを使用している場合は、これを有効にします。
`ドメイン`	`文字列`	`'window.location.hostname'`	追跡イベントをバインドするドメイン。
`ignoredHostnames`	`string[]`	`['localhost']`	イベントを追跡する際に無視するホスト名。
`ignoreSubDomains`	`ブール値`	`false`	ホスト名が `ignoredHostnames` のサブドメインである場合は無視します。
`apiHost`	`文字列`	`https://#`	イベントが送信される API ホスト。
`autoPageviews`	`ブール値`	`true`	現在のページとそれ以降のすべてのページを自動的に追跡します。ページビューの追跡を手動で管理したい場合は、これを無効にします。
`autoOutboundTracking`	`ブール値`	`false`	すべての外部リンククリックを自動的に追跡します。有効にすると、MutationObserver がアプリケーション全体でリンクノードを自動的に検出し、それらに `click` イベントをバインドします。
`logIgnoredEvents`	`ブール値`	`false`	イベントが無視された場合、コンソールにイベントを記録します。
`プロキシ`	`ブール値`	`false`	イベントエンドポイントを現在のオリジン経由でプロキシするかどうか。
`proxyBaseEndpoint`	`文字列`	`'/_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

💻 開発

このリポジトリをクローンする
corepack enable を使用して Corepack を有効にする
pnpm installを使用して依存関係をインストールする
pnpm run dev:prepare を実行します。
pnpm run dev を使用して開発サーバーを起動します。

クレジット

@Barbapapazes 氏による Plausible トラッカーの書き換え