Remix 向けアナリティクス

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

Remix は処理をサーバー側に寄せます。だからこそブラウザ側が計測されないまま残ります。ページビュー、イベント、リプレイ、ヒートマップを1か所で追加しましょう。

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

なぜ重要なのか

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

サーバー側の処理はクライアントに痕跡を残さない

loader と action は、どのアナリティクスタグからも見えない場所で実行されます。ブラウザ側で計測すれば、サーバーに何が要求されたかだけでなく、その人が実際に何をしたかが記録されます。

失敗した送信は何も起きていないように見える

action から返されたバリデーションエラーは、静かに離脱を生みます。リプレイなら、ユーザーが通過できなかった項目と、そこで表示されたメッセージが分かります。

プリフェッチが数字を水増しする

Remix はホバー時にルートをプリフェッチするため、サーバーログ由来の解析では誰も開いていないページまで数えてしまいます。クライアント側のページビューは、ルートが実際に表示されたときにだけ発火します。

セットアップ

Remix に PulsePanda を追加する

ルートルートのドキュメント側、Meta や Links の隣にタグを置きます。これでアプリ全体に対して一度だけ読み込まれます。

app/root.tsx

// app/root.tsx
import { Links, Meta, Outlet, Scripts } from '@remix-run/react';

export default function App() {
  return (
    <html lang="en">
      <head>
        <Meta />
        <Links />
        <script
          src="https://pulsepanda.dev/sdk.js"
          data-project="YOUR_PROJECT_ID"
          defer
        />
      </head>
      <body>
        <Outlet />
        <Scripts />
      </body>
    </html>
  );
}

Remix は初回ロード以降クライアント側で遷移しますが、SDK はその遷移を自動的に追跡します。各ルートに useEffect を書く必要はありません。

ワークフロー

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

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

app/root.tsx に一度スクリプトを追加すれば、ネストされたすべてのルートが対象になります。

重要なことを追跡する

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

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

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

得られるもの

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

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

よくある質問

Remix に関する質問

Remix ではスクリプトを正確にどこへ置きますか？

app/root.tsx のドキュメントコンポーネントの head 内です。このファイルがすべてのルートを包むため、タグ1つでアプリ全体をカバーできます。

ネストされたルートの遷移も追跡しますか？

はい。ページビューは URL に追随するため、アドレスバーが変わるネストされたルートも、他の遷移と同じように記録されます。

action からフォーム送信を計測できますか？

action ではなくブラウザ側で計測してください。送信が成功したときに track() を呼べば、イベントはそのセッションとリプレイに紐づいたまま残ります。

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

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

無料で始める