React の分析

React のプロダクト分析

PulsePanda は、1つのスクリプトタグから、React のシングルページアプリに完全なプロダクト分析（イベント、ファネル、セッションリプレイ、ヒートマップ）を提供し、クライアント側のルート変更も標準で追跡されます。

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

なぜ重要なのか

React チームがついに見られるもの

SPA が1つのページビューを報告する

React アプリは一度読み込まれ、その後ブラウザ内でビューを切り替えます。PulsePanda はアプリ内の各ナビゲーションを追跡するため、分析は単一のランディングではなく実際の利用状況を反映します。

使用されたコンポーネントへのインサイトがない

気になるボタンやフローでカスタムイベントを発火させ、特定の機能やコンポーネントの利用状況を測定しましょう。

再現が困難な UI バグ

セッションリプレイはレンダリングされた DOM とエラーをキャプチャするため、ユーザーにとって壊れた正確な状態を確認できます。

セットアップ

PulsePanda を React に追加

PulsePanda はフレームワークに依存しないため、最もシンプルなインストールは HTML シェル内のスクリプトタグです。次に追加します <head> エントリー HTML ファイルの。

Vite — index.html（CRA の場合は public/index.html）

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <script
      src="https://pulsepanda.dev/sdk.js"
      data-project="YOUR_PROJECT_ID"
      defer></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

読み込まれたら、次を呼び出します pulsepanda.track("event_name", { ...props }) 任意のコンポーネントからカスタムイベントを記録し、ファネルを構築します。

ワークフロー

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

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

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

重要なことを追跡する

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

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

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

得られるもの

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

分析レイヤーページビュー、カスタムイベント、コンバージョンファネル、リテンション。

行動レイヤーセッションリプレイ、クリックとスクロールのヒートマップ、エラーコンテキスト。

フィードバックレイヤープロダクト内アンケート、フィードバックウィジェット、フォーム、機能投票ボード。

よくある質問

React に関する質問

React Router で動作しますか？

はい。SDK は History API のナビゲーションを追跡するため、React Router、TanStack Router、または任意のクライアントルーターからのルート変更が自動でページビューとしてキャプチャされます。

Create React App と Vite で動作しますか？

両方対応します。CRA の場合は public/index.html に、Vite の場合は index.html にスクリプトを追加します。ビルドステップへの依存はありません。

ログインユーザーをどのように識別しますか？

ログイン後に pulsepanda.identify("user_id", { email, plan }) を呼び出すと、訪問をまたいでセッション、イベント、フィードバックが同一人物に紐づけられます。

React アプリに分析を追加

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

無料で始める