Next.js の分析

Next.js のプロダクト分析

PulsePanda を Next.js アプリに組み込めば、App Router でも Pages Router でも、バックエンドの配線やハイドレーションとの格闘なしに、すべてのルートでページビュー、イベント、セッションリプレイ、ヒートマップをキャプチャできます。

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

なぜ重要なのか

Next.js チームがついに見られるもの

ルート変更が追跡されない

Next.js のクライアント側ナビゲーションは完全なページ読み込みを発生させないため、単純な分析ではほとんどのビューを見逃します。PulsePanda はルーターにフックして、すべてのルート変更をカウントします。

手探りで機能を出荷している

サインアップ、アップグレード、機能の利用についてカスタムイベントを追跡し、各デプロイ後に実際に何が使われているかを把握しましょう。

バグの再現が困難

セッションリプレイは正確な DOM とコンソールエラーを記録するため、スタックトレースから推測する代わりに、壊れたレンダリングを確認できます。

セットアップ

PulsePanda を Next.js に追加

ルートレイアウトにスニペットを一度追加します。Next.js の Script コンポーネントに afterInteractive を指定すると、最初の描画をブロックせずに読み込まれます。

App Router — app/layout.tsx

import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        {children}
        <Script
          src="https://pulsepanda.dev/sdk.js"
          data-project="YOUR_PROJECT_ID"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

Pages Router を使用している場合は、代わりに pages/_app.tsx に同じ <Script> を追加します。ウェブ分析、自動キャプチャされたクリック、セッションリプレイ、ヒートマップがすぐに開始されます。

ワークフロー

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

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

Next.js プロジェクトに一度スクリプトを追加するだけです。ウェブ分析、自動キャプチャされたクリック、セッションリプレイ、ヒートマップがすぐに収集を開始します。

重要なことを追跡する

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

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

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

得られるもの

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

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

よくある質問

Next.js に関する質問

PulsePanda は Next.js のクライアント側ルート変更を追跡しますか？

はい。SDK は History API のナビゲーションをリッスンするため、すべての App Router または Pages Router の遷移が自動でページビューとしてカウントされます — 手動のルーターイベントは不要です。

スニペットは Core Web Vitals を損ないますか？

いいえ。スクリプトは遅延され、afterInteractive 戦略で読み込まれるため、コンテンツの描画後に実行され、LCP やインタラクションをブロックしません。

サーバーコンポーネントからカスタムイベントを送信できますか？

カスタムイベントは pulsepanda.track() を使ってブラウザから送信されます。クライアントコンポーネントやイベントハンドラーから呼び出します。サーバーコンポーネントは SDK を読み込むページをレンダリングします。

Next.js アプリに分析を追加

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

無料で始める