Nuxt 向けアナリティクス

Nuxt のためのプロダクトアナリティクス

ページビュー、カスタムイベント、セッションリプレイ、ヒートマップまで、Nuxt アプリ内の訪問者の動きを、機能ごとにプラグインを組み込むことなく把握できます。

無料で始めるインストールガイド

なぜ重要なのか

Nuxt チームがついに把握できるようになること

Nitro ではクライアント側が見えない

サーバーログから分かるのはルートがレンダリングされた事実だけで、実際に読まれたか、スクロールされたか、途中で離脱されたかは分かりません。クライアント側の計測が、サーバーには見えない部分をすべて埋めます。

ソフトナビゲーションが計測されない

初回ロード以降、Nuxt は完全なリクエストなしにページを切り替えます。ドキュメントの読み込みしか数えないツールは、セッション全体をページビュー1件として報告してしまいます。

ハイドレーションエラーが見えないままになる

ハイドレーションの不一致はユーザーのページを壊しますが、サーバーのレスポンス自体は正常に見えます。リプレイなら、訪問者が実際に目にした壊れた画面をそのまま確認できます。

セットアップ

Nuxt に PulsePanda を追加する

nuxt.config.ts の app.head ブロックにスクリプトを登録します。SSR でも SSG でも、すべてのルートに適用されます。

nuxt.config.ts

// nuxt.config.ts
export default defineNuxtConfig({
  app: {
    head: {
      script: [
        {
          src: 'https://pulsepanda.dev/sdk.js',
          'data-project': 'YOUR_PROJECT_ID',
          defer: true
        }
      ]
    }
  }
})

Nuxt は History API でナビゲーションするため、ルート遷移は自動的に検出されます。ページビューの記録にルーターのフックは不要です。

ワークフロー

インストールからインサイトまで

スニペットをインストールする

nuxt.config.ts に一度スクリプトを追加すれば、アプリのすべてのルートが対象になります。

重要なことを追跡する

主要なアクションでは pulsepanda.track() を、ログイン後には pulsepanda.identify() を呼び出して、イベント、セッション、フィードバックを各ユーザーに紐づけます。

データに基づいて行動する

ファネルを構築し、離脱の背後にあるリプレイを確認し、ヒートマップを読み、プロダクト内フィードバックを収集できます — すべて1つのワークスペースで。

得られるもの

1つのスニペットで全体像を把握

1つのスニペットで全体像を把握
分析レイヤー	ページビュー、カスタムイベント、コンバージョンファネル、リテンション。
行動レイヤー	セッションリプレイ、クリックとスクロールのヒートマップ、エラーコンテキスト。
フィードバックレイヤー	プロダクト内アンケート、フィードバックウィジェット、フォーム、機能投票ボード。

よくある質問

Nuxt に関する質問

Nuxt の SSR モードでも動作しますか？

はい。スニペットはクライアント側でのみ動作するため、サーバーレンダリング、静的生成、その両方のいずれであってもハイドレーション後に実行されます。

Nuxt のプラグインやモジュールは必要ですか？

いいえ。ページビューとリプレイには app.head への記述だけで十分です。composable から track() を1か所で呼びたい場合にのみプラグインを追加してください。

Nuxt のパフォーマンススコアに影響しますか？

タグには defer が指定されているため、アプリが操作可能になった後に読み込まれ、レンダリングや初回描画をブロックしません。

Nuxt アプリにアナリティクスを追加

一度インストールするだけで、数分で分析、セッションリプレイ、ヒートマップ、ファネル、フィードバックを接続できます。

無料で始める