Nuxt Plausible module

Nuxt Plausible

機能

🌻 設定不要
📯 コンポーザブルを使用してイベントとページビューを手動で追跡
📂 .env ファイルのサポート
🧺 実用的なデフォルトオプション
🦾 SSR 対応

セットアップ

npx nuxi@latest module add plausible

基本的な使用方法

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

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

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

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

設定

サポートされているすべてのモジュールオプションは、Nuxt 設定の plausible キーを使用して設定できます。

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

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

！ヒントローカルホストでイベントの追跡を許可するには、ignoredHostnames オプションを空の配列に設定します。

実行時に設定

または、実行時に環境変数に一致する自動的に置き換えられたパブリックランタイム設定の値を活用して、プロジェクトの .env ファイルに必要なオプションを設定します。

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

この設定を使用すると、Nuxt 設定内の plausible キーを省略できます。

モジュールオプション

オプション	型	デフォルト	説明
`有効`	`ブーリアン型`	`true`	トラッカーを有効にするかどうか。
`ハッシュモード`	`ブーリアン型`	`false`	URL ハッシュが変更されたときにページビューを追跡するかどうか。Nuxt アプリが既定の履歴モードの代わりに `hashMode` ルーターオプションを使用している場合はこれを有効にします。
`ドメイン`	`文字列型`	`'window.location.hostname'`	追跡イベントにバインドするドメイン。
`無視されたホスト名`	`文字列型配列`	`['localhost']`	イベントを追跡するときに無視するホスト名。
`サブドメインを無視する`	`ブーリアン型`	`false`	`ignoredHostnames` のサブドメインである場合、ホスト名を無視します。
`API ホスト`	`文字列型`	`https://127.0.0.1`	イベントが送信される API ホスト。
`自動ページビュー`	`ブーリアン型`	`true`	現在のページとそれ以降のすべてのページを自動的に追跡します。ページビュー追跡を手動で管理する場合は、これを無効にします。
`autoOutboundTracking`	`ブーリアン型`	`false`	すべてのアウトバウンドリンクのクリックを自動的に追跡します。有効にすると MutationObserver がアプリケーション全体のリンクノードを自動的に検出して、`click` イベントをそれらにバインドします。
`logIgnoredEvents`	`ブーリアン型`	`false`	無視されたイベントをコンソールにログします。

コンポーザブル

Nuxtエコシステムの他のコンポーザブルと同じく、自動的にインポートされ、アプリケーションのコンポーネントで使用できます。

！注意 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追跡の書き換え