Svelte の分析

Svelte のプロダクト分析

1つのスクリプトタグから、Svelte または SvelteKit アプリに完全なプロダクト分析（イベント、ファネル、セッションリプレイ、ヒートマップ）を追加でき、クライアントナビゲーションも自動で追跡されます。

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

なぜ重要なのか

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

クライアントルートがカウントされない

SvelteKit はブラウザ内でナビゲートします。PulsePanda は各遷移を追跡するため、ページビューが実際の利用状況を反映します。

利用状況への可視性がない

カスタムイベントを追跡し、各リリース後にどの機能やルートにユーザーが到達するかを測定しましょう。

UI の問題が見えない

セッションリプレイとヒートマップは、ユーザーがコンポーネント内のどこで苦戦するかを明らかにします。

セットアップ

PulsePanda を Svelte に追加

SvelteKit がすべてのページに使用する HTML テンプレート src/app.html にスニペットを追加します。

SvelteKit — src/app.html

<!doctype html>
<html lang="en">
  <head>
    %sveltekit.head%
    <script
      src="https://pulsepanda.dev/sdk.js"
      data-project="YOUR_PROJECT_ID"
      defer></script>
  </head>
  <body>
    <div>%sveltekit.body%</div>
  </body>
</html>

素の Svelte（Vite）アプリの場合は、代わりに index.html に同じスニペットを追加します。

ワークフロー

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

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

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

重要なことを追跡する

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

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

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

得られるもの

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

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

よくある質問

Svelte に関する質問

SvelteKit のナビゲーションを追跡しますか？

はい。SDK は History API の変更をリッスンするため、SvelteKit のクライアント側ルート遷移が自動でページビューとして記録されます。

SvelteKit でスニペットをどこに入れますか？

src/app.html の <head> 内。その後、すべてのサーバーレンダリングおよびクライアントナビゲーションのページで読み込まれます。

Svelte コンポーネントからイベントを送信できますか？

はい。任意のハンドラーやライフサイクル関数の中で pulsepanda.track("event", { props }) を呼び出せます。

Svelte アプリに分析を追加

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

無料で始める